Bottom App Bar

Display an app bar at the bottom of the screen. Used as a container for parent-related content, such as screen titles, menu items or a floating action button

View in Playground

Constructors

@Composable
fun BottomAppBar(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    fabConfiguration: FabConfiguration? = null,
    cutoutShape: Shape? = null,
    content: @Composable RowScope.() -> Unit
)
  • modifier – modifier to be applied

  • content – the content to be displayed inside of the bottom app bar
    • required
  • backgroundColor – the background color to be applied

  • contentColor – the color to be applied to the content inside the composable

  • fabConfiguration – the positioning of the FAB

  • cutoutShape – the shape to cutout for the placement of the FAB

Examples

Minimal Bottom App Bar

BottomAppBar {
    Text(
        text = "Jetpack Compose",
        modifier = Modifier.padding(16.dp)
    )
}

Alert dialog

Styled Bottom App Bar

BottomAppBar(
    contentColor = Color.White,
    backgroundColor = Color.Black
) {
    Text(
        text = "Jetpack Compose",
        modifier = Modifier.padding(16.dp)
    )
}

Alert dialog

Bottom App Bar with FAB

Scaffold(
    bottomBar = {
        BottomAppBar(
            contentColor = Color.White,
            backgroundColor = Color.Black,
            cutoutShape = CircleShape
        ) {

        }
    },
    floatingActionButton = {
        FloatingActionButton(onClick = {

        }) {
            Icon(asset = Icons.Default.Done)
        }
    },
    floatingActionButtonPosition = Scaffold.FabPosition.Center,
    bodyContent = {
        bodyContent()
    })

Alert dialog