Jetpack Compose: Como crear una TopAppBar

Ya sabemos que en Jetpack Compose todo lo que podemos utilizar para crear nuestras interfaces y ponemos en pantalla son funciones composables y que “componiendo” unas con otras vamos formando nuestra interfaz gráfica.

Hasta ahora disponíamos en Android de un componente para navegación llamado Actionbar, AppBar o Toolbar según la versión del SDK que utilizaremos. Este componente en Jetpack Compose pasa a denominarse TopAppbar y por supuesto es un composable.

Este componente lo podemos utilizar como un composable más en cualquier parte de nuestra vista o podemos incluirlo como propiedad de otro composable como es el caso de los Scaffold.

A modo de ejemplo podemos crear una TopAppBar en compose como sigue:

@Composable
fun CustomTopAppBar() {
   TopAppBar(
       title = { Text(text = "Título") })

}

TopAppBar jetpack compose with title

Este composable posee diferentes atributos que podemos usar para modificar y customizar nuestra AppBar, como son: color de fondo, altura o elevación en el eje Z, añadirle iconos con acciones tanto a la derecha como a la izquierda del título, incluirle subvistas como si fuese otro composable más. Todas son a su vez funciones composables que van formando nuestras vistas.

@Composable
fun CustomTopAppBar() {
   TopAppBar(
       title = { Text(text = "Título") },
       backgroundColor = Color.Cyan,
       navigationIcon = {
           IconButton(onClick = { /* Do Something*/ }
           ) {
               Icon(Icons.Filled.ArrowBack, null)
           }
       },
       actions = {
           IconButton(onClick = {/* Do Something*/ }) {
               Icon(Icons.Filled.Share, null)
           }
           IconButton(onClick = {/* Do Something*/ }) {
               Icon(Icons.Filled.Settings, null)
           }
       })
}
Jetpack Compose TopAppBar with actions

Atributos principales de la TopAppBar en Jetpack Compose

AtributoDescripción
titleTítulo que podemos añadir a la barra.
modifierModificador que se puede aplicar a la propia Barra.
navigationIconIcono de navegación que puede ser un IconButton o un IconToggleButton, se muestra a la izquierda del título.
actionsEstas acciones, que cada una es un,  IconButton, son mostradas en una Row a la derecha del título, al final de la TopAppBar.
backgroundColorEste Color es aplicado al fondo de la TopAppBar.
contentColorEste Color es aplicado a las vistas hijas de la TopAppBar.
elevationElevación en el eje z de la TopAppBar.

El código lo tenéis en Github

Comparte si lo consideras interesante
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.