Material 3 Floating Action Buttons

Overview

Floating Action Buttons (FABs) are circular, elevated buttons representing the primary action of a screen.

Material 3 FABs, using com.google.android.material.floatingactionbutton.FloatingActionButton, support three variants: Regular (56dp), Medium (80dp), and Large (96dp). The Small FAB (40dp) and Surface FAB are deprecated. FABs appear in front of screen content and 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 FloatingActionButton in CoordinatorLayout
• Apply Theme.Material3.* for styling
• Enable Material3Expressive themes for expressive styles

Accessibility

• Set android:contentDescription on FABs for TalkBack
• Ensure sufficient touch target size (48dp minimum)

Visibility and Animation

• Use show and hide for visibility
• Integrates with CoordinatorLayout to avoid Snackbars
• Auto-hides when covered by AppBarLayout or BottomSheetBehavior

      
val fab = findViewById<FloatingActionButton>(R.id.floating_action_button)
fab.setOnClickListener { /* Respond to FAB click */ }
fab.show() // Show FAB
fab.hide() // Hide FAB
      
    

Expressive Update

• Added Medium FAB (80dp)
• Deprecated Small FAB (40dp) and Surface FAB
• New tone colors: Primary, Secondary, Tertiary
• Renamed styles: Primary to Primary Container, etc.

FAB Types

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

Regular FAB

• 56dp, ideal for primary actions like adding content
• Centered icon, elevated with shadow

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.FloatingActionButton
        android:id="@+id/floating_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:contentDescription="@string/fab_content_desc"
        app:srcCompat="@drawable/ic_plus_24"
        style="@style/Widget.Material3.FloatingActionButton.Primary"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
val fab = findViewById<FloatingActionButton>(R.id.floating_action_button)
fab.setOnClickListener { /* Respond to FAB click */ }
      
    

Regular FAB Anatomy

Component	Description	Behavior
Container	56dp, colorPrimaryContainer, elevated	Triggers primary action, 6dp elevation
Icon	24dp, colorOnPrimaryContainer	Centered, indicates action

Medium FAB

• 80dp, balanced prominence for primary actions
• Centered icon, elevated with shadow

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.FloatingActionButton
        android:id="@+id/floating_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:contentDescription="@string/fab_content_desc"
        app:srcCompat="@drawable/ic_plus_24"
        style="?attr/floatingActionButtonMediumStyle"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
val fab = findViewById<FloatingActionButton>(R.id.floating_action_button)
fab.setOnClickListener { /* Respond to FAB click */ }
      
    

Medium FAB Anatomy

Component	Description	Behavior
Container	80dp, colorPrimaryContainer, elevated	Triggers primary action, 6dp elevation
Icon	24dp, colorOnPrimaryContainer	Centered, indicates action

Large FAB

• 96dp, high-emphasis actions for larger screens
• Centered icon, elevated with shadow

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.FloatingActionButton
        android:id="@+id/floating_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:contentDescription="@string/fab_content_desc"
        app:srcCompat="@drawable/ic_plus_24"
        style="?attr/floatingActionButtonLargeStyle"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
val fab = findViewById<FloatingActionButton>(R.id.floating_action_button)
fab.setOnClickListener { /* Respond to FAB click */ }
      
    

Large FAB Anatomy

Component	Description	Behavior
Container	96dp, colorPrimaryContainer, elevated	Triggers primary action, 6dp elevation
Icon	24dp, colorOnPrimaryContainer	Centered, indicates action

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description
Icon	app:srcCompat	setImageDrawable, setImageResource, getDrawable	null	Sets FAB icon
Icon	app:tint	setImageTintList, getImageTintList	?attr/colorOnPrimaryContainer	Sets icon color
Container	app:backgroundTint	setBackgroundTintList, getBackgroundTintList	?attr/colorPrimaryContainer	Sets FAB background color
Container	app:fabCustomSize	setCustomSize, getCustomSize	auto	Sets custom FAB size
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 FABs

• Customize color, shape, and typography
• 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="floatingActionButtonStyle">@style/Widget.App.FloatingActionButton</item>
</style>
<style name="Widget.App.FloatingActionButton" parent="Widget.Material3.FloatingActionButton.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.FloatingActionButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Widget.App.FloatingActionButton"
    android:id="@+id/floating_action_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:contentDescription="@string/fab_content_desc"
    app:srcCompat="@drawable/ic_plus_24"/>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for 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 FABs?

• Circular, elevated buttons for primary screen actions

---

How many FAB types are there?

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

---

When to use a Large FAB?

• Use for high-emphasis actions on larger screens

---

How to make FABs accessible?

• Set contentDescription for screen readers

---

Can I customize 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 FABs