En conjunto, la barra de estado, la barra de leyendas y la barra de navegación se denominan barras del sistema. Muestran información importante, como el nivel de batería, la hora y las alertas de notificaciones, y proporcionan interacción directa con el dispositivo desde cualquier lugar.
Es fundamental tener en cuenta la importancia de las barras del sistema, ya sea que diseñes una IU para interacciones con el SO Android, métodos de entrada o cualquier otra función del dispositivo.
Conclusiones
Incluye barras del sistema cuando diseñes tu app. Ten en cuenta las zonas seguras de la IU, las interacciones del sistema, los métodos de entrada, los recortes de pantalla, las barras de estado, las barras de subtítulos, las barras de navegación y otras funciones del dispositivo.
Mantén las barras de estado y navegación del sistema transparentes o translúcidas, y dibuja el contenido detrás de estas barras para que se extienda de borde a borde.
Barra de estado
En Android, la barra de estado contiene íconos de notificaciones y del sistema. El usuario interactúa con la barra de estado deslizándola hacia abajo para acceder a la sombra de notificaciones. Los estilos de la barra de estado pueden ser transparentes o translúcidos.
Íconos de la barra de estado
Los íconos de la barra de estado pueden aparecer de forma diferente según el contexto, la hora del día, las preferencias o los temas establecidos por el usuario y otros parámetros. Para obtener más información, consulta Íconos de la barra del sistema.
Cuando llega una notificación, suele aparecer un ícono en la barra de estado. Esto le indica al usuario que hay algo que ver en el panel lateral de notificaciones. Puede ser el ícono o el símbolo de tu app para representar el canal. Consulta Diseño de notificaciones.
Establece el estilo de la barra de estado
Haz que la barra de estado sea transparente o translúcida para asegurarte de que el contenido de la app ocupe toda la pantalla. Luego, establece el estilo de los íconos de la barra del sistema para que los íconos tengan el contraste adecuado.
El diseño de borde a borde se aplica en Android 15, lo que hace que la barra de estado sea transparente de forma predeterminada. Llama a enableEdgeToEdge() para obtener retrocompatibilidad.
En la siguiente imagen de la izquierda, la barra de estado es transparente y el fondo verde de TopAppBar se dibuja detrás de la barra de estado.
Las barras de estado transparentes son ideales cuando la IU no aparece debajo de la barra de estado o cuando se dibuja una imagen debajo de ella. Las barras de estado translúcidas son ideales cuando la IU se desplaza debajo de la barra de estado. Para obtener más información sobre la protección de gradientes, consulta Diseño de borde a borde.
Barra de navegación
Android permite a los usuarios controlar la navegación con los controles Atrás, Inicio y Resumen:
- Atrás te lleva directamente a la vista anterior.
- La pantalla principal sale de la app y se dirige a la pantalla principal del dispositivo.
- En Descripción general, se muestran las apps activas y las apps recientes que no se cerraron.
Los usuarios pueden elegir entre varias configuraciones de la barra de navegación, incluida la navegación por gestos (recomendado) y la navegación con tres botones. Para ofrecer la mejor experiencia, ten en cuenta varios tipos de navegación.
Navegación por gestos
Te recomendamos que uses la navegación por gestos, a menos que el usuario seleccione lo contrario en sus preferencias. La navegación por gestos no usa botones para atrás, inicio ni descripción general, sino que muestra un solo control de gestos para la indicación visual. Los usuarios interactúan deslizando el dedo desde el borde izquierdo o derecho de la pantalla para volver atrás y desde la parte inferior para ir a la pantalla principal. Si deslizas el dedo hacia arriba y lo mantienes presionado, se abrirá la vista general.
La navegación por gestos es un patrón de navegación más escalable para diseñar en pantallas más grandes y dispositivos móviles. Para proporcionar la mejor experiencia del usuario, ten en cuenta la navegación por gestos y haz lo siguiente:
- Compatibilidad con el contenido de borde a borde
- Evita agregar interacciones o destinos táctiles debajo de los recuadros de navegación por gestos.
Para obtener más información, consulta Cómo agregar compatibilidad con la navegación por gestos.
Navegación con tres botones
La navegación con tres botones proporciona tres botones para atrás, pantalla principal y descripción general.
Otras variantes de la barra de navegación
Según la versión de Android y el dispositivo, es posible que los usuarios tengan disponibles otras configuraciones de la barra de navegación. La navegación con dos botones, por ejemplo, proporciona dos botones para la pantalla principal y atrás.
Íconos de la barra de navegación
Los íconos de la barra de navegación también pueden aparecer de diferentes maneras según las preferencias o los temas establecidos por el usuario. Para obtener más información, consulta Íconos de la barra del sistema.
Establece un estilo para la barra de navegación
Android controla la protección visual de la interfaz de usuario en el modo de navegación por gestos y en los modos de botones. El sistema aplica la adaptación de color dinámica, en la que el contenido de las barras del sistema cambia de color según el contenido que se encuentra detrás de ellas.
Modo de navegación por gestos
Después de orientar tu app a Android 15 o llamar a enableEdgeToEdge en Activity, el sistema dibuja una barra de navegación por gestos transparente y aplica la adaptación de color dinámica. En el siguiente ejemplo, el control de la barra de navegación cambia a un color oscuro si se coloca sobre contenido claro y viceversa.
Siempre se recomiendan las barras de navegación por gestos transparentes.
Qué debes hacer
Qué no debes hacer
Modos de botones
Después de orientar tu app a Android 15 o llamar a enableEdgeToEdge en Activity, el sistema aplica una pantalla translúcida detrás de las barras de navegación con botones, que puedes quitar si estableces Window.setNavigationBarContrastEnforced() como "false".
Recomendamos barras de navegación con tres botones transparentes cuando hay una barra inferior de la app o una barra de navegación inferior de la app, o cuando la IU no se desplaza debajo de la barra de navegación con tres botones. Para obtener una barra de navegación transparente, establece Window.setNavigationBarContrastEnforced() en "false" y rellena las barras de la app inferior para dibujarlas debajo de las barras de navegación del sistema, como se ve en las Figuras 7, 8 y 9. Consulta Protección de la barra del sistema para obtener más información.
Usa una navegación translúcida de tres botones para desplazarte por el contenido. Para obtener más información sobre las consideraciones de la barra de navegación translúcida, consulta .
Teclado y navegación
Cada tipo de navegación reacciona de manera apropiada al teclado en pantalla para permitir que el usuario realice acciones como descartar o incluso cambiar el tipo de teclado. Para garantizar una transición fluida que sincronice la transición de la app con el teclado que se desliza hacia arriba y hacia abajo desde la parte inferior de la pantalla, usa WindowInsetsAnimationCompat.
Cortes de pantalla
Un corte de pantalla es un área en algunos dispositivos que se extiende a la superficie de la pantalla para proporcionar espacio para sensores frontales. Los recortes de la pantalla pueden variar según el fabricante. Considera cómo interactuarán los recortes de la pantalla con el contenido, la orientación y el diseño de borde a borde.
Modo envolvente
Puedes ocultar las barras del sistema cuando necesites una experiencia de pantalla completa, por ejemplo, cuando el usuario mira una película. El usuario aún debe poder presionar para revelar las barras del sistema y navegar o interactuar con los controles del sistema. Obtén más información para diseñar para modos de pantalla completa o lee sobre cómo ocultar las barras del sistema para el modo envolvente.