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 de borde a borde

Conclusiones

  • Dibuja el fondo y el contenido de desplazamiento debajo de las barras del sistema para obtener una experiencia de borde a borde.
  • Evita agregar gestos de presionar o arrastrar objetivos debajo de las inserciones del sistema, ya que entran en conflicto con la navegación de pantalla completa y por gestos.
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 obtener una experiencia envolvente.

Una app puede abordar las superposiciones de contenido reaccionando a las inserciones. Las inserciones describen cuánto relleno debe tener 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 diseño de 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 pantalla completa:

  • Las inserciones de la barra del sistema se aplican a la IU que se puede presionar y que las barras del sistema no deben ocultar visualmente.
  • 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 hacia la superficie de la pantalla, como el corte de la cámara.

Consideraciones sobre la barra de estado

Consulta las barras del sistema 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 de la app superiores deben contraerse mientras se desplaza la pantalla. Obtén información para contraer la TopAppBar de Material 3. En Material 3, las barras de la app superiores pequeñas se pueden contraer a la altura de la barra de estado o desplazarse fuera de la pantalla. Las barras de la app superiores medianas y grandes se pueden contraer a una barra de la app más pequeña. Consulta la [guía de Material][10].

Qué debes hacer

Contraer 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 que coincida 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 lograrlo, primero haz que una IU desplazable sea 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 translúcida. Para ello, realiza una de las siguientes acciones:

  • Confía en la protección automática de TopAppBar de Material 3 cuando se desplaza, si corresponde.
  • Crea un elemento componible de gradiente personalizado o usa GradientProtection para las vistas. 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.

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

Lo que debes evitar

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

Qué debes hacer

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

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

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

No apiles las 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

[BottomAppBar][10] debería contraerse mientras se desplaza con el parámetro scrollBehavior.

Qué debes hacer

Se agregó una máscara de barra del sistema para la navegación con tres botones cuando se oculta la barra de la app inferior.

Qué debes hacer

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

Sin embargo, mantén [NavigationBar]11 visible mientras te desplazas, ya que no tiene un parámetro scrollBehavior.

Cortes de pantalla

Los cortes de pantalla pueden afectar el aspecto de tu 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 los márgenes de corte de pantalla.

Lo que debes evitar

Colocar elementos críticos de la IU en el borde de la pantalla

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

Figura 5: Los fondos de la barra de la app de color sólido 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 información para admitir cortes de pantalla en Compose.

Otras instrucciones

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.