Juntas, la barra de estado y la de navegación se denominan barras del sistema. Muestran información importante, como el nivel de batería, la hora y alertas de notificación, 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 la IU para interacciones con el SO Android, métodos de entrada y 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 garantizar que se tengan en cuenta.
Qué hacer: Haz que las barras del sistema sean transparentes y diseña tu app en pantalla completa mientras continúas 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 sus colores coincidan con el del cuerpo de tu app. Por ejemplo, haz coincidir el color de la barra de navegación inferior con el color de la barra de gestos y el color de la barra de estado superior con el 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 de borde a borde y por gestos.
Figura 3: Inserciones de gestos del sistema Evita colocar objetivos táctiles debajo de estas áreas.
Dibuja el 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 ofrecer una experiencia más envolvente. Te recomendamos que uses la función de borde a borde, ya que los usuarios suelen solicitar que la barra de navegación sea transparente. (obtén más información sobre cómo admitir la función de borde a borde).
Una app puede abordar las superposiciones en el contenido reaccionando a las inserciones. Las inserciones describen cuánto se debe rellenar el contenido de tu app para evitar que se superponga con partes de la IU del SO Android, como la barra de navegación o la barra de estado, o con funciones del dispositivo físico, 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 barras del sistema se aplican a la IU que se puede presionar y que las barras del sistema no deberían oscurecer visualmente.
- Las inserciones de gestos del sistema se aplican a las áreas de navegación por gestos que utiliza el sistema y que tienen prioridad sobre tu app.
Barra de estado
En Android, la barra de estado contiene íconos de notificación e íconos 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 configurar el estilo de la barra de estado, como en los siguientes ejemplos.
Ahora que se requiere la función de borde a borde, asegúrate de que el contenido de tu app abarque toda la pantalla. Usa barras del sistema transparentes con contenido de borde a borde, como se muestra en el siguiente ejemplo.
Cuando llega una notificación, generalmente aparece 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 la app para representar el canal. Consulta Diseño de notificaciones.
Cómo establecer 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, tienes la opción de diseñar el contenido de la barra de estado como oscuro o claro para lograr un contraste óptimo.
Cortes de pantalla 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 los sensores frontales. Puede afectar el aspecto de las barras de estado. Los cortes de pantalla pueden variar según el fabricante.
Obtén más información para admitir cortes de pantalla.
Barra de navegación
Android permite a los usuarios controlar la navegación con los controles Atrás, Inicio y Recientes:
- Atrás regresa directamente a la vista anterior.
- La pantalla principal sale de la app y llega a la pantalla principal del dispositivo.
- En Recientes, 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 (recomendado) 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 recomendado, aunque no puedes anular la preferencia del usuario. La navegación por gestos no usa botones para ir hacia atrás, página principal y descripción general, sino que muestra un solo controlador de gestos 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 y adelante, 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 dispositivos móviles y pantallas más grandes. Para brindar 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 o 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 proporciona tres botones para ir atrás, página principal y vista general.
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 ir a la pantalla principal y de 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 del 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 el contenido claro, y viceversa.
Figura 13: Adaptación dinámica del color Modos de los botones: El sistema aplica una lámina translú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 14: 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, para 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, usa WindowInsetsAnimationCompat.
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 debería poder presionar para mostrar las barras del sistema y la IU para navegar o interactuar con los controles del sistema. Obtén más información sobre el diseño para modos de pantalla completa o sobre cómo ocultar las barras del sistema para el modo envolvente.