Juntas, la barra de estado 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 el estado del sistema y las barras de navegación transparentes o translúcidas, y dibuja el contenido detrás de estas barras para que se extienda de borde a borde.
Evita agregar gestos de presión o destinos de arrastre debajo de los inserciones de gestos, ya que estos entran en conflicto con la navegación de gestos y de borde a borde.
Figura 2: Inserciones de gestos del sistema. Evita colocar objetivos de toque debajo de estas áreas.
Dibuja tu contenido detrás de las barras del sistema
La función de pantalla completa permite que Android dibuje la IU debajo de las barras del sistema para lograr una experiencia envolvente, que es una solicitud común de los usuarios.
Una app puede abordar las superposiciones en el contenido reaccionando a los insertos. Las inserciones describen cuánto relleno debe tener el contenido de tu app para evitar superponerse con partes de la IU del SO Android, como la barra de navegación o la barra de estado, o con funciones físicas del dispositivo, como los cortes de pantalla. Obtén información para admitir el diseño de borde a borde y controlar las inserciones en Compose y views.
Ten en cuenta los siguientes tipos de inserciones cuando diseñes para casos de uso de borde a borde:
- Las inserciones de barras del sistema se aplican a la IU que se puede presionar y que no debe estar oculta visualmente por las barras del sistema.
- Los recortes de gestos del sistema se aplican a las áreas de navegación por gestos que usa el sistema y que tienen prioridad sobre tu app.
Barra de estado
En Android, la barra de estado contiene íconos de notificación y del sistema. El usuario interactúa con la barra de estado deslizándola hacia abajo para acceder a la sombra de notificaciones.
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. Puedes establecer el estilo del ícono de la barra de estado como en los siguientes ejemplos.
Asegúrate de que el contenido de la app ocupe toda la pantalla. Mantén las barras de estado y navegación transparentes o translúcidas con contenido de borde a borde, como se muestra en el siguiente ejemplo.
El diseño de borde a borde se aplica en Android 15 para que las barras del sistema sean transparentes o traslúcidas de forma predeterminada. En versiones anteriores de Android, no dejes las barras del sistema opacas.
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
Para asegurarte de que la barra de estado sea transparente en todas las versiones, llama a enableEdgeToEdge(). Asegúrate de actualizar los colores de los íconos de la barra de estado para lograr un contraste.
Por ejemplo, para crear íconos oscuros, haz lo siguiente:
WindowCompat.getInsetsController(window, window.decorView)
.isAppearanceLightStatusBars = false
Cómo mostrar los cortes y la barra de estado
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. Puede afectar la apariencia de las barras de estado. Los recortes de la pantalla pueden variar según el fabricante.
Obtén información para respaldar los cortes de pantalla.
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 la descripción general, se muestran las apps que están abiertas y que se abrieron recientemente.
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
La navegación por gestos, que se introdujo en Android 10 (nivel de API 29), es el tipo de navegación recomendado, aunque no puedes anular la preferencia del usuario. La navegación por gestos no usa botones para atrás, inicio y descripción general, sino que muestra un control de gesto único 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 hacia arriba desde la parte inferior para ir a la pantalla principal. Si deslizas el dedo hacia arriba y lo mantienes presionado, 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 más grandes y en dispositivos móviles. Para proporcionar la mejor experiencia del usuario, ten en cuenta lo siguiente en relación con la navegación por gestos:
- Compatibilidad con el contenido de borde a borde
- Evita agregar interacciones o destinos táctiles debajo de los recuadros de navegación por gestos.
Lee sobre la implementación de la navegación con gestos.
Navegación con tres botones
La navegación con tres botones proporciona tres botones para atrás, 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.
Cómo establecer un estilo de navegación
Llama a enableEdgeToEdge() para asegurarte de que la barra de navegación sea transparente o traslúcida en todas las versiones.
En dispositivos con Android 15 y versiones posteriores, o después de llamar a enableEdgeToEdge(), la navegación por gestos es transparente de forma predeterminada. La navegación con tres botones es traslúcida de forma predeterminada o opaca si está dentro de la barra de tareas en un dispositivo con pantalla grande.
Si tu app tiene una barra de la app inferior, establece Window.setNavigationBarContrastEnforced() en false para asegurarte de que la barra de la app inferior pueda dibujarse debajo de la barra de navegación del sistema sin que se aplique una pantalla translúcida en la navegación de tres botones.
Android controla la protección visual de la interfaz de usuario en el modo de navegación con gestos y en los modos de botones.
Modo de navegación por gestos: El sistema aplica una 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. 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.
Figura 12: Adaptación de color dinámico Modos de botones: El sistema aplica una pantalla translúcida detrás de las barras de navegación de botones, que se puede quitar configurando
Window.setNavigationBarContrastEnforced()comofalse.
Figura 13: Adaptación de color dinámico, en la que las barras del sistema cambian de color según el contenido que se encuentra detrás de ellas
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 del teclado, usa WindowInsetsAnimationCompat. Esto sincroniza la transición de la app con el teclado que se desliza hacia arriba y hacia abajo desde la parte inferior de la pantalla.
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 la IU para 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.