Add a Floating Action Button

A floating action button (FAB) is a circular button that triggers the primary action in your app's UI. This page shows you how to add the FAB to your layout, customize some of its appearance, and respond to button taps.

To learn more about how to design a floating action button into your app according to the Material Design Guidelines, also see Buttons: Floating Action Button.

Figure 1. A floating action button

Add the floating action button to your layout

The following code shows how the FloatingActionButton should appear in your layout file:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

By default, the FAB is colored by the colorAccent attribute, which you can customize with the theme's color palette.

You can configure other FAB properties using either XML attributes or corresponding methods, such as the following:

• The size of the FAB, using the app:fabSize attribute or the setSize() method.
• The ripple color of the FAB, using the app:rippleColor attribute or the setRippleColor() method.
• The FAB icon, using the android:src attribute or the setImageDrawable() method.

Respond to button taps

You can then apply an View.OnClickListener to handle FAB taps. For example, the following code displays a Snackbar when the user taps the FAB:

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

For more information on the capabilities of the FAB, see the API reference for the FloatingActionButton.