Compose Multiplatform Material3/androidx.compose.material3/FlexibleBottomAppBar

FlexibleBottomAppBar

@Composable
fun FlexibleBottomAppBar(modifier: Modifier = Modifier, containerColor: Color = BottomAppBarDefaults.containerColor, contentColor: Color = contentColorFor(containerColor), contentPadding: PaddingValues = BottomAppBarDefaults.FlexibleContentPadding, horizontalArrangement: Arrangement.Horizontal = BottomAppBarDefaults.FlexibleHorizontalArrangement, expandedHeight: Dp = BottomAppBarDefaults.FlexibleBottomAppBarHeight, windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets, scrollBehavior: BottomAppBarScrollBehavior? = null, content: @Composable RowScope.() -> Unit)

Material Design flexible bottom app bar

A flexible bottom app bar displays navigation and key actions at the bottom of small screens.

This variation of the Bottom app bar has a horizontalArrangement parameter for controlling the way the content is arranged. Also, it allows more flexibility in controlling the bar's expanded height with an expandedHeight value.

If you are interested in displaying a FloatingActionButton, consider using another overload that takes a FloatingActionButton parameter.

Also see NavigationBar.

A bottom app bar that specifies an horizontalArrangement and uses a scrollBehavior to customize its nested scrolling behavior when working in conjunction with a scrolling content looks like:

Parameters

modifier

the Modifier to be applied to this BottomAppBar

containerColor

the color used for the background of this BottomAppBar. Use Color.Transparent to have no color.

contentColor

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

contentPadding

the padding applied to the content of this BottomAppBar

horizontalArrangement

the horizontal arrangement of the content inside this BottomAppBar

expandedHeight

the maximum height this bottom bar can reach when fully expanded. If a scrollBehavior is provided, the bar might collapse or expand based on scrolling. In that case, this value sets the upper limit for the bar's height during expansion. This Dp value must be specified, finite, and greater than zero; otherwise, BottomAppBarDefaults.FlexibleBottomAppBarHeight will be used as a default. In case the scrollBehavior is null, this value will simply be the fixed height of the bottom bar.

windowInsets

a window insets that app bar will respect.

scrollBehavior

a BottomAppBarScrollBehavior which holds various offset values that will be applied by this bottom app bar to set up its height. A scroll behavior is designed to work in conjunction with a scrolled content to change the bottom app bar appearance as the content scrolls. Note that the bottom app bar will not react to scrolling in case a touch exploration service (e.g., TalkBack) is active. See BottomAppBarScrollBehavior.nestedScrollConnection.

content

the content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.

Samples

androidx.compose.material3.samples.BottomAppBarWithOverflowandroidx.compose.material3.samples.ExitAlwaysBottomAppBarSpacedAroundandroidx.compose.material3.samples.ExitAlwaysBottomAppBarSpacedBetweenandroidx.compose.material3.samples.ExitAlwaysBottomAppBarSpacedEvenlyandroidx.compose.material3.samples.ExitAlwaysBottomAppBarFixedandroidx.compose.material3.samples.ExitAlwaysBottomAppBarFixedVibrant