Cómo mostrar una barra superior de la app

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 un TopBar 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 lambda onClick para realizar la acción.
  • Un IconButton que contiene un Icon 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 que MediumTopAppBar y coloca el título debajo de cualquier ícono adicional.

Resultados

Figura 1: Una barra superior de la app mediana.

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