AudioCurso Jetpack Compose 14 BottomNavigation
jetpack compose bottomnavigation

AudioCurso Jetpack Compose 14 BottomNavigation

La BottomNavigation, al igual que la BottomAppBar es otro de los elementos que podemos usar como bottomBar en el Scaffold de nuestras pantallas en Jetpack Compose.

Los miembros de "Los androides Premium" escuchan contenido adicional en audio sobre este artículo... ¡y otros más de 100!

Suena muy bien

Hay que suscribirse para disfrutar de todo el contenido premium desde la web y la app, así como participar en las actividades premium: videoconferencias y canales premium en Discord.

Permite la navegación entre los destinos principales en una aplicación.

Debe contener varios BottomNavigationItems. Cada uno representando una feature de nuestra app.

Es una forma fácil y conveniente de navegar entre las diferentes vistas de una aplicación, ya que proporciona una forma intuitiva para el usuario de acceder a las diferentes secciones de la app.

Normalmente se muestra un conjunto de iconos en la parte inferior de la pantalla. De este modo, el usuario puede tocar cualquiera de ellos para navegar a la sección correspondiente.

Puede ser personalizado en cuanto a su apariencia y comportamiento. Y se puede utilizar en conjunto con otras funciones de navegación de Jetpack Compose como el drawer o la TopAppBar.

La BottomNavigation también ofrece soporte para el estado seleccionado. Y así indicar al usuario en qué sección se encuentra actualmente.

No me quiero enrollar mucho con esto, ya que a nivel conceptual es un componente bastante sencillo. Y además se parece bastante a la TopAppBar.

Lo suyo es que si no lo estás usando aún, que lo hagas practicando directamente en un proyecto.

En la app tienes un ejemplo de uso, con navegación incluida. Con lo que es un buen modo de seguir avanzando con código de referencia si quieres seguir profundizando en ello.

Por si tienes curiosidad, internamente la BottomNavigation tiene los siguientes parámetros:

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

En la siguiente edición del audioCurso, vamos a hablar de otro parámetro del Scaffold, el snackbarHost.

Publicado: 2023-01-18 Actualizado: 2023-08-05