web-dev-qa-db-fra.com

Android L - Bouton d'action flottant (FAB)

Google a-t-il déjà publié un style ou un composant défini pour ce nouveau bouton FAB circulaire ou dois-je implémenter lui-même le design?

Le bouton est décrit ici: Google Design | Boutons d'action flottante

EDIT (05/2015): Vérifiez réponse de Lukas / réponse de Gabriele montrant un moyen simple de l'implémenter avec la bibliothèque de support de conception.

javaandroidandroid-5.0-lollipopmaterial-designandroid-design-library
47
yannickpulver

[~ # ~] update [~ # ~] : il existe maintenant un widget officiel pour FAB: FloatingActionButton, voir la réponse de Gabriele Mariotti pour des informations complètes.

Selon Adam Powell et Chet Haase, ils n’ont pas créé de widget pour le bouton FAB, c’est un composant très facile à reproduire.

Il y avait une question dans le Google IO discours de 2014 "Google I/O 2014 - Science des matériaux: développement Android applications avec conception matérielle"), à la fin de le discours (à environ 37h50), il y avait exactement cette question, vous pouvez l'entendre ici: https://www.youtube.com/watch?v=lSH9aKXjgt8#t=228

Chet Haase dit qu'il y a un RoundedBitmapDrawable (je n'ai pas vérifié si c'est bien le nom) qui devrait déjà faire le travail de définition du contour.

Mais vous pouvez le faire avec votre propre dessin, lui définir une altitude et définir un contour de cercle par programme.

Cela devrait vous donner le bouton rond avec une ombre sur le déclencheur gauche. Mais je pense que vous devrez construire vous-même le Shadow Pre-L.

Je devrais vérifier le code de CardView pour voir comment il reproduit l’ombre pré-L. Je vais probablement le faire, mais je n'ai pas le temps maintenant. Si personne n'apparaît avec les détails, je le ferai après avoir trouvé le temps d'aller le vérifier.

MODIFIER:

Gabriele Mariotti (voir sa réponse ci-dessous, merci) a ajouté du code pour vous montrer comment faire.

Grâce aux commentaires de @shomeser, il a écrit une bibliothèque pour créer le bouton fab:

https://github.com/shamanland/floating-action-button

Pour l'utiliser:

dependencies {
    compile 'com.shamanland:fab:0.0.3'
}

Vous pouvez également lire sa réponse à une autre question: Comment puis-je ajouter le nouveau "Bouton d'action flottant" entre deux widgets/mises en page

23
Daniele Segato

MIS À JOUR: 16/08/2019 avec les composants matériels officiels de la Android bibliothèque

Avec le nouveau Composants matériels pour Android , ajoutez à votre build.gradle:

implementation 'com.google.Android.material:material:1.0.0'

Ajoutez ensuite votre mise en page:

<com.google.Android.material.floatingactionbutton.FloatingActionButton
      Android:id="@+id/floating_action_button"
      Android:layout_width="wrap_content"
      Android:layout_height="wrap_content"
      Android:layout_gravity="bottom|right"
      Android:layout_margin="16dp"
      app:srcCompat="@drawable/ic_plus_24"/>

Et utilisez-le:

FloatingActionButton floatingActionButton =
    (FloatingActionButton) findViewById(R.id.floating_action_button);    
floatingActionButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        // Handle the click.
    }
});

Si vous utilisez un thème de matériau comme Theme.MaterialComponents Votre FAB héritera du style de matériau. Sinon, appliquez simplement le style @style/Widget.MaterialComponents.FloatingActionButton

<com.google.Android.material.floatingactionbutton.FloatingActionButton
    ....
    style="@style/Widget.MaterialComponents.FloatingActionButton"
    ..../>

Plus info ici .

À JOUR: 30/05/2015 avec la bibliothèque officielle d'aide à la conception

Il y a un widget officiel maintenant.

Ajoutez simplement cette dépendance à votre build.gradle

compile 'com.Android.support:design:22.2.0'

Ajoutez cette vue à votre mise en page:

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="end|bottom"
    Android:src="@drawable/ic_done" />

Et utilisez-le:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               //TODO
            }
        });

Documentation:

À JOUR: 12/12/2014 avec Android 5 codes

Aussi, vous pouvez ajouter et stateListAnimator à votre bouton:

<Button
 Android:stateListAnimator="@anim/anim"
/>

Où anim.xml est:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:state_enabled="true"
        Android:state_pressed="true">
        <objectAnimator
            Android:duration="@Android:integer/config_shortAnimTime"
            Android:propertyName="translationZ"
            Android:valueFrom="@dimen/button_elevation"
            Android:valueTo="@dimen/button_press_elevation"
            Android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            Android:duration="@Android:integer/config_shortAnimTime"
            Android:propertyName="translationZ"
            Android:valueFrom="@dimen/button_press_elevation"
            Android:valueTo="@dimen/button_elevation"
            Android:valueType="floatType" />
    </item>
</selector>

Dimens.xml est

<resources>
    <dimen name="fab_size">56dp</dimen>

    <dimen name="button_elevation">2dp</dimen>
    <dimen name="button_press_elevation">4dp</dimen>
</resources>

Vérifie la réponse de Daniele.

A propos de Outline mentionné par Daniele. Ajoutez l'attribut altitude à votre bouton et définissez le contour via le code :

   <ImageButton
        Android:background="@drawable/ripple"
        Android:stateListAnimator="@anim/anim"
        Android:src="@drawable/ic_action_add"
        Android:elevation="4dp"
        />

À propos de Outline:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layoutfab);

        //Outline: OLD METHOD IN L-PREVIEW
        //int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
        //Outline outline = new Outline();
        //outline.setOval(0, 0, size, size);
        //findViewById(R.id.fab).setOutline(outline);

        Button fab = (Button) findViewById(R.id.fab);
        ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
           @Override
           public void getOutline(View view, Outline outline) {
              // Or read size directly from the view's width/height
              int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
              outline.setOval(0, 0, size, size);
           }
        };
        fab.setOutlineProvider(viewOutlineProvider);
    }

}

enter image description here

57
Gabriele Mariotti

Google fournit maintenant une bibliothèque officielle , appelée bibliothèque de conception , contenant le bouton Fab Ajoutez simplement la dépendance Gradle suivante:

compile 'com.Android.support:design:22.2.0'

Ensuite, vous pouvez utiliser le bouton fab comme ceci:

<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"/>

Plus d'informations peuvent être trouvées dans leur annonce

http://Android-developers.blogspot.ch/2015/05/Android-design-support-library.html

ou sur la page javadoc

http://developer.Android.com/reference/Android/support/design/widget/FloatingActionButton.html

20
Lukas

Depuis que la fonctionnalité Labels FAB (comme dans les applications Evernote ou Inbox) a été ajoutée à cet impressionnant bibliothèque , n'hésitez pas à l'utiliser:

Dépendance de Gradle:

    compile 'com.getbase:floatingactionbutton:1.3.0'

Layout.xml:

     <com.getbase.floatingactionbutton.FloatingActionsMenu
        Android:id="@+id/multiple_actions"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"
        Android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_labelStyle="@style/menu_labels_style"
        Android:layout_marginBottom="16dp"
        Android:layout_marginRight="16dp"
        Android:layout_marginEnd="16dp">

        <com.getbase.floatingactionbutton.FloatingActionButton
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action A"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action B"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

menu_labels_style.xml:

    <style name="menu_labels_style">
        <item name="Android:background">@drawable/fab_label_background</item>
        <item name="Android:textColor">@color/white</item>
    </style>

fab_label_background.xml:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <solid Android:color="@color/black_semi_transparent"/>
    <padding
        Android:left="16dp"
        Android:top="4dp"
        Android:right="16dp"
        Android:bottom="4dp"/>
    <corners
        Android:radius="2dp"/>
</shape>

Prendre plaisir!

7
Roman