🌈 Create new beautiful Compose Gradients with our new wesite ->

HorizontalFloatingToolbar

PREVIEW IS NOT AVAILABLE YET

Kotlin
@OptIn(ExperimentalMaterial3Api::class)


@Composable
fun HorizontalFloatingToolbarWithFabSample() {
    var expanded by rememberSaveable { mutableStateOf(true) }
    val vibrantColors = FloatingToolbarDefaults.vibrantFloatingToolbarColors()
    Scaffold { innerPadding ->
        Box(Modifier.padding(innerPadding)) {
            // The toolbar should receive focus before the screen content for a11y, so place it
            // first. Make sure to set its zIndex so it's above the screen content visually.
            HorizontalFloatingToolbar(
                expanded = expanded,
                floatingActionButton = {
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = {
                            PlainTooltip(
                                modifier =
                                    Modifier.semantics {
                                        // TODO(b/496338253): Remove this modifier once bug where
                                        //  tooltip text is not announced by a11y screen readers is
                                        //  resolved.
                                        liveRegion = LiveRegionMode.Assertive
                                        paneTitle = "Localized description"
                                    }
                            ) {
                                Text("Localized description")
                            }
                        },
                        state = rememberTooltipState(),
                    ) {
                        // Match the FAB to the vibrantColors. See also
                        // StandardFloatingActionButton.
                        FloatingToolbarDefaults.VibrantFloatingActionButton(
                            onClick = { expanded = !expanded }
                        ) {
                            Icon(Icons.Filled.Add, "Localized description")
                        }
                    }
                },
                modifier =
                    Modifier.align(Alignment.BottomEnd)
                        .offset(x = -ScreenOffset, y = -ScreenOffset)
                        .zIndex(1f),
                colors = vibrantColors,
                content = {
                    // Make sure the buttons are not focusable if they are not visible, so that
                    // keyboard focus doesn't go to an invisible element on the screen.
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = {
                            PlainTooltip(
                                modifier =
                                    Modifier.semantics {
                                        // TODO(b/496338253): Remove this modifier once bug where
                                        //  tooltip text is not announced by a11y screen readers is
                                        //  resolved.
                                        liveRegion = LiveRegionMode.Assertive
                                        paneTitle = "Localized description"
                                    }
                            ) {
                                Text("Localized description")
                            }
                        },
                        state = rememberTooltipState(),
                    ) {
                        IconButton(
                            onClick = { /* doSomething() */ },
                            Modifier.focusProperties { canFocus = expanded },
                        ) {
                            Icon(Icons.Filled.Person, contentDescription = "Localized description")
                        }
                    }
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = {
                            PlainTooltip(
                                modifier =
                                    Modifier.semantics {
                                        // TODO(b/496338253): Remove this modifier once bug where
                                        //  tooltip text is not announced by a11y screen readers is
                                        //  resolved.
                                        liveRegion = LiveRegionMode.Assertive
                                        paneTitle = "Localized description"
                                    }
                            ) {
                                Text("Localized description")
                            }
                        },
                        state = rememberTooltipState(),
                    ) {
                        IconButton(
                            onClick = { /* doSomething() */ },
                            Modifier.focusProperties { canFocus = expanded },
                        ) {
                            Icon(Icons.Filled.Edit, contentDescription = "Localized description")
                        }
                    }
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = {
                            PlainTooltip(
                                modifier =
                                    Modifier.semantics {
                                        // TODO(b/496338253): Remove this modifier once bug where
                                        //  tooltip text is not announced by a11y screen readers is
                                        //  resolved.
                                        liveRegion = LiveRegionMode.Assertive
                                        paneTitle = "Localized description"
                                    }
                            ) {
                                Text("Localized description")
                            }
                        },
                        state = rememberTooltipState(),
                    ) {
                        IconButton(
                            onClick = { /* doSomething() */ },
                            Modifier.focusProperties { canFocus = expanded },
                        ) {
                            Icon(
                                Icons.Filled.Favorite,
                                contentDescription = "Localized description",
                            )
                        }
                    }
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = {
                            PlainTooltip(
                                modifier =
                                    Modifier.semantics {
                                        // TODO(b/496338253): Remove this modifier once bug where
                                        //  tooltip text is not announced by a11y screen readers is
                                        //  resolved.
                                        liveRegion = LiveRegionMode.Assertive
                                        paneTitle = "Localized description"
                                    }
                            ) {
                                Text("Localized description")
                            }
                        },
                        state = rememberTooltipState(),
                    ) {
                        IconButton(
                            onClick = { /* doSomething() */ },
                            Modifier.focusProperties { canFocus = expanded },
                        ) {
                            Icon(
                                Icons.Filled.MoreVert,
                                contentDescription = "Localized description",
                            )
                        }
                    }
                },
            )
            Column(
                Modifier.fillMaxWidth()
                    .padding(horizontal = 16.dp)
                    // Apply a floatingToolbarVerticalNestedScroll Modifier to the Column to toggle
                    // the expanded state of the HorizontalFloatingToolbar.
                    .floatingToolbarVerticalNestedScroll(
                        expanded = expanded,
                        onExpand = { expanded = true },
                        onCollapse = { expanded = false },
                    )
                    .verticalScroll(rememberScrollState())
            ) {
                Text(text = remember { LoremIpsum().values.first() })
            }
        }
    }
}