Try the Compose way  
Jetpack Compose is the recommended UI toolkit for Android. Learn how to add components in Compose.  
[Floating Action Button →](https://developer.android.com/develop/ui/compose/components/fab)  
![](https://developer.android.com/static/images/android-compose-ui-logo.png)

<br />

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](https://m3.material.io/components/floating-action-button/overview)
.
![An image showing an app screen containing a red FloatingActionButton](https://developer.android.com/static/training/material/images/fab.png) **Figure 1.** A floating action button (FAB).

## Add the floating action button to your layout

The following code shows how the
[`FloatingActionButton`](https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton)
appears in your layout file:  

```xml
<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](https://developer.android.com/guide/topics/ui/look-and-feel/themes#ColorPalette).

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()`](https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton#setSize(int)) method
- The ripple color of the FAB, using the `app:rippleColor` attribute or the [`setRippleColor()`](https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton#setRippleColor(int)) method
- The FAB icon, using the `android:src` attribute or the [`setImageDrawable()`](https://developer.android.com/reference/android/widget/ImageView#setImageDrawable(android.graphics.drawable.Drawable)) method

## Respond to button taps

You can then apply an
[`View.OnClickListener`](https://developer.android.com/reference/android/view/View.OnClickListener) to
handle FAB taps. For example, the following code displays a
[`Snackbar`](https://developer.android.com/reference/com/google/android/material/snackbar/Snackbar) when
the user taps the FAB:  

### Kotlin

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

### Java

```java
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`](https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton).