material-components_material-components-android/docs/components/FloatingActionButton.md

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
• Class definition
• Class overview

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:

<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 do not cover it, and will automatially hide when covered by an AppBarLayout or BottomSheetBehavior.

Material Styles (Updated)

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

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

Material Styles (Legacy)

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:

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