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

Floating action button (FAB) menu

A floating action button (FAB) menu opens from a FAB to show 2–6 related actions floating on screen. There is one FAB menu size for all sizes of FABs.

Fab menu is not used with extended FABs and it is available in primary, secondary, and tertiary color sets.

Use the FAB menu to show multiple related actions in a prominent, expressive style. It should always appear in the same place as the FAB that opened it.

Design & API documentation

• Material 3 (M3) spec
• API reference

Anatomy

1. Close button
2. Menu item

More details on anatomy items in the component guidelines.

M3 Expressive update

The FAB menu adds more options to the FAB. It should replace the speed dial and any usage of stacked small FABs. More on M3 Expressive

The FAB menu uses contrasting color and large items to focus attention. It can open from any size FAB.

New component added to catalog:

• One menu size that pairs with any FAB
• Replaces any usage of stacked small FABs

Color:

• Contrasting close button and item colors
• Supports dynamic color
• Compatible with any FAB color style

Code implementation (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.