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

Floating action button menus

A FAB menu opens from a FAB to show multiple related actions.

Design & API documentation

• Material 3 (M3) spec
• API reference

Using FAB menus

Use the FAB menu to show multiple related actions in a prominent, expressive style.

A FAB menu opens from a FAB to show multiple related actions. It should always appear in the same place as the FAB that opened it.

Anatomy

When expanded, a FAB menu has a close button and multiple list items.

1. Close button
2. List item

Usage (via Compose interop)

The FAB menu component is currently not available as a native Views component. This doc shows how to use the Compose FAB menu component via the Views <-> Compose interop.

Compose API and source code:

• FloatingActionButtonMenu
  • API documentation
  • Source code
  • Sample code

First, follow the Get started with Jetpack Compose guide to get your app set up with Compose, if it isn't already.

Next, in order to use the Compose FloatingActionButtonMenu component make sure to add a dependency on the Compose Material 3 library to your app.

Finally, add a ComposeView to your app by following the Using Compose in Views interop guide and use the Compose FloatingActionButtonMenu within your ComposeView, by referring to the API documentation and sample code.

For a working demo of using the Compose FAB menu in a Views app via interop, take a look at FabMenuDemoFragment.kt in the Material Android Views Catalog app. This demo also shows how to handle light, dark, and dynamic color schemes to ensure the Compose FloatingActionButtonMenu looks correct within the Views app.

Note: In order to have a consistent visual experience between the Compose FAB menu and your app, make sure to set up the MaterialTheme or MaterialExpressiveTheme in your ComposeView to match the theming of your Views app.