Material 3 Floating Action Buttons in Android XML (2025 Guide + UI Samples)

Ultimate Guide to Material 3 FABs in Android: Tutorial & Examples for 2025 🚀

Overview 📖

Floating Action Buttons (FABs) in Material 3 are circular, elevated buttons that represent the primary action of an Android screen, like adding new content. This guide explores FAB types (Regular, Small, Large, Extended), their implementation, and theming for 2025.

Design and API Documentation 🔗

• Google Material 3 FAB Spec
• API Reference

Using FABs 🤖

Add the Material Components for Android library dependency to use Material 3 FABs. See the Get Started guide. FABs in a CoordinatorLayout automatically avoid Snackbars and hide when covered by an AppBarLayout or BottomSheetBehavior.

Note: Use a Theme.Material3.* theme for FABs to auto-inflate as com.google.android.material.floatingactionbutton.FloatingActionButton.

Making FABs Accessible ♿

Set android:contentDescription for screen readers like TalkBack. Extended FAB text is auto-accessible, so extra labels are usually unnecessary. See the Android accessibility guide.

Visibility and Animation 🎬

Use show and hide for FAB visibility, and extend or shrink for Extended FAB text. Example:

      
fab.show() // Show FAB
fab.hide() // Hide FAB
extendedFab.extend() // Show text and icon
extendedFab.shrink() // Show only icon
      
      
    

FAB Types 🌟

Material 3 defines four FAB types: Regular (56dp), Small (40dp), Large (96dp), and Extended (with text). Each suits specific use cases based on prominence.

1. Regular FAB: Default for primary actions.
2. Small FAB: Compact for secondary actions or small screens.
3. Large FAB: High-emphasis actions on larger screens.
4. Extended FAB: Explicit actions with text and icon.

Regular FAB 🔘

Regular FABs are 56dp, ideal for primary actions like adding content.

Regular FAB Example 💻

API and source code:

• FloatingActionButton
  • Class description
  • Class source

The following example shows a regular FAB with a plus icon.

      
fab.setOnClickListener {
    // Respond to FAB click
}
      
      
    

Anatomy and Key Properties 📏

A regular FAB has a container and an icon.

• Container: 56dp, elevated with shadow.
• Icon: Centered, action-specific.

Small FAB 🔍

Small FABs are 40dp, used for secondary actions or smaller screens.

Small FAB Example 💻

The following example shows a small FAB with a plus icon.

      
fab.setOnClickListener {
    // Respond to FAB click
}
      
      
    

Anatomy and Key Properties 📏

A small FAB has a container and an icon.

• Container: 40dp, elevated with shadow.
• Icon: Centered, smaller scale.

Large FAB 📣

Large FABs are 96dp, designed for high-emphasis actions on larger screens.

Large FAB Example 💻

The following example shows a large FAB with a plus icon.

      
fab.setOnClickListener {
    // Respond to FAB click
}
      
      
    

Anatomy and Key Properties 📏

A large FAB has a container and an icon.

• Container: 96dp, elevated with shadow.
• Icon: Centered, larger scale.

Attributes (Regular, Small, Large FABs) 📋

Element	Attribute	Related method(s)	Default value
Icon	app:srcCompat	setImageDrawable, setImageResource, getDrawable	null
	app:tint	setImageTintList, getImageTintList	?attr/colorOnPrimaryContainer (states)

Element	Attribute	Related method(s)	Default value
Container	app:backgroundTint	setBackgroundTintList, getBackgroundTintList	?attr/colorPrimaryContainer (states)
	app:borderWidth	N/A	0dp
	app:fabSize, app:fabCustomSize	setSize, setCustomSize, clearCustomSize, getSize, getCustomSize	auto
	app:shapeAppearance, app:shapeAppearanceOverlay	setShapeAppearanceModel, getShapeAppearanceModel	ShapeAppearanceOverlay.Material3.FloatingActionButton
	app:elevation	setElevation, getCompatElevation	6dp
	app:hoveredFocusedTranslationZ	setCompatHoveredFocusedTranslationZ, getCompatHoveredFocusedTranslationZ	2dp
	app:pressedTranslationZ	setCompatPressedTranslationZ, getCompatPressedTranslationZ	6dp
	app:rippleColor	setRippleColor, getRippleColor	?attr/colorOnPrimaryContainer variations (states)

Styles 🎨

• Default style: Widget.Material3.FloatingActionButton.Primary
• Small style: Widget.Material3.FloatingActionButton.Small
• Large style: Widget.Material3.FloatingActionButton.Large
• Default style theme attribute: ?attr/floatingActionButtonStyle

See the full list of styles and attrs.

Extended FAB 📜

Extended FABs include a text label and optional icon for explicit actions.

Extended FAB Example 💻

API and source code:

• ExtendedFloatingActionButton
  • Class description
  • Class source

The following example shows an extended FAB with a plus icon.

      
extendedFab.setOnClickListener {
    // Respond to Extended FAB click
}
      
      
    

Anatomy and Key Properties 📏

An extended FAB has a container, text label, and optional icon.

• Container: Rounded rectangle, elevated.
• Text Label: Descriptive, sentence case.
• Icon: Optional, leading.

Attributes 📋

Element	Attribute	Related method(s)	Default value
Text Label	android:text	setText, getText	null
	android:textColor	setTextColor, getTextColor	?attr/colorPrimaryContainer (states)
	android:textAppearance	setTextAppearance	?attr/textAppearanceLabelLarge

Element	Attribute	Related method(s)	Default value
Icon	app:icon	setIcon, setIconResource, getIcon	null
	app:iconTint	setIconTint, setIconTintResource, getIconTint	?attr/colorOnPrimaryContainer (states)
	app:iconSize	setIconSize, getIconSize	24dp
	app:iconPadding	setIconPadding, getIconPadding	12dp

Element	Attribute	Related method(s)	Default value
Container	app:backgroundTint	setBackgroundTintList, getBackgroundTintList	?attr/colorPrimaryContainer (states)
	app:strokeColor	setStrokeColor, getStrokeColor	null
	app:strokeWidth	setStrokeWidth, getStrokeWidth	0dp
	app:shapeAppearance, app:shapeAppearanceOverlay	setShapeAppearanceModel, getShapeAppearanceModel	ShapeAppearanceOverlay.Material3.FloatingActionButton
	app:elevation	setElevation, getElevation	6dp
	app:hoveredFocusedTranslationZ	N/A	2dp
	app:pressedTranslationZ	N/A	6dp
	app:rippleColor	setRippleColor	?attr/colorOnPrimaryContainer variations (states)

Styles 🎨

• Default style: Widget.Material3.ExtendedFloatingActionButton.Icon.Primary
• Text-only style: Widget.Material3.ExtendedFloatingActionButton.Primary
• Default style theme attribute: ?attr/extendedFloatingActionButtonStyle

Theming FABs 🖌️

Material Theming allows customization of FAB color, typography, and shape.

FAB Theming Example 💻

Theming example for regular, small, and extended FABs:

Specific styles for FABs without affecting other components:

FAQ ❓

What are Material 3 FABs? 🤔

Material 3 FABs are circular, elevated buttons for primary actions on Android screens, like adding content. ✅

---

How many FAB types are there? 🔢

Four types: Regular (56dp), Small (40dp), Large (96dp), and Extended (text + icon). 📏

---

When should I use an Extended FAB? 🖋️

Use Extended FABs for actions needing clear labels, like "Create," for better clarity. ✨

---

How do I make FABs accessible? ♿

Add android:contentDescription for screen readers; Extended FAB text is auto-accessible. 🗣️

---

Can I customize FAB appearance? 🎨

Yes, customize color, shape, and typography using Material Theming in res/values/styles.xml. 🖌️

---

What’s the difference between Regular and Large FABs? ⚖️

Regular FABs (56dp) are for standard actions; Large FABs (96dp) emphasize actions on bigger screens. 📱

---

How do I add the Material 3 library? 📦

Include the Material Components for Android library. Check the Get Started guide. 🛠️

---

Are there updates for FABs in 2025? 🗓️

This guide reflects 2025 Material 3 standards, covering styles and theming. 🚀