mirror of
https://github.com/material-components/material-components-android.git
synced 2026-02-20 08:39:55 +08:00
44dd1c6248
Includes all the styles and attributes, two of the most critical pieces of information that readers come looking for. PiperOrigin-RevId: 182858497
127 lines
4.0 KiB
Markdown
127 lines
4.0 KiB
Markdown
<!--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)
|