Diseño de borde a borde

Una app de borde a borde aprovecha toda la pantalla dibujando la IU debajo de las barras del sistema.

Figura 1. Izquierda. Una app que no es de borde a borde ¿No? Una app de borde a borde

Conclusiones

  • Dibuja el fondo y el contenido desplazable debajo de las barras del sistema para una experiencia de borde a borde.
  • Evita agregar gestos de presión o destinos de arrastre debajo de las inserciones del sistema, ya que estos entran en conflicto con la navegación por gestos y de borde a borde.
Figura 2: Una app con inserciones de gestos destacadas en verde

Dibuja tu contenido detrás de las barras del sistema

La función de borde a borde te permite dibujar la IU debajo de las barras del sistema para una experiencia envolvente.

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 las barras del sistema o con las funciones del dispositivo físico, como los cortes de pantalla. Obtén información para admitir el borde a borde y controlar las inserciones en Compose y Views.

Ten en cuenta los siguientes tipos de inserciones cuando diseñes casos de uso de borde a borde:

  • Las inserciones de la barra del sistema se aplican a la IU que se puede presionar y que no debe estar visualmente oculta por las barras del sistema.
  • Las inserciones de gestos del sistema se aplican a las áreas de navegación por gestos que usa el SO y que tienen prioridad sobre tu app.
  • Las inserciones de corte de pantalla se aplican a las áreas del dispositivo que se extienden a la superficie de la pantalla, como el corte de la cámara.

Consideraciones sobre la barra de estado

Consulta las barras del sistema de Android para obtener orientación fundamental sobre el diseño de la barra del sistema. En la siguiente sección, se analizan consideraciones adicionales sobre la barra de estado.

Cómo desplazarse por el contenido

Las barras superiores de la app deben contraerse mientras se desplazan. Obtén información para contraer la barra superior de la app de Material 3. En Material 3, las barras superiores de la app pequeñas pueden contraerse a la altura de la barra de estado o desplazarse fuera de la pantalla. Las barras superiores de la app medianas y grandes pueden contraerse a una barra superior de la app más pequeña. Consulta la guía de Material.

Qué debes hacer

Contrae la barra superior de la app pequeña a la altura de la barra de estado si la barra de la app es fija.

Qué debes hacer

Agrega un gradiente de color de fondo coincidente si la barra superior de la app pequeña no es fija.

Las barras de estado deben ser translúcidas cuando la IU se desplaza por debajo, de modo que los íconos de la barra de estado no se vean desordenados. Para lograr esto, primero haz que la IU desplazable sea de borde a borde implementando los pasos de la documentación de LazyColumn o RecyclerView. Luego, asegúrate de que la barra del sistema sea translúcida haciendo una de las siguientes acciones:

  • Confía en la protección automática de la barra superior de la app de Material 3 cuando te desplaces, si corresponde.
  • Crea un elemento componible de degradado personalizado o usa GradientProtection para Views. Para obtener más información sobre cómo hacerlo en Compose, consulta Protección de la barra del sistema.
Figura 3: Una app con inserciones de gestos destacadas en verde

Para los diseños adaptables, asegúrate de que haya protecciones separadas para los paneles con diferentes colores de fondo.

Qué no debes hacer

Tener protección de degradado que no coincida con el fondo de cada panel

Qué debes hacer

Tener protección de degradado que coincida con el fondo de cada panel

Del mismo modo, los paneles de navegación también deben tener una protección separada del resto de la app.

Figura 4: Una barra de estado translúcida para el panel de navegación En esta imagen, se muestra la protección de la barra de estado para el panel de navegación, pero no para la app.

No apiles protecciones de la barra de estado, por ejemplo, usando la protección integrada de la barra superior de la app de Material 3 y una protección personalizada.

Consulta las barras del sistema de Android para obtener orientación fundamental sobre el diseño de la barra de navegación. En la siguiente sección, se incluyen consideraciones adicionales sobre la barra de navegación.

Cómo desplazarse por el contenido

Las barras inferiores de la app deben contraerse mientras se desplazan.

Qué debes hacer

Agrega un scrim de la barra del sistema para la navegación con tres botones cuando la barra inferior de la app se aleje con una animación.

Qué debes hacer

Mantén la navegación por gestos transparente y no agregues un scrim adicional.

Cortes de pantalla

Los cortes de pantalla pueden afectar la apariencia de la IU. Las apps deben controlar las inserciones de corte de pantalla para que las partes importantes de la IU no se dibujen debajo del corte de pantalla.

Qué debes hacer

Inserta la IU crítica con inserciones de corte de pantalla.

Qué no debes hacer

Colocar la IU crítica en el borde de la pantalla

Sin embargo, los fondos sólidos de la barra de la app deben dibujarse en el corte de pantalla, como se muestra en la siguiente imagen.

Figura 5. Los fondos sólidos de la barra de la app se dibujan en el corte de pantalla mientras se inserta la IU importante.

Asegúrate de que los carruseles horizontales se dibujen en el corte de pantalla.

Figura 6. Una pantalla horizontal de borde a borde, en la que el carrusel se desplaza por el corte de pantalla

Obtén información para admitir cortes de pantalla en Compose y Views.

Otra orientación

En general, los fondos y las líneas divisorias también deben dibujarse de borde a borde, mientras que el contenido, como el texto y los botones, debe insertarse para evitar la IU del sistema y los elementos de hardware.