Ultimate Guide to Material 3 FAB Menus in Android XML (2025 Tutorial + Examples)

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

Overview 📖

Material 3 Floating Action Button (FAB) Menus expand from a FAB to display multiple related actions in a prominent, expressive style. Available as a Jetpack Compose component, they can be integrated into Views-based apps via interop. This guide covers their implementation, accessibility, and theming for 2025. 🌟

Design and API Documentation 🔗

• Google Material 3 FAB Menu Spec
• API Reference

Using FAB Menus 🤖

Add the Material Components for Android and Compose Material 3 library dependencies to use FAB Menus. Follow the Jetpack Compose setup guide and Views-Compose interop guide. Use FloatingActionButtonMenu within a ComposeView to integrate into Views-based apps. Use a Theme.Material3.* theme for consistent styling. 🛠️

Making FAB Menus Accessible ♿

Set contentDescription on FAB menu items and the close button for screen readers like TalkBack. Ensure items are focusable for accessibility navigation. Use descriptive labels for actions. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

Control FAB menu expansion with a state variable and handle item clicks with lambdas. Align items using horizontalAlignment. Example:

      
var expanded by remember { mutableStateOf(false) }
FloatingActionButtonMenu(
    expanded = expanded,
    onExpandedChange = { expanded = !expanded },
    horizontalAlignment = Alignment.End
) {
    FloatingActionButtonMenuItem(
        icon = { Icon(Icons.Default.Edit, contentDescription = "Edit") },
        onClick = { /* Handle edit */ }
    )
    FloatingActionButtonMenuItem(
        icon = { Icon(Icons.Default.Share, contentDescription = "Share") },
        onClick = { /* Handle share */ }
    )
}
      
      
    

FAB Menu Anatomy 🌟

Material 3 FAB Menus consist of a close button and list items, expanding from a FAB to reveal related actions. 📋

• Close Button: Collapses the menu. 🔙
• List Items: Action buttons with icons. 🖱️

FAB Menu Example 🔲

FAB Menus provide a prominent way to display multiple related actions, integrated into Views apps via Compose interop. 🌟

FAB Menu Example 💻

API and source code:

• FloatingActionButtonMenu
  • API documentation
  • Source code

The following example shows a FAB menu integrated into a Views app using Compose interop.

      
// In Fragment
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val composeView = view.findViewById(R.id.compose_view)
    composeView.setContent {
        MaterialTheme {
            var expanded by remember { mutableStateOf(false) }
            FloatingActionButtonMenu(
                expanded = expanded,
                onExpandedChange = { expanded = !expanded },
                horizontalAlignment = Alignment.End
            ) {
                FloatingActionButtonMenuItem(
                    icon = { Icon(Icons.Default.Edit, contentDescription = "Edit") },
                    onClick = { /* Handle edit */ }
                )
                FloatingActionButtonMenuItem(
                    icon = { Icon(Icons.Default.Share, contentDescription = "Share") },
                    onClick = { /* Handle share */ }
                )
            }
        }
    }
}
      
      
    

Anatomy and Key Properties 📏

A FAB menu expands from a FAB with a close button and action items. 🌟

• Close Button: Toggles menu collapse. 🔙
• List Items: Action buttons, typically with icons. 🖱️

Attributes 📋

Element	Attribute	Related method(s)	Default value
Menu	expanded	onExpandedChange	false
Alignment	horizontalAlignment	N/A	Alignment.End
Items	icon	onClick	N/A

Styles 🎨

• Default style: Defined by MaterialTheme in Compose
• Theme overlay: ThemeOverlay.Material3.MaterialAlertDialog for Views integration

See the source code for Compose styling details. 🔗

Theming FAB Menus 🖌️

Material Theming customizes FAB menu colors and typography via Compose’s MaterialTheme. 🎨

Theming Example 💻

Theming example for FAB menus in a Views app:

      
composeView.setContent {
    MaterialTheme(
        colors = lightColorScheme(
            primary = Color(0xFF6200EE),
            onPrimary = Color.White,
            surface = Color(0xFFF5F5F5)
        )
    ) {
        var expanded by remember { mutableStateOf(false) }
        FloatingActionButtonMenu(
            expanded = expanded,
            onExpandedChange = { expanded = !expanded }
        ) {
            FloatingActionButtonMenuItem(
                icon = { Icon(Icons.Default.Edit, contentDescription = "Edit") },
                onClick = { /* Handle edit */ }
            )
        }
    }
}
      
      
    

FAQ ❓

What is a Material 3 FAB Menu? 🤔

A menu expanding from a FAB to show related actions. ✅

---

Is it available for Views? 🔢

No native Views component; use Compose interop with ComposeView. 🌟

---

When to use a FAB Menu? 🖋️

Use for multiple related actions needing prominent display. 🖱️

---

How to make it accessible? ♿

Set contentDescription on items and close button; ensure focusable. 🗣️

---

Can I customize appearance? 🎨

Yes, theme via Compose’s MaterialTheme for colors and typography. 🖌️

---

How to add dependencies? 📦

Include Material Components and Compose Material 3 libraries. See the Compose guide. 🛠️

---

Are there updates for 2025? 🗓️

This guide reflects 2025 Material 3 standards for FAB menus. 🚀