5.2 KiB
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
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 -->
<com.google.android.material.floatingactionbutton.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"
app:srcCompat="@drawable/ic_plus_24"/>
</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
Using FloatingActionButton with an updated Material theme
(Theme.MaterialComponents) will provide the correct updated Material styles to
your floating action buttons by default. If you need to use an updated Material
floating action button and your application theme does not inherit from an
updated Material theme, you can apply one of the updated Material styles
directly to your widget in XML.
Updated Material Style
The updated Material FloatingActionButton style consists of updated elevation,
ripple, and motion changes.
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
style="@/style/Widget.MaterialComponents.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
app:srcCompat="@drawable/ic_plus_24"/>
Legacy Material Style
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
style="@/style/Widget.Design.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
app:srcCompat="@drawable/ic_plus_24"/>
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 view) {
// 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.