Crea una barra superior de la app para ayudar a los usuarios a navegar y acceder a las funciones de tu app con el elemento componible TopAppBar
.
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 un elemento componible para la barra superior de la app
Crea una barra superior de la app con el elemento componible MediumTopAppBar
que se contraiga cuando el usuario se desplace hacia abajo por el área de contenido y se expanda cuando el usuario vuelva a la parte superior del contenido:
Puntos clave sobre el código
- Un
Scaffold
externo con unTopBar
establecido. - Un título que consta de un solo elemento
Text
. - Una barra superior con una sola acción definida.
- Una acción
IconButton
con una lambdaonClick
para realizar la acción. - Un
IconButton
que contiene unIcon
que tiene una imagen de ícono y un texto de descripción del contenido. - El comportamiento de desplazamiento del contenido interno del andamiaje se define como
enterAlwaysScrollBehavior()
. Esto contrae la barra de la app cuando el usuario sube el contenido interno y la expande cuando el usuario baja el contenido interno. - Además de
MediumTopBar
, que contiene el título, también puedes usar lo siguiente:TopAppBar
: Úsalo para pantallas que no requieran mucha navegación ni acciones.CenterAlignedTopAppBar
: Se usa para pantallas que tienen una sola acción principal.El título se centra dentro del componente.MediumTopAppBar
: Se usa para pantallas que requieren una cantidad moderada de navegación y acciones.LargeTopAppBar
: Úsalo para pantallas que requieran mucha navegación y acciones. Usa más padding queMediumTopAppBar
y coloca el título debajo de cualquier ícono adicional.
Resultados
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:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=es-419)
Crea una estructura de pantalla principal
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=es-419)