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 notificaciones y permite interactuar directamente con los dispositivos desde cualquier lugar.
Es fundamental tener en cuenta la importancia de las barras del sistema, diseñar IU para interacciones con el SO Android, métodos de entrada y otras capacidades del dispositivo. Mantener las barras del sistema en la parte superior de la mayoría de las capas para garantizar su cuenta.
Conclusiones
Incluye barras de sistema en tus diseños para tener en cuenta las zonas seguras de la IU, métodos de entrada, 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: Hacer que las barras del sistema sean transparentes y diseñar la app en pantalla completa continuar 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 coincida con el color del cuerpo de tu app. Por ejemplo, haz coincidir la parte inferior color de la barra de navegación con el color de la barra de gestos y 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 la app. Evita agregar gestos de presión o objetivos de arrastre debajo de las inserciones de gestos. estas conflicto con la navegación de borde a borde y por gestos.
Figura 3: Inserciones de gestos del sistema Evita presionar objetivos en 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 una experiencia más envolvente. Recomendamos usar borde a borde porque barra de navegación transparente es una solicitud común de los usuarios. (Lee sobre cómo admitir 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 la app para evitar que se superponga partes de la IU del SO Android, como la barra de navegación o de estado, o con características del dispositivo físico, como los cortes de pantalla.
Ten en cuenta los siguientes tipos de inserciones cuando diseñes para el uso de borde a borde casos:
- Las inserciones de barras del sistema se aplican a la IU que se puede presionar y que no debería ser oscurecido visualmente por las barras del sistema.
- Las inserciones de gestos del sistema se aplican a las áreas de navegación por gestos que usa el sistema. que tienen prioridad sobre tu aplicación.
Barra de estado
En Android, la barra de estado contiene íconos de notificación e íconos del sistema. El el usuario interactúa con la barra de estado deslizándola hacia abajo para acceder a la notificación sombra.
La barra de estado puede aparecer 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 de la barra de estado, como en los siguientes ejemplos.
Asegúrate de que el contenido de tu app aplique toda la pantalla ahora que como en los productos necesarios. Usa barras de sistema transparentes con contenido de borde a borde, como se muestra en la siguiente ejemplo.
Cuando llega una notificación, generalmente aparece un ícono en la barra de estado. Esta le indica al usuario que se puede ver algo 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
Cambia el estilo del fondo de la barra de estado como parte del tema de tu app con un color personalizado o estilo, junto con la configuración de transparencia y opacidad.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Si configuras manualmente el color de fondo, puedes aplicar ajustes de diseño al estado el contenido de la barra, claro u oscuro, para un contraste óptimo.
Cortes de pantalla y la barra de estado
Un corte de pantalla es un área en algunos dispositivos que se extiende hacia la pantalla. para dejar espacio para los sensores frontales. Puede afectar la apariencia de 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, incluidos los gestos navegación (recomendada) y navegación con tres botones.
Navegación por gestos
La navegación por gestos se introdujo en Android 10 (nivel de API 29), es la opción recomendada. tipo de navegación, aunque no puedes anular la preferencia del usuario. Gesto la navegación no usa botones para ir atrás, página principal y vista general, sino que muestra un único controlador gestual para brindar accesibilidad. Los usuarios interactúan deslizando el dedo desde la izquierda borde derecho de la pantalla para ir atrás y adelante, y hacia arriba desde la parte inferior a casa. 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 navegación por gestos de:
- 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 otras configuraciones de la barra de navegación estar disponibles para tus usuarios. La navegación con dos botones, por ejemplo, proporciona dos botones para ir a la página de inicio 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 gestos de navegación o en los modos de botones.
Modo de navegación por gestos: El sistema aplica adaptación dinámica del color, en el que el contenido de las barras del sistema cambia de color según el contenido detrás de ellos. 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 del sistema. barras (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 del color con barras del sistema cambia el color según el contenido detrás de ellos
Teclado y navegación
Cada tipo de navegación reacciona de manera adecuada al teclado en pantalla para
permiten al usuario realizar acciones como descartar o incluso cambiar la
el tipo de teclado. Para garantizar una transición fluida del teclado,
que sincroniza la transición de la app con el deslizamiento del teclado
hacia arriba y abajo desde la parte inferior de la pantalla, usa
WindowInsetsAnimationCompat
Modo envolvente
Puedes ocultar las barras del sistema cuando necesitas una experiencia en pantalla completa, por ejemplo cuando el usuario mira una película. El usuario aún debería 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 sobre el diseño para modos de pantalla completa o sobre cómo ocultar las barras del sistema para el modo envolvente.