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. Así es. Una app que es de borde a borde.

Conclusiones

  • Dibuja el fondo y el contenido de desplazamiento debajo de las barras del sistema para brindar una experiencia de borde a borde.
  • Evita agregar gestos de toque 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.

Cómo dibujar 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 brindar una experiencia envolvente.

Una app puede abordar las superposiciones de 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 barras del sistema se aplican a la IU que se puede presionar y que no debería quedar visualmente oculta por las barras del sistema.
  • Los insertos 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 hacia 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 las barras 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 aplicación deben contraerse mientras se desplaza. Obtén información para contraer el elemento TopAppBar de Material 3. En Material 3, las barras superiores de la app pequeñas se pueden contraer a la altura de la barra de estado o desplazarse fuera de la pantalla. Las barras superiores de la app medianas y grandes se pueden contraer en una barra más pequeña. Consulta la guía de Material.

Qué debes hacer

Reduce la barra superior 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 que coincida si la barra superior pequeña de la aplicación no es fija.

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

  • Confía en la protección automática de TopAppBar de Material 3 cuando desplazas, si corresponde.
  • Crea un elemento componible de gradiente personalizado. Para obtener más información, consulta Protección de la barra del sistema.
Figura 3: Una app con inserciones de gestos destacadas en verde.

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

Lo que no debes hacer

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

Qué debes hacer

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

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

Figura 4: Es una barra de estado traslú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 TopAppBar 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 de navegación inferiores de la app deben contraerse mientras se desplaza.

Qué debes hacer

Se agregó una pantalla de relleno de la barra del sistema para la navegación con tres botones cuando la barra de la app inferior se aleja con una animación.

Qué debes hacer

Mantén la navegación por gestos transparente y no agregues una pantalla 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.

Lo que no debes hacer

Coloca 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 que la IU importante se inserta.

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 más información para admitir cortes de pantalla en Compose.

Otras orientaciones

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.