← Back to Material 3 Compose
BottomAppBar
Component
in
Material 3
. Since 1.0.0Overview
Code Examples
<a href="https://m3.material.io/components/bottom-app-bar/overview" class="external" target="_blank">Material Design bottom app bar</a>.
A bottom app bar displays navigation and key actions at the bottom of mobile screens.
!Bottom app bar image(https://developer.android.com/images/reference/androidx/compose/material3/bottom-app-bar.png)
Overloads
BottomAppBar
@Composable
fun BottomAppBar(
actions: @Composable RowScope.() -> Unit,
modifier: Modifier = Modifier,
floatingActionButton: @Composable (() -> Unit)? = null,
containerColor: Color = BottomAppBarDefaults.containerColor,
contentColor: Color = contentColorFor(containerColor),
tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
)
Parameters
Name | Description |
---|---|
actions | the icon content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally. |
modifier | the Modifier to be applied to this BottomAppBar |
floatingActionButton | optional floating action button at the end of 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. |
tonalElevation | when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface. |
contentPadding | the padding applied to the content of this BottomAppBar |
windowInsets | a window insets that app bar will respect |
BottomAppBar
@Composable
fun BottomAppBar(
modifier: Modifier = Modifier,
containerColor: Color = BottomAppBarDefaults.containerColor,
contentColor: Color = contentColorFor(containerColor),
tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
content: @Composable RowScope.() -> Unit
)
Parameters
Name | Description |
---|---|
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. |
tonalElevation | when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface. |
contentPadding | the padding applied to the content of this BottomAppBar |
windowInsets | a window insets that app bar will respect. |
content | the content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally |