Extended FABs help people take primary actions.
@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun AnimatedExtendedFloatingActionButtonSample() {
val listState = rememberLazyListState()
// The FAB is initially expanded. Once the first visible item is past the first item we
// collapse the FAB. We use a remembered derived state to minimize unnecessary compositions.
val expandedFab by remember { derivedStateOf { listState.firstVisibleItemIndex == 0 } }
Scaffold(
floatingActionButton = {
// A collapsed FAB should have a tooltip associated with it.
TooltipBox(
positionProvider =
TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
tooltip = {
if (!expandedFab) {
PlainTooltip { Text("Localized description") }
}
},
state = rememberTooltipState(),
) {
ExtendedFloatingActionButton(
onClick = { /* do something */ },
expanded = expandedFab,
icon = { Icon(Icons.Filled.Add, "Localized Description") },
text = { Text(text = "Extended FAB") },
)
}
},
floatingActionButtonPosition = FabPosition.End,
) {
LazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {
for (index in 0 until 100) {
item { Text(text = "List item - $index", modifier = Modifier.padding(24.dp)) }
}
}
}
}
@Preview
@Composable
fun ExtendedFloatingActionButtonSample() {
ExtendedFloatingActionButton(
onClick = { /* do something */ },
icon = { Icon(Icons.Filled.Add, "Localized description") },
text = { Text(text = "Extended FAB") },
)
}
ExtendedFloatingActionButtonTextSample
@Preview
@Composable
fun ExtendedFloatingActionButtonTextSample() {
ExtendedFloatingActionButton(onClick = { /* do something */ }) { Text(text = "Extended FAB") }
}