Add a floating action button

Try the Compose way

Jetpack Compose is the recommended UI toolkit for Android. Learn how to add components in Compose.

Floating Action Button →

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

To learn more about how to design a FAB for your app according to the Material Design Guidelines, see Material Design FAB .

Add the floating action button to your layout

The following code shows how the FloatingActionButton appears 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, a FAB is colored by the colorAccent attribute, which you can customize with the theme's color palette .

You can configure other FAB properties using 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 about the capabilities of the FAB, see the API reference for the FloatingActionButton .