FloatingActionButtonMenuScope


Scope for the children of FloatingActionButtonMenu

Summary

Extension functions

Unit
@ExperimentalMaterial3ExpressiveApi
@Composable
FloatingActionButtonMenuScope.FloatingActionButtonMenuItem(
    onClick: () -> Unit,
    text: @Composable () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier,
    containerColor: Color,
    contentColor: Color
)

FAB Menu Items should be used within a FloatingActionButtonMenu to provide additional choices to the user after clicking a FAB.

Cmn

Public properties

horizontalAlignment

val horizontalAlignmentAlignment.Horizontal

Extension functions

FloatingActionButtonMenuItem

@ExperimentalMaterial3ExpressiveApi
@Composable
fun FloatingActionButtonMenuScope.FloatingActionButtonMenuItem(
    onClick: () -> Unit,
    text: @Composable () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    containerColor: Color = MaterialTheme.colorScheme.primaryContainer,
    contentColor: Color = contentColorFor(containerColor)
): Unit

FAB Menu Items should be used within a FloatingActionButtonMenu to provide additional choices to the user after clicking a FAB.

import androidx.activity.compose.BackHandler import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.Label import androidx.compose.material.icons.automirrored.filled.Message import androidx.compose.material.icons.filled.Add import androidx.compose.material.icons.filled.Archive import androidx.compose.material.icons.filled.Close import androidx.compose.material.icons.filled.Contacts import androidx.compose.material.icons.filled.People import androidx.compose.material.icons.filled.Snooze import androidx.compose.material3.FloatingActionButtonMenu import androidx.compose.material3.FloatingActionButtonMenuItem import androidx.compose.material3.Icon import androidx.compose.material3.PlainTooltip import androidx.compose.material3.Text import androidx.compose.material3.ToggleFloatingActionButton import androidx.compose.material3.ToggleFloatingActionButtonDefaults.animateIcon import androidx.compose.material3.TooltipAnchorPosition import androidx.compose.material3.TooltipBox import androidx.compose.material3.TooltipDefaults import androidx.compose.material3.animateFloatingActionButton import androidx.compose.material3.rememberTooltipState import androidx.compose.runtime.derivedStateOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester import androidx.compose.ui.graphics.vector.rememberVectorPainter import androidx.compose.ui.input.key.Key import androidx.compose.ui.input.key.KeyEventType import androidx.compose.ui.input.key.isShiftPressed import androidx.compose.ui.input.key.key import androidx.compose.ui.input.key.onKeyEvent import androidx.compose.ui.input.key.type import androidx.compose.ui.semantics.CustomAccessibilityAction import androidx.compose.ui.semantics.contentDescription import androidx.compose.ui.semantics.customActions import androidx.compose.ui.semantics.isTraversalGroup import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.stateDescription import androidx.compose.ui.semantics.traversalIndex import androidx.compose.ui.unit.dp val listState = rememberLazyListState() val fabVisible by remember {  derivedStateOf {  listState.firstVisibleItemIndex == 0 || listState.canScrollForward == false  } } val focusRequester = FocusRequester() Box {  LazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {  for (index in 0 until 100) {  item {  Text(  text = "List item - $index",  modifier = Modifier.clickable {}.fillMaxWidth().padding(24.dp),  )  }  }  }  val items =  listOf(  Icons.AutoMirrored.Filled.Message to "Reply",  Icons.Filled.People to "Reply all",  Icons.Filled.Contacts to "Forward",  Icons.Filled.Snooze to "Snooze",  Icons.Filled.Archive to "Archive",  Icons.AutoMirrored.Filled.Label to "Label",  )  var fabMenuExpanded by rememberSaveable { mutableStateOf(false) }  BackHandler(fabMenuExpanded) { fabMenuExpanded = false }  FloatingActionButtonMenu(  modifier = Modifier.align(Alignment.BottomEnd),  expanded = fabMenuExpanded,  button = {  // A FAB should have a tooltip associated with it.  TooltipBox(  positionProvider =  TooltipDefaults.rememberTooltipPositionProvider(  if (fabMenuExpanded) {  TooltipAnchorPosition.Start  } else {  TooltipAnchorPosition.Above  }  ),  tooltip = { PlainTooltip { Text("Toggle menu") } },  state = rememberTooltipState(),  ) {  ToggleFloatingActionButton(  modifier =  Modifier.semantics {  traversalIndex = -1f  stateDescription =  if (fabMenuExpanded) "Expanded" else "Collapsed"  contentDescription = "Toggle menu"  }  .animateFloatingActionButton(  visible = fabVisible || fabMenuExpanded,  alignment = Alignment.BottomEnd,  )  .focusRequester(focusRequester),  checked = fabMenuExpanded,  onCheckedChange = { fabMenuExpanded = !fabMenuExpanded },  ) {  val imageVector by remember {  derivedStateOf {  if (checkedProgress > 0.5f) Icons.Filled.Close else Icons.Filled.Add  }  }  Icon(  painter = rememberVectorPainter(imageVector),  contentDescription = null,  modifier = Modifier.animateIcon({ checkedProgress }),  )  }  }  },  ) {  items.forEachIndexed { i, item ->  FloatingActionButtonMenuItem(  modifier =  Modifier.semantics {  isTraversalGroup = true  // Add a custom a11y action to allow closing the menu when focusing  // the last menu item, since the close button comes before the first  // menu item in the traversal order.  if (i == items.size - 1) {  customActions =  listOf(  CustomAccessibilityAction(  label = "Close menu",  action = {  fabMenuExpanded = false  true  },  )  )  }  }  .then(  if (i == 0) {  Modifier.onKeyEvent {  // Navigating back from the first item should go back to the  // FAB menu button.  if (  it.type == KeyEventType.KeyDown &&  (it.key == Key.DirectionUp ||  (it.isShiftPressed && it.key == Key.Tab))  ) {  focusRequester.requestFocus()  return@onKeyEvent true  }  return@onKeyEvent false  }  } else {  Modifier  }  ),  onClick = { fabMenuExpanded = false },  icon = { Icon(item.first, contentDescription = null) },  text = { Text(text = item.second) },  )  }  } }
Parameters
onClick: () -> Unit

called when this FAB Menu Item is clicked

text: @Composable () -> Unit

label displayed inside this FAB Menu Item

icon: @Composable () -> Unit

optional icon for this FAB Menu Item, typically an Icon

modifier: Modifier = Modifier

the Modifier to be applied to this FAB Menu Item

containerColor: Color = MaterialTheme.colorScheme.primaryContainer

the color used for the background of this FAB Menu Item

contentColor: Color = contentColorFor(containerColor)

the preferred color for content inside this FAB Menu Item. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.