Android L - Flottant Bouton d'Action (FAB)

est-ce que Google a déjà publié un style défini ou un composant pour ce nouveau bouton circulaire FAB ou dois-je mettre en œuvre le design moi-même?

Le bouton est décrit ici: Google Design | Flottant Boutons d'Action

MODIFIER (05/2015): cochez la Case Lukas " réponse / Gabriele réponse montrant un moyen facile à mettre en œuvre avec le support à la conception de la bibliothèque.

47
demandé sur Community 2014-06-27 15:45:01

4 réponses

mise à jour : il y a maintenant un widget officiel pour FAB: FloatingActionButton, voir la réponse de Gabriele Mariotti pour plus d'informations.

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

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

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

mais vous pouvez le faire avec votre propre dessiner, mettre une élévation à elle et définir un contour de cercle programmatically.

cela devrait vous donner le bouton rond avec l'ombre sur le relâchement L. Mais je pense que vous devrez construire L'ombre pré-L sur votre propre.

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 ne donne les détails, je le ferai après avoir trouvé le temps d'aller vérifier.

EDIT:

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

grâce aux commentaires de @shomeser, il a écrit une bibliothèque pour faire 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 / layouts

23
répondu Daniele Segato 2017-05-23 12:00:21

mise à jour: 30/05/2015 avec la bibliothèque officielle D'appui aux dessins et modèles

il y a un widget officiel maintenant.

il suffit d'ajouter 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 l'utiliser:

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

de la Documentation:

mise à jour: 02/12/2014 avec Android 5 code

vous pouvez aussi ajouter et stateListAnimator à votre bouton:

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

où anim.le 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érifiez la réponse de Daniele.

À propos de contour mentionné par Daniele. Ajouter l'attribut elevation à votre bouton, et définir le Outline via 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
répondu Gabriele Mariotti 2017-09-23 02:38:49

Google fournit maintenant une bibliothèque officielle , appelée BIBLIOTHÈQUE de design, contenant le bouton Fab . Il suffit d'ajouter 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
répondu Lukas 2015-05-29 20:23:45

depuis que la fonctionnalité Fab des étiquettes (comme dans les applis Evernote ou Inbox) a été ajoutée à cette impressionnante bibliothèque n'hésitez pas à l'utiliser:

Grade dependency:

    compile 'com.getbase:floatingactionbutton:1.3.0'

Mise en page.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>

Profitez-en!

7
répondu Roman 2014-12-08 10:33:47