BottomAppBar

Material	Material 3

BottomAppBar es una barra inferior que nos proporciona funciones de navegación y acciones. Suele ir dentro de un Scaffold.

Implementación

Definición del componente

Material

@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
)

Atributo	Descripción
modifier	Modificador que implementará el composable (Opcional).
backgroundColor	El color del fondo del componente.
contentColor	Color del contenido.
cutoutShape	Recorte que tendrá la BottomAppBar si lo combinamos en un Scaffold con un floatingActionButton.
elevation	Permite modificar la elevación del componente.
contentPadding	El padding aplicado al contenido del BottomAppBar.
content	Contenido que almacenará la BottomAppBar.

Material 3

Diferentes implementaciones

BottomAppBar en Material 3 dispone de dos implementaciones distintas.

@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
)

Atributo	Descripción
modifier	Modificador que implementará el composable (Opcional).
containerColor	El color del fondo del componente.
contentColor	Color del contenido.
tonalElevation	Añade un color de elevacíon en relación al color del containerColor.
contentPadding	El padding aplicado al contenido del BottomAppBar.
windowInsets	El espacio que respetará de bordes sobre la pantalla del móvil. Más información en la documentación oficial.
content	Contenido que almacenará la 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,
)

Atributo	Descripción
actions	Contenido que almacenará la BottomAppBar.
modifier	Modificador que implementará el composable (Opcional).
floatingActionButton	floatingActionButton opcional que aparecerá en la parte final del componente.
containerColor	El color del fondo del componente.
contentColor	Color del contenido.
tonalElevation	Añade un color de elevacíon en relación al color del containerColor.
contentPadding	El padding aplicado al contenido del BottomAppBar.
windowInsets	El espacio que respetará de bordes sobre la pantalla del móvil. Más información en la documentación oficial.

Fuente

Puedes acceder a la documentación oficial de Google desde aquí.

Ejemplos

Material

@Composable
fun BottomAppBarExample() {
    BottomAppBar {
        IconButton(onClick = { print("Build") }) {
            Icon(Icons.Filled.Build, contentDescription = "Build description")
        }
        IconButton(onClick = { print("Menu") }) {
            Icon(
                Icons.Filled.Menu,
                contentDescription = "Menu description",
            )
        }
        IconButton(onClick = { print("Favorite") }) {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = "Favorite description",
            )
        }
        IconButton(onClick = { print("Delete") }) {
            Icon(
                Icons.Filled.Delete,
                contentDescription = "Delete description",
            )
        }
    }

}

Material 3

@Composable
fun BottomAppBarExample() {
    BottomAppBar(actions = {
        IconButton(onClick = { print("Build") }) {
            Icon(Icons.Filled.Build, contentDescription = "Build description")
        }
        IconButton(onClick = { print("Menu") }) {
            Icon(
                Icons.Filled.Menu,
                contentDescription = "Menu description",
            )
        }
        IconButton(onClick = { print("Favorite") }) {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = "Favorite description",
            )
        }
        IconButton(onClick = { print("Delete") }) {
            Icon(
                Icons.Filled.Delete,
                contentDescription = "Delete description",
            )
        }
    })
}