Material 3 Extended Floating Action Buttons

Overview

Extended Floating Action Buttons (Extended FABs) are rectangular, elevated buttons with text and optional icons, representing primary screen actions.

Material 3 Extended FABs, using com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton, support three variants: Small (56dp), Medium (80dp), and Large (96dp). The original Extended FAB and Surface Extended FAB are deprecated. They integrate with CoordinatorLayout for behaviors like avoiding Snackbars. This guide covers implementation, accessibility, and theming.

Getting Started

• Add Material Components for Android library dependency
• Use ExtendedFloatingActionButton in CoordinatorLayout
• Apply Theme.Material3.* for styling
• Enable Material3Expressive themes for expressive styles

Accessibility

• Text labels are auto-accessible for TalkBack
• Set android:contentDescription on icons if needed
• Ensure 48dp minimum touch target size

Visibility and Animation

• Use show and hide for visibility
• Use extend and shrink for text/icon toggle
• Integrates with CoordinatorLayout to avoid Snackbars

      
val extendedFab = findViewById<ExtendedFloatingActionButton>(R.id.extended_fab)
extendedFab.setOnClickListener { /* Respond to FAB click */ }
extendedFab.show() // Show FAB
extendedFab.hide() // Hide FAB
extendedFab.extend() // Show text and icon
extendedFab.shrink() // Show only icon
      
    

Expressive Update

• Added Small (56dp), Medium (80dp), Large (96dp) sizes
• Deprecated original Extended FAB and Surface Extended FAB
• Updated typography for larger text styles
• New tone colors: Primary, Secondary, Tertiary

Extended FAB Types

• Small: 56dp, compact for standard actions
• Medium: 80dp, balanced prominence
• Large: 96dp, high-emphasis actions

Small Extended FAB

• 56dp, for standard primary actions
• Text label with optional icon, elevated

Example

      
<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">
    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/extended_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:text="@string/extended_fab_label"
        app:icon="@drawable/ic_plus_24"
        style="?attr/extendedFloatingActionButtonSmallStyle"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
val extendedFab = findViewById<ExtendedFloatingActionButton>(R.id.extended_fab)
extendedFab.setOnClickListener { /* Respond to FAB click */ }
      
    

Small Extended FAB Anatomy

Component	Description	Behavior
Container	56dp height, colorPrimaryContainer, elevated	Triggers primary action, 6dp elevation
Text Label	LabelLarge, colorOnPrimaryContainer	Describes action, sentence case
Icon	Optional, 24dp, colorOnPrimaryContainer	Leading, enhances action context

Medium Extended FAB

• 80dp, balanced prominence for primary actions
• Text label with optional icon, elevated

Example

      
<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">
    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/extended_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:text="@string/extended_fab_label"
        app:icon="@drawable/ic_plus_24"
        style="?attr/extendedFloatingActionButtonMediumStyle"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
val extendedFab = findViewById<ExtendedFloatingActionButton>(R.id.extended_fab)
extendedFab.setOnClickListener { /* Respond to FAB click */ }
      
    

Medium Extended FAB Anatomy

Component	Description	Behavior
Container	80dp height, colorPrimaryContainer, elevated	Triggers primary action, 6dp elevation
Text Label	LabelLarge, colorOnPrimaryContainer	Describes action, sentence case
Icon	Optional, 24dp, colorOnPrimaryContainer	Leading, enhances action context

Large Extended FAB

• 96dp, high-emphasis actions for larger screens
• Text label with optional icon, elevated

Example

      
<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">
    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/extended_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:text="@string/extended_fab_label"
        app:icon="@drawable/ic_plus_24"
        style="?attr/extendedFloatingActionButtonLargeStyle"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
val extendedFab = findViewById<ExtendedFloatingActionButton>(R.id.extended_fab)
extendedFab.setOnClickListener { /* Respond to FAB click */ }
      
    

Large Extended FAB Anatomy

Component	Description	Behavior
Container	96dp height, colorPrimaryContainer, elevated	Triggers primary action, 6dp elevation
Text Label	LabelLarge, colorOnPrimaryContainer	Describes action, sentence case
Icon	Optional, 24dp, colorOnPrimaryContainer	Leading, enhances action context

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description
Text Label	android:text	setText, getText	null	Sets FAB text label
Text Label	android:textColor	setTextColor, getTextColor	?attr/colorOnPrimaryContainer	Sets text color
Text Label	android:textAppearance	setTextAppearance	?attr/textAppearanceLabelLarge	Sets text typography
Icon	app:icon	setIcon, setIconResource, getIcon	null	Sets FAB icon
Icon	app:iconTint	setIconTint, getIconTint	?attr/colorOnPrimaryContainer	Sets icon color
Icon	app:iconSize	setIconSize, getIconSize	24dp	Sets icon size
Icon	app:iconPadding	setIconPadding, getIconPadding	12dp	Sets icon padding
Container	app:backgroundTint	setBackgroundTintList, getBackgroundTintList	?attr/colorPrimaryContainer	Sets FAB background color
Container	app:strokeColor	setStrokeColor, getStrokeColor	null	Sets FAB stroke color
Container	app:strokeWidth	setStrokeWidth, getStrokeWidth	0dp	Sets FAB stroke width
Container	app:shapeAppearance, app:shapeAppearanceOverlay	setShapeAppearanceModel, getShapeAppearanceModel	ShapeAppearanceOverlay.Material3.FloatingActionButton	Sets FAB shape
Container	app:elevation	setElevation, getCompatElevation	6dp	Sets FAB elevation
Container	app:hoveredFocusedTranslationZ	setCompatHoveredFocusedTranslationZ, getCompatHoveredFocusedTranslationZ	2dp	Sets hover/focus elevation
Container	app:pressedTranslationZ	setCompatPressedTranslationZ, getCompatPressedTranslationZ	6dp	Sets pressed elevation
Container	app:rippleColor	setRippleColor, getRippleColor	?attr/colorOnPrimaryContainer	Sets ripple effect color

Theming Extended FABs

• Customize color, typography, and shape
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorPrimaryContainer">@color/purple_500</item>
    <item name="colorOnPrimaryContainer">@color/purple_700</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="extendedFloatingActionButtonStyle">@style/Widget.App.ExtendedFloatingActionButton</item>
</style>
<style name="Widget.App.ExtendedFloatingActionButton" parent="Widget.Material3.ExtendedFloatingActionButton.Icon.Primary">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.FloatingActionButton</item>
</style>
<style name="ThemeOverlay.App.FloatingActionButton" parent="">
    <item name="colorContainer">@color/purple_500</item>
    <item name="colorOnContainer">@color/purple_700</item>
</style>
      
    

      
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Widget.App.ExtendedFloatingActionButton"
    android:id="@+id/extended_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:text="@string/extended_fab_label"
    app:icon="@drawable/ic_plus_24"/>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Extended FABs
• Covers design, behavior, theming specifications
• Includes accessibility and size migration guidance
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Extended FABs?

• Rectangular, elevated buttons with text for primary actions

---

How many Extended FAB types are there?

• Three types: Small (56dp), Medium (80dp), Large (96dp)

---

When to use an Extended FAB?

• Use for actions needing clear labels, like "Create"

---

How to make Extended FABs accessible?

• Text labels are auto-accessible; add contentDescription for icons

---

Can I customize Extended FAB appearance?

• Yes, theme via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components for Android library

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for Extended FABs