Bottom Navigation

Material	Material 3

BottomNavigation permite la navegación entre pantallas principales en una aplicación.

BottomNavigation debería contener varios BottomNavigationItem que reprensentarían cada una de las pantallas principales.

Implementación

Definición del componente

Material

Diferentes implementaciones

BottomNavigation en Material dispone de dos implementaciones distintas.

@Composable
fun BottomNavigation(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    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.
elevation	Permite modificar la elevación del componente.
content	Destinos dentro de este BottomNavigation, esto debe contener múltiples BottomNavigationItems.

@Composable
fun BottomNavigation(
    windowInsets: WindowInsets,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable RowScope.() -> Unit
)

Esta segunda opción proporciona la capacidad de especificar WindowInsets. Valores recomendados se pueden encontrar en BottomNavigationDefaults.windowInsets

Atributo	Descripción
windowInsets	Proporciona información sobre la IU del sistema para garantizar que tu app se dibuje en el área correcta. Mas información en la documentación oficial.
modifier	Modificador que implementará el composable (Opcional).
backgroundColor	El color del fondo del componente.
contentColor	Color del contenido.
elevation	Permite modificar la elevación del componente.
content	Destinos dentro de este BottomNavigation, esto debe contener múltiples BottomNavigationItem.

Fuente

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

Material 3

Cambio de nombre

BottomNavigation en Material 3 cambia de nombre a NavigationBar.

@Composable
fun NavigationBar(
    modifier: Modifier = Modifier,
    containerColor: Color = NavigationBarDefaults.containerColor,
    contentColor: Color = MaterialTheme.colorScheme.contentColorFor(containerColor),
    tonalElevation: Dp = NavigationBarDefaults.Elevation,
    windowInsets: WindowInsets = NavigationBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
): Unit

Atributo	Descripción
modifier	Modificador que implementará el composable (Opcional).
containerColor	El color del fondo del componente. Usar Color.Transparent para quitar el color.
contentColor	Color del contenido.
tonalElevation	Añade un color de elevacíon en relación al color del containerColor.
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 NavigationBar, nomrmalmente 3-5 NavigationBarItem.

Fuente

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

Ejemplos

Material

@Composable
fun BottomNavigationExample() {
    BottomNavigation(){
        BottomNavigationItem(
            selected = true,
            onClick = { /*TODO*/ },
            icon = { Icon( Icons.Filled.Favorite, null) },
            label = { Text(text = "Aris")}
        )
        BottomNavigationItem(
            selected = false,
            onClick = { /*TODO*/ },
            icon = { Icon( Icons.Filled.Favorite, null) },
            label = { Text(text = "Aris")}
        )
        BottomNavigationItem(
            selected = false,
            onClick = { /*TODO*/ },
            icon = { Icon( Icons.Filled.Favorite, null) },
            label = { Text(text = "Aris")}
        )
        BottomNavigationItem(
            selected = true,
            onClick = { /*TODO*/ },
            icon = { Icon( Icons.Filled.Favorite, null) },
            label = { Text(text = "Aris")}
        )
    }
}

Material 3

@Composable
fun NavigationBarExample() {
    NavigationBar( windowInsets = NavigationBarDefaults.windowInsets ){
        BottomNavigationItem(
            selected = true,
            onClick = { /*TODO*/ },
            icon = { Icon( Icons.Filled.Favorite, null) },
            label = { Text(text = "Aris")}
        )
        BottomNavigationItem(
            selected = false,
            onClick = { /*TODO*/ },
            icon = { Icon( Icons.Filled.Favorite, null) },
            label = { Text(text = "Aris")}
        )
        BottomNavigationItem(
            selected = false,
            onClick = { /*TODO*/ },
            icon = { Icon( Icons.Filled.Favorite, null) },
            label = { Text(text = "Aris")}
        )
        BottomNavigationItem(
            selected = true,
            onClick = { /*TODO*/ },
            icon = { Icon( Icons.Filled.Favorite, null) },
            label = { Text(text = "Aris")}
        )
    }
}