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 notificaciones, y proporcionan interacción directa con el dispositivo desde cualquier lugar.
Siempre ten en cuenta la presencia y la importancia de las barras del sistema, ya sea que diseñes diseños, métodos de entrada o cualquier otra capacidad del dispositivo.
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 capacidades del dispositivo.
Mantén las barras de estado y de navegación del sistema transparentes o traslúcidas, y dibuja contenido detrás de estas barras para ir 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 utilizan el espacio de la pantalla de manera eficiente.
Barra de estado
La barra de estado contiene íconos de notificación y del sistema. El usuario interactúa con la barra de estado tirando de ella hacia abajo para acceder al panel de notificaciones. Los estilos de la barra de estado pueden ser transparentes o traslú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 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 para ver en el panel de notificaciones. Puede ser el ícono de la app o el símbolo para representar el canal. Consulta Diseño de notificaciones.
Cómo establecer el estilo de la barra de estado
Haz que la barra de estado sea transparente o traslú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.
El 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 la retrocompatibilidad.
En la siguiente imagen del lado izquierdo, 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 una imagen se dibuja debajo de la barra de estado. Las barras de estado traslú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 degradados , consulta Diseño de borde a borde.
Navegación
Android permite que los usuarios controlen la navegación con los controles de atrás, principal y vista general:
- Atrás vuelve a la vista anterior.
- Principal sale de la app y va a la pantalla principal del dispositivo.
- Vista general muestra las apps activas y las apps recientes que no se descartaron.
Los usuarios pueden elegir entre varias configuraciones de navegación, incluidas 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 atrás, principal y vista general, sino que muestra un solo controlador de gestos para la asequibilidad. Los usuarios interactúan deslizando el dedo desde el borde izquierdo o derecho de la pantalla para volver y hacia arriba desde la parte inferior para ir a la pantalla principal. Si deslizas el dedo hacia arriba y lo mantienes presionado, se abre la vista general.
La navegación por gestos es un patrón de navegación más escalable para diseñar en pantallas móviles y más grandes. Para proporcionar la mejor experiencia del usuario, ten en cuenta la navegación por gestos haciendo lo siguiente:
- Admite contenido de borde a borde.
- Evita agregar interacciones o destinos táctiles debajo de 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 cambiar 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 en Jetpack Compose controlan varios factores de forma y, al mismo tiempo, evitan que las barras del sistema interfieran con el diseño de los componentes de navegación.
En los diseños adaptables, considera cómo podrían comportarse o diseñarse de manera diferente las barras del sistema en varios contextos, como tamaños de ventana compactos o expandidos, o diferentes posiciones plegables.
Para obtener más información, consulta Cómo compilar una 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 establecidos por el usuario. Para obtener más información, consulta Íconos de la barra del sistema.
Cómo establecer 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 botón. El sistema aplica la adaptación de color dinámico, 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 segmentar Android 15 o llamar a enableEdgeToEdge en la Activity, el sistema dibuja una barra de navegación por gestos transparente y aplica la adaptación de color dinámico. 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 debes hacer
Modos de botón
Después de segmentar Android 15 o llamar a enableEdgeToEdge en la Activity, el sistema aplica una cortina traslúcida detrás de las barras de navegación de botones, que puedes quitar configurando Window.setNavigationBarContrastEnforced() como falso.
Usa barras de navegación con tres botones transparentes cuando haya una barra de la app inferior o una barra de navegación de la app inferior, o cuando la IU no se desplace debajo de la barra de navegación con tres botones. Para obtener una barra de navegación transparente, configura Window.setNavigationBarContrastEnforced() como falso y rellena las barras de la app inferior para dibujar 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 con tres botones traslúcida para el contenido de desplazamiento. Para obtener más información sobre las consideraciones de la barra de navegación traslúcida, consulta Diseño de borde a borde.
Teclado y navegación
Cada tipo de navegación reacciona de manera 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, considera cómo interactúan las barras del sistema con tu contenido. Usa WindowInsets para asegurarte de que la IU no esté oculta por las barras del sistema en pantallas como pantallas grandes, plegables y ventanas de apps en modos multiventana y de ventanas de escritorio.
Cuando tu app se muestre de borde a borde, verifica que el contenido y los controles no estén ocultos por la IU del sistema. Si, por ejemplo, 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 en algunos dispositivos que se extiende a 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 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 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 Oculta las barras del sistema para el modo envolvente.