La barra de estado, la barra de subtítulos y la barra de navegación son las barras del sistema. Muestran información importante, como el nivel de batería, la hora y las alertas de notificación, y proporcionan interacción directa con el dispositivo desde cualquier lugar.
Siempre ten en cuenta la presencia y la prominencia de las barras del sistema, ya sea que diseñes diseños, métodos de entrada o cualquier otra función del dispositivo.
Habilidades de Android
Ver en GitHubAgrega compatibilidad con el diseño de borde a borde
android skills add edge-to-edge
Conclusiones
Incluye barras del sistema en tus diseños para diferentes tamaños de pantalla y factores de forma. Ten en cuenta las zonas seguras de la IU, las interacciones del sistema, los métodos de entrada, los cortes 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 muestre de borde a borde.
Usa
WindowInsetspara controlar correctamente las intrusiones de la barra del sistema y asegurarte de que el contenido no se oculte en tus diseños adaptables.Usa diseños canónicos, que usan el espacio de la pantalla de manera eficiente.
Barra de estado
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 al panel 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 manera diferente según el contexto, la hora del día, las preferencias o los temas que establezca 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 para ver en el panel lateral de notificaciones. Puede ser el ícono o 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 tu app abarque toda la pantalla. Luego, establece el estilo de los íconos de la barra del sistema para que tengan el contraste adecuado.
En Android 15, se aplica el modo de borde a borde, 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.
Navegación
Android permite que los usuarios controlen la navegación con los controles Atrás, Inicio y Ver ventanas:
- Atrás vuelve a la vista anterior.
- Home sale de la app y va a la pantalla principal del dispositivo.
- En Recientes, se muestran las apps activas y las apps recientes que no se descartaron.
Los usuarios pueden elegir entre varias opciones de configuración de navegación, como la navegación por gestos y la navegación adaptable. Para ofrecer una experiencia del usuario óptima, ten en cuenta varios tipos de navegación.
Navegación por gestos
La navegación por gestos no usa botones para volver atrás, ir a la pantalla principal ni ver la descripción general, sino que muestra un solo controlador de gestos para la affordance. Los usuarios interactúan deslizando el dedo desde el borde izquierdo o derecho de la pantalla para volver atrás, y hacia arriba desde la parte inferior para ir a la pantalla principal. Si deslizas el dedo hacia arriba y mantienes presionada la pantalla, se abrirá la descripción general.
La navegación por gestos es un patrón de navegación más escalable para diseñar en pantallas de dispositivos móviles y más grandes. Para proporcionar la mejor experiencia del usuario, ten en cuenta la navegación por gestos de la siguiente manera:
- Admite contenido de borde a borde.
- Evita agregar interacciones o destinos táctiles en las inserciones de navegación por gestos.
Para obtener más información, consulta Cómo agregar compatibilidad con la navegación por gestos.
Navegación adaptable
Otro patrón de navegación común en Android es alternar entre un riel de navegación y una barra de navegación según la clase de tamaño de ventana de la pantalla. Los componentes de navegación adaptable de Jetpack Compose controlan varios factores de forma y, al mismo tiempo, evitan que las barras del sistema interfieran en el diseño de los componentes de navegación.
En los diseños adaptables, considera cómo podrían comportarse las barras del sistema o cómo se les podría aplicar un estilo diferente en varios contextos, como tamaños de ventana compactos o expandidos, o diferentes posiciones de plegado.
Para obtener más información, consulta Cómo compilar la navegación adaptable.
Íconos de navegación
Los íconos de navegación también pueden aparecer de manera diferente según las preferencias o los temas que establezca el usuario. Para obtener más información, consulta Íconos de la barra del sistema.
Establece un estilo 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 dinámica de color, 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 establecer como objetivo Android 15 o llamar a enableEdgeToEdge en Activity, el sistema dibuja una barra de navegación por gestos transparente y aplica la adaptación dinámica de colores. En el siguiente ejemplo, el controlador 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 debe hacer
Modos de botones
Después de orientar la app a Android 15 o llamar a enableEdgeToEdge en Activity, el sistema aplica una máscara translúcida detrás de las barras de navegación con botones, que puedes quitar configurando Window.setNavigationBarContrastEnforced() como falso.
Usa barras de navegación transparentes de tres botones cuando haya una barra de la app o una barra de navegación de la app en la parte inferior, o cuando la IU no se desplace debajo de la barra de navegación de tres botones. Para obtener una barra de navegación transparente, establece Window.setNavigationBarContrastEnforced() en falso y agrega padding a las barras de la app inferiores para que se dibujen debajo de las barras de navegación del sistema, como se muestra en las figuras 7, 8 y 9. Consulta Protección de la barra del sistema para obtener más información.
Usa una barra de navegación traslúcida de tres botones para el contenido que se desplaza. Para obtener más información sobre las consideraciones de la barra de navegación translúcida, consulta Diseño de borde a borde.
Teclado y navegación
Cada tipo de navegación reacciona de forma adecuada 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.
Diseños
Los diseños adaptables optimizan el espacio de visualización disponible. Organizan la IU de la app moviendo el contenido a paneles secundarios o terciarios.
Cuando diseñes diseños adaptables, ten en cuenta cómo interactúan las barras del sistema con tu contenido. Usa WindowInsets para asegurarte de que las barras del sistema no oculten la IU en pantallas grandes, dispositivos plegables y ventanas de apps en los modos multiventana y de ventanas de escritorio.
Cuando tu app se muestre de borde a borde, verifica que la IU del sistema no oculte el contenido ni los controles. Por ejemplo, si la barra de navegación cubre un botón, es posible que el usuario no pueda hacer clic en él.
Para obtener más información, consulta Diseños canónicos.
Cortes de pantalla
Un corte de pantalla es un área de algunos dispositivos que se extiende hacia la superficie de la pantalla para proporcionar espacio para los sensores frontales. Los cortes de pantalla pueden variar según el fabricante. Considera cómo interactuarán los cortes de pantalla con el contenido, la orientación y el modo de borde a borde.
Modo envolvente
Puedes ocultar las barras del sistema cuando necesites una experiencia de pantalla completa, por ejemplo, cuando el usuario esté mirando una película. El usuario debería poder presionar para revelar las barras del sistema y navegar o interactuar con los controles del sistema. Para obtener más información, consulta Contenido envolvente y Cómo ocultar las barras del sistema para el modo envolvente.