State of Compose 2023 results are in! Click here to learn more

← Back to Material 3 Compose

BottomAppBar

Component
in
Material 3
. Since 1.0.0

Overview

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

NameDescription
actionsthe icon content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.
modifierthe Modifier to be applied to this BottomAppBar
floatingActionButtonoptional floating action button at the end of this BottomAppBar
containerColorthe color used for the background of this BottomAppBar. Use Color.Transparent to have no color.
contentColorthe 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.
tonalElevationwhen 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.
contentPaddingthe padding applied to the content of this BottomAppBar
windowInsetsa 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

NameDescription
modifierthe Modifier to be applied to this BottomAppBar
containerColorthe color used for the background of this BottomAppBar. Use Color.Transparent to have no color.
contentColorthe 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.
tonalElevationwhen 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.
contentPaddingthe padding applied to the content of this BottomAppBar
windowInsetsa window insets that app bar will respect.
contentthe content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally