Android
FloatingActionButton

Introduction

Paramètres

Remarques

dependencies {
    compile 'com.android.support:design:25.1.0'
}

Comment ajouter le FAB à la mise en page

Pour utiliser un FloatingActionButton, ajoutez simplement la dépendance dans le fichier build.gradle comme décrit dans la section Remarques.

Puis ajoutez à la 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="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/my_icon" />

Un exemple:

Couleur

La couleur d'arrière-plan de cette vue correspond par défaut au colorAccent de votre thème.

Dans l'image ci-dessus, si le src ne pointe que sur l'icône + (par défaut 24x24 dp), pour obtenir la couleur d'arrière - plan du cercle complet, vous pouvez utiliser app:backgroundTint="@color/your_colour"

Si vous souhaitez changer la couleur dans le code, vous pouvez utiliser,

myFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));

Si vous voulez changer la couleur de FAB dans l'utilisation de l'état pressé

mFab.setRippleColor(your color in int);

Positionnement

Il est recommandé de placer un minimum de 16 dB à partir du bord sur le mobile et de 24 dB minimum sur la tablette / le bureau.

Remarque : une fois que vous avez défini un src sauf pour couvrir toute la zone de FloatingActionButton assurez-vous de disposer de la bonne taille pour obtenir le meilleur résultat.

La taille de cercle par défaut est de 56 x 56dp

Taille de cercle mini: 40 x 40dp

Si vous ne voulez changer que l'icône Intérieur, utilisez une icône 24 x 24dp pour la taille par défaut.

Afficher et masquer FloatingActionButton sur Swipe

Pour afficher et masquer un FloatingActionButton avec l'animation par défaut, il suffit d'appeler les méthodes show() et hide() . Il est recommandé de conserver un FloatingActionButton dans la disposition des activités au lieu de le placer dans un fragment, cela permet aux animations par défaut de fonctionner lors de l'affichage et du masquage.

Voici un exemple avec un ViewPager :

• Trois onglets
• Afficher FloatingActionButton pour le premier et le troisième onglet
• Masquer le FloatingActionButton au milieu de l'onglet

public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab;
    ViewPager viewPager;

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

        fab = (FloatingActionButton) findViewById(R.id.fab);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        // ...... set up ViewPager ............

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                if (position == 0) {
                    fab.setImageResource(android.R.drawable.ic_dialog_email);
                    fab.show();
                } else if (position == 2) {
                    fab.setImageResource(android.R.drawable.ic_dialog_map);
                    fab.show();
                } else {
                    fab.hide();
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageScrollStateChanged(int state) {}
        });

        // Handle the FloatingActionButton click event:
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = viewPager.getCurrentItem();
                if (position == 0) {
                    openSend();
                } else if (position == 2) {
                    openMap();
                }
            }
        });

    }
}

Résultat:

Afficher et masquer FloatingActionButton sur le défilement

À partir de la version 22.2.1 de Support Library, il est possible d'afficher et de masquer un FloatingActionButton contre un comportement de défilement à l'aide d'une sous-classe FloatingActionButton.Behavior qui tire parti des méthodes show() et hide() .

Notez que cela ne fonctionne qu'avec un CoordinatorLayout associé à des vues internes prenant en charge le défilement imbriqué, telles que RecyclerView et NestedScrollView .

Cette classe ScrollAwareFABBehavior provient des Guides Android sur Codepath _{^{(cc-wiki avec attribution requise)}}

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                                       final View directTargetChild, final View target, final int nestedScrollAxes) {
        // Ensure we react to vertical scrolling
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                               final View target, final int dxConsumed, final int dyConsumed,
                               final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            // User scrolled down and the FAB is currently visible -> hide the FAB
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            // User scrolled up and the FAB is currently not visible -> show the FAB
            child.show();
        }
    }
}

Dans le app:layout_behavior XML de présentation FloatingActionButton, spécifiez l' app:layout_behavior avec le nom de classe qualifié complet de ScrollAwareFABBehavior :

app:layout_behavior="com.example.app.ScrollAwareFABBehavior"

Par exemple avec cette mise en page:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="6dp">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll|enterAlways"
            />

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            app:tabMode="fixed"
            android:layout_below="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:elevation="0dp"
            app:tabTextColor="#d3d3d3"
            android:minHeight="?attr/actionBarSize"
            />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:layout_behavior="com.example.app.ScrollAwareFABBehavior"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

Voici le résultat:

Définition du comportement de FloatingActionButton

Vous pouvez définir le comportement du FAB en XML.

Par exemple:

<android.support.design.widget.FloatingActionButton    
   app:layout_behavior=".MyBehavior" />

Ou vous pouvez définir par programmation en utilisant:

CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setBehavior(xxxx);
fab.setLayoutParams(p);