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 una 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 la IU para interacciones con el SO Android, métodos de entrada u otras capacidades del dispositivo. Mantén las barras del sistema en la parte superior de la mayoría de las capas para asegurarte de que se tengan en cuenta.
Puck robado
Incluye barras del sistema en tus diseños para tener en cuenta las zonas seguras de la IU, las interacciones del sistema, los métodos de entrada, los cortes de pantalla y otras capacidades del dispositivo. Mantén las barras del sistema en la capa superior para asegurarte de que se tengan en cuenta.
Qué hacer: Haz que las barras del sistema sean transparentes, expande la app en pantalla completa y continúa con la IU debajo de las barras para brindar una experiencia completa de borde a borde.
Si no puedes establecer ambas barras para que sean transparentes, asegúrate de que los colores de las barras coincidan con el color del cuerpo de tu app. Por ejemplo, haz coincidir el color de la barra de navegación inferior con el de la barra de gestos y el color de la barra de estado superior con el color del cuerpo.
Figura 2: Asegúrate de que los colores de la barra del sistema coincidan con el color del cuerpo de tu app Evita agregar gestos de presión o objetivos de arrastre debajo de las inserciones de gestos, ya que entran en conflicto con la navegación por gestos y de borde a borde.
Figura 3: Inserciones de gestos del sistema. Evita colocar objetivos de presión en estas áreas
Cómo dibujar tu contenido detrás de las barras del sistema
La función de borde a borde permite que Android dibuje la IU debajo de las barras del sistema para brindar una experiencia más envolvente. Recomendamos usar de borde a borde porque hacer que la barra de navegación sea transparente es una solicitud común de los usuarios. (Obtén información para admitir de borde a borde).
Una app puede abordar superposiciones en el contenido reaccionando a las inserciones. Las inserciones describen cuánto se debe rellenar el contenido de tu app para evitar la superposición con partes de la IU del SO Android, como la barra de navegación o de estado, o con funciones de dispositivos físicos, como los cortes de pantalla.
Ten en cuenta los siguientes tipos de inserciones cuando diseñes para casos de uso de borde a borde:
- Las inserciones de las barras del sistema se aplican a la IU que se puede presionar y que no debería ocultar visualmente las barras del sistema.
- Las inserciones 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 notificaciones y del sistema. El usuario interactúa con la barra de estado deslizándola hacia abajo para acceder al panel de notificaciones.
La barra de estado puede 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. También puedes establecer el estilo de la barra de estado, como en los siguientes ejemplos.
Cuando llega una notificación, generalmente aparece un ícono en la barra de estado. para indicarle al usuario que hay algo para ver en el panel lateral de notificaciones. Puede ser el ícono o el símbolo de la app para representar el canal. Consulta Diseño de notificaciones.
Establece el estilo de la barra de estado
Diseña el fondo de la barra de estado como parte del tema de tu app, con un color o estilo personalizado, y configura la transparencia y opacidad.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Si configuras el color de fondo de forma manual, puedes aplicar diseño al contenido de la barra de estado como oscuro o claro para lograr un contraste óptimo.
Cortes de pantalla y barra de estado
Un corte de pantalla es un área en algunos dispositivos que se extiende hacia la superficie de la pantalla para proporcionar espacio para los sensores frontales. Puede afectar la apariencia de las barras de estado. Los cortes de pantalla pueden variar según el fabricante.
Descubre cómo admitir cortes de pantalla.
Barra de navegación
Android permite a los usuarios controlar la navegación con los controles de retroceso, principal y Recientes:
- El botón Atrás regresa directamente a la vista anterior.
- La casa pasa fuera de la app y a la pantalla principal del dispositivo.
- En Resumen, se muestra que las apps están abiertas y se abrieron recientemente.
Los usuarios pueden elegir entre varias configuraciones de la barra de navegación, incluida la navegación por gestos (recomendada) y la navegación con tres botones.
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 ir atrás, principal ni descripción general, sino que muestra un solo controlador de gesto para la indicación visual. Los usuarios interactúan deslizando el dedo desde el borde izquierdo o derecho de la pantalla para ir atrás, adelante y arriba desde la parte inferior e 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 dispositivos móviles y pantallas más grandes. Para proporcionar la mejor experiencia del usuario, ten en cuenta la navegación por gestos de la siguiente manera:
- Compatibilidad con contenido de borde a borde
- Evita agregar interacciones u objetivos táctiles debajo de las inserciones de navegación por gestos.
Obtén información sobre cómo implementar la navegación por gestos.
Navegación con tres botones
La navegación con tres botones ofrece tres botones para ir atrás, página principal y Recientes.
Otras variaciones de la barra de navegación
Según la versión de Android y el dispositivo, es posible que otros parámetros de configuración de la barra de navegación estén disponibles para los usuarios. La navegación con dos botones, por ejemplo, proporciona dos botones para Pantalla principal y Atrás.
Cómo establecer un estilo de navegación
En el siguiente ejemplo, se muestra cómo implementar un estilo de navegación.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android controla toda la protección visual de la interfaz de usuario en el modo de navegación por gestos o en los modos de botones.
Modo de navegación por gestos: 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 detrás de ellas. 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.
Figura 15: Adaptación dinámica del color Modos de botones: El sistema aplica una lámina traslúcida detrás de las barras del sistema (para el nivel de API 29 o versiones posteriores) o una barra del sistema transparente (para el nivel de API 28 o versiones anteriores).
Figura 16: Adaptación dinámica de color, en la que las barras del sistema cambian de color según el contenido 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 a fin de garantizar una transición fluida que sincronice la transición de la app con el deslizamiento del teclado hacia arriba y hacia abajo desde la parte inferior de la pantalla.
Modo envolvente
Puedes ocultar las barras del sistema cuando necesitas una experiencia de pantalla completa, por ejemplo, cuando el usuario está mirando una película. El usuario aún debería poder presionar para mostrar las barras y la IU del sistema para navegar o interactuar con los controles del sistema. Obtén más información sobre cómo diseñar para modos de pantalla completa o sobre cómo ocultar las barras del sistema del modo envolvente.