← Back to Compose Multiplatform
BottomAppBar
Component
in
Compose Multiplatform
. Since 1.3.0-beta01
Overview
Examples
Community Notes
<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 |
BottomAppBar
@Composable
fun BottomAppBar(
windowInsets: WindowInsets,
modifier: Modifier = Modifier,
backgroundColor: Color = MaterialTheme.colors.primarySurface,
contentColor: Color = contentColorFor(backgroundColor),
cutoutShape: Shape? = null,
elevation: Dp = AppBarDefaults.BottomAppBarElevation,
contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit
)
Parameters
| Name | Description |
|---|---|
windowInsets | a window insets that app bar will respect. |
modifier | The Modifier to be applied to this BottomAppBar |
backgroundColor | The background color for the BottomAppBar. Use Color.Transparent to have no color. |
contentColor | The preferred content color provided by this BottomAppBar to its children. Defaults to either the matching content color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this BottomAppBar. |
cutoutShape | the shape of the cutout that will be added to the BottomAppBar - this should typically be the same shape used inside the FloatingActionButton, when BottomAppBar and FloatingActionButton are being used together in Scaffold. This shape will be drawn with an offset around all sides. If null, where will be no cutout. |
elevation | the elevation of this BottomAppBar. |
contentPadding | the padding applied to the content of this BottomAppBar |
content | the content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally |
BottomAppBar
@Composable
fun BottomAppBar(
modifier: Modifier = Modifier,
backgroundColor: Color = MaterialTheme.colors.primarySurface,
contentColor: Color = contentColorFor(backgroundColor),
cutoutShape: Shape? = null,
elevation: Dp = AppBarDefaults.BottomAppBarElevation,
contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit
)
Parameters
| Name | Description |
|---|---|
modifier | The Modifier to be applied to this BottomAppBar |
backgroundColor | The background color for the BottomAppBar. Use Color.Transparent to have no color. |
contentColor | The preferred content color provided by this BottomAppBar to its children. Defaults to either the matching content color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this BottomAppBar. |
cutoutShape | the shape of the cutout that will be added to the BottomAppBar - this should typically be the same shape used inside the FloatingActionButton, when BottomAppBar and FloatingActionButton are being used together in Scaffold. This shape will be drawn with an offset around all sides. If null, where will be no cutout. |
elevation | the elevation of this BottomAppBar. |
contentPadding | the padding applied to the content of this BottomAppBar |
content | the content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally |
Previous Component← BadgedBox
Next ComponentBottomDrawer →
