Skip to content

Latest commit

 

History

History
163 lines (128 loc) · 7.04 KB

ExtendedFloatingActionButton.md

File metadata and controls

163 lines (128 loc) · 7.04 KB
Raw

Extended Floating Action Button

An ExtendedFloatingActionButton displays the primary action in an application. The Extended FAB is wider than the regular FloatingActionButton, and it includes a text label.

Extended 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.

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

Design & API Documentation

Usage

The ExtendedFloatingActionButton widget provides a complete implementation of Material Design's extended FAB component. The example below shows a usage of the extended FAB within a CoordinatorLayout, but the CoordinatorLayout is not necessary for this component. There are more generic examples of usage later on. Here's how to include the widget in your layout:

<androidx.coordinatorlayout.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.ExtendedFloatingActionButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="8dp"
      android:contentDescription="@string/extended_fab_content_desc"
      android:text="@string/extended_fab_label"
      app:icon="@drawable/ic_plus_24px"
      app:layout_anchor="@id/app_bar"
      app:layout_anchorGravity="bottom|right|end"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Note: ExtendedFloatingActionButton is a child class of MaterialButton, rather than FloatingActionButton. This means that several attributes which are applicable to FloatingActionButton have different naming in ExtendedFloatingActionButton. For example, FloatingActionButton uses app:srcCompat to set the icon drawable, whereas ExtendedFloatingActionButton uses app:icon. To compare the attribute sets for these two components, please see the FloatingActionButton page, and the "Attributes" table on this page.

Material Styles

Using ExtendedFloatingActionButton with a Material theme (Theme.MaterialComponents) will provide the correct Material styling to your extended FABs by default.

Default Extended Floating Action Button Style

The default style represents an extended floating action button with a colored background, text, and an icon.

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:contentDescription="@string/extended_fab_content_desc"
      android:text="@string/extended_fab_label"
      app:icon="@drawable/ic_plus_24px"/>

Extended FABs with no style directly applied to them, but with a Material theme applied, are styled with the Widget.MaterialComponents.ExtendedFloatingActionButton.Icon style. The Icon suffix indicates that the paddings for this button have been adjusted to give a more even spacing when an icon is present.

Text-only Extended Floating Action Button Style

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:contentDescription="@string/extended_fab_content_desc"
      android:text="@string/extended_fab_label"/>

The Widget.MaterialComponents.ExtendedFloatingActionButton, with no Icon suffix, indicates that the paddings for this extended FAB are more suited for a text-only button. This style should only be used when your extended FAB does not need to display an icon, and must be manually applied to your extended FAB.

Attributes

The following attributes can be changed for Extended Floating Action Button:

Description Relevant attributes
Button padding android:padding
android:paddingLeft
android:paddingRight
android:paddingStart
android:paddingEnd
android:paddingTop
android:paddingBottom
Button inset android:insetLeft
android:insetRight
android:insetTop
android:insetBottom
Background color app:backgroundTint
app:backgroundTintMode
Icon drawable app:icon
app:iconSize
Padding between icon and text app:iconPadding
Icon color app:iconTint
app:iconTintMode
Stroke app:strokeColor
app:strokeWidth
Ripple app:rippleColor
Shape app:shapeAppearance
app:shapeAppearanceOverlay

Theme Attribute Mapping

style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton" and
style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton.Icon"
Component Attribute Default Theme Attribute Value
android:textAppearance textAppearanceButton
backgroundTint colorSecondary
iconTint colorOnSecondary
rippleColor colorOnSecondary at 32% opacity (pressed)
android:textColor colorOnSecondary

Visibility

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

Extending and Shrinking

In addition, ExtendedFloatingActionButton has the methods extend and shrink to animate showing and hiding the extended FAB's text. The extend animation extends the FAB to show the text and the icon. The shrink animation shrinks the FAB to show just the icon.

Related Concepts