<!--docs:
title: "Floating Action Buttons"
layout: detail
section: components
excerpt: "A floating button for the primary action in an application."
iconId: button
path: /catalog/floating-action-button/
-->

# Floating Action Buttons

`FloatingActionButton` displays the primary action in an application. It is
a round icon button that's elevated above other page content. **Floating action
buttons** come in a default and mini size.

Floating action buttons provide quick-access to important or common actions
within an app. They have a variety of uses, including:

-   Performing a common action, such as starting a new email in a mail app.
-   Displaying additional related actions.
-   Update or transforming into other UI elements on the screen.

Floating action buttons adjust their position and visibility in response to
other UI elements on the screen.

## Design & API Documentation

-   [Material Design guidelines: Floating Action
    Buttons](https://material.io/guidelines/components/buttons-floating-action-button.html)
    <!--{: .icon-list-item.icon-list-item--spec }-->
-   [Class
    definition](https://github.com/material-components/material-components-android/tree/master/lib/java/android/support/design/widget/FloatingActionButton.java)
    <!--{: .icon-list-item.icon-list-item--link }-->
-   [Class
    overview](https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html)
    <!--{: .icon-list-item.icon-list-item--link }--> <!--{: .icon-list }-->

## Usage

The `FloatingActionButton` widget provides a complete implementation of Material
Design's floating action button component. Example code of how to include the
widget in your layout:

```xml
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <!-- Main content -->

  <android.support.design.widget.FloatingActionButton
      android:id="@+id/floating_action_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom|right"
      android:layout_margin="16dp"/>

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

Note: If the `FloatingActionButton` is a child of a `CoordinatorLayout`, you get
certain behaviors for free. It will automatically shift so that any displayed
[Snackbars](Snackbar.md) do not cover it, and will automatially hide when
covered by an [AppBarLayout](AppBarLayout.md) or
[BottomSheetBehavior](BottomSheetBehavior.md).

### Material Styles (Updated)

The updated Material FloatingActionButton consists of updated elevation, ripple,
and motion changes.

```java
style="@/style/Widget.MaterialComponents.FloatingActionButton"
```

### Material Styles (Legacy)

```java
style="@/style/Widget.Design.FloatingActionButton"
```

### Attributes

Feature    | Relevant attributes
:--------- | :-------------------------------
Icon       | `app:srcCompat`
           | `app:tint`
           | `app:maxImageSize`
Size       | `app:fabSize`
           | `app:fabCustomSize`
Background | `app:backgroundTint`
Ripple     | `app:rippleColor`
Border     | `app:borderWidth`
Elevation  | `app:elevation`
           | `app:hoveredFocusedTranslationZ`
           | `app:pressedTranslationZ`
Motion     | `app:showMotionSpec`
           | `app:hideMotionSpec`

### Handling Clicks

`FloatingActionButton` handles clicks in the same way as all views:

```java
FloatingActionButton floatingActionButton =
    (FloatingActionButton) findViewById(R.id.floating_action_button);

floatingActionButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle the click.
    }
});
```

### Visibility

Use the `show` and `hide` methods to animate the visibility of a
`FloatingActionButton`. The show animation grows the widget and fades it in,
while the hide animation shrinks the widget and fades it out.

## Related Concepts

-   [CoordinatorLayout](CoordinatorLayout.md)