Cómo mostrar una barra de la aplicación inferior

Crea una barra inferior de la app para ayudar a los usuarios a navegar y acceder a las funciones de tu app. Sigue esta guía para agregar una barra inferior de la app con el elemento componible BottomAppBar.

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Crea una barra de la aplicación inferior

Usa el siguiente código para crear una barra de la aplicación inferior que contenga cuatro botones de íconos y un botón de acción flotante:

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}
AppBar.kt

Puntos clave sobre el código

  • Un Scaffold externo que tiene un bottomBar establecido.
  • Una implementación de bottomBar que contiene una lista de acciones.
  • Acciones que son implementaciones de IconButton que contienen Icon para el texto de la descripción de la imagen y el contenido, cada una con una lambda onClick para realizar estas acciones.

Puedes pasar elementos componibles para los siguientes parámetros clave:

  • actions: Es una serie de íconos que aparecen en el lado izquierdo de la barra. Por lo general, estas son acciones clave para la pantalla determinada o elementos de navegación.
  • floatingActionButton: Es el botón de acción flotante que aparece en el lado derecho de la barra.

Resultados

Ejemplo de una barra de la app inferior
Figura 1: Ejemplo de una barra de la app inferior.

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:

Descubre cómo usar una plataforma estandarizada para compilar interfaces de usuario complejas. El andamiaje une diferentes partes de la IU, lo que les da a las apps un aspecto coherente.
Colección de guías rápidas
Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
Colección de guías rápidas

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.
Ir a las Preguntas frecuentes Enviar comentarios