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

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

• Material Design guidelines: Floating Action Buttons
• Class definition
• Class overview

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

• FloatingActionButton
• MaterialButton