La plataforma de Android es responsable de dibujar la IU del sistema, como la barra de estado y la barra de navegación. Esta IU del sistema se muestra independientemente de la app que use el usuario.
WindowInsets proporciona información sobre la IU del sistema para garantizar que tu app se dibuje en el área correcta y que la IU no esté oculta por la IU del sistema.
En Android 14 (nivel de API 34) y versiones anteriores, la IU de tu app no se dibuja debajo de las barras del sistema ni de los recortes de pantalla de forma predeterminada.
En Android 15 (nivel de API 35) y versiones posteriores, tu app se dibuja debajo de las barras del sistema y de los recortes de pantalla una vez que se orienta al SDK 35. Esto genera una experiencia del usuario más fluida y permite que tu app aproveche al máximo el espacio de la ventana disponible.
Mostrar contenido detrás de la IU del sistema se denomina ir de borde a borde. En esta página, aprenderás sobre los diferentes tipos de inserciones, cómo ir de borde a borde y cómo usar las APIs de inserción para animar tu IU y garantizar que el contenido de tu app no esté oculto por los elementos de la IU del sistema.
Conceptos básicos de las inserciones
Cuando una app va de borde a borde, debes asegurarte de que la IU del sistema no oculte el contenido y las interacciones importantes. Por ejemplo, si se coloca un botón detrás de la barra de navegación, es posible que el usuario no pueda hacer clic en él.
El tamaño de la IU del sistema y la información sobre dónde se coloca se especifican con inserciones.
Cada parte de la IU del sistema tiene un tipo de inserción correspondiente que describe su tamaño y dónde se coloca. Por ejemplo, las inserciones de la barra de estado proporcionan el tamaño y la posición de la barra de estado, mientras que las inserciones de la barra de navegación proporcionan el tamaño y la posición de la barra de navegación. Cada tipo de inserción consta de cuatro dimensiones de píxeles: superior, izquierda, derecha e inferior. Estas dimensiones especifican qué tan lejos se extiende la IU del sistema desde los lados correspondientes de la ventana de la app. Por lo tanto, para evitar la superposición con ese tipo de IU del sistema, la IU de la app debe insertarse en esa cantidad.
Estos tipos de inserciones integradas de Android están disponibles a través de WindowInsets:
Las inserciones que describen las barras de estado. Estas son las barras superiores de la IU del sistema que contienen íconos de notificaciones y otros indicadores. |
|
Las inserciones de la barra de estado cuando están visibles. Si las barras de estado están ocultas (debido a que se ingresó al modo de pantalla completa envolvente), las inserciones de la barra de estado principal estarán vacías, pero estas inserciones no lo estarán. |
|
Las inserciones que describen las barras de navegación. Estas son las barras de la IU del sistema en el lado izquierdo, derecho o inferior del dispositivo, que describen la barra de tareas o los íconos de navegación. Pueden cambiar en el tiempo de ejecución según el método de navegación preferido del usuario y la interacción con la barra de tareas. |
|
Las inserciones de la barra de navegación cuando están visibles. Si las barras de navegación están ocultas (debido a que se ingresó al modo de pantalla completa envolvente), las inserciones de la barra de navegación principal estarán vacías, pero estas inserciones no lo estarán. |
|
La inserción que describe la decoración de la ventana de la IU del sistema si está en una ventana de formato libre, como la barra de títulos superior. |
|
Las inserciones de la barra de leyendas cuando están visibles. Si las barras de leyendas están ocultas, las inserciones de la barra de leyendas principal estarán vacías, pero estas inserciones no lo estarán. |
|
La unión de las inserciones de la barra del sistema, que incluyen las barras de estado, las barras de navegación y la barra de leyendas. |
|
Las inserciones de la barra del sistema cuando están visibles. Si las barras del sistema están ocultas (debido a que se ingresó al modo de pantalla completa envolvente), las inserciones de la barra del sistema principal estarán vacías, pero estas inserciones no lo estarán. |
|
Las inserciones que describen la cantidad de espacio en la parte inferior que ocupa el teclado en pantalla. |
|
Las inserciones que describen la cantidad de espacio que ocupaba el teclado de software antes de la animación actual del teclado. |
|
Las inserciones que describen la cantidad de espacio que ocupará el teclado de software después de la animación actual del teclado. |
|
Un tipo de inserciones que describe información más detallada sobre la IU de navegación, lo que proporciona la cantidad de espacio en el que el sistema controlará los "toques" y no la app. Para las barras de navegación transparentes con navegación por gestos, se puede presionar algunos elementos de la app a través de la IU de navegación del sistema. |
|
Las inserciones de elementos que se pueden presionar cuando están visibles. Si los elementos que se pueden presionar están ocultos (debido a que se ingresó al modo de pantalla completa envolvente), las inserciones de elementos que se pueden presionar principales estarán vacías, pero estas inserciones no lo estarán. |
|
Las inserciones que representan la cantidad de inserciones en las que el sistema interceptará los gestos para la navegación. Las apps pueden especificar de forma manual el control de una cantidad limitada de estos gestos con |
|
Un subconjunto de los gestos del sistema que siempre controlará el sistema y que no se pueden inhabilitar con |
|
Las inserciones que representan la cantidad de espacio necesario para evitar la superposición con un recorte de pantalla (muesca o agujero). |
|
Las inserciones que representan las áreas curvas de una pantalla en cascada. Una pantalla en cascada tiene áreas curvas a lo largo de los bordes de la pantalla donde esta comienza a envolverse a lo largo de los lados del dispositivo. |
Estos tipos se resumen en tres tipos de inserciones "seguras" que garantizan que el contenido no esté oculto:
Estos tipos de inserciones "seguras" protegen el contenido de diferentes maneras, según las inserciones de la plataforma subyacente:
- Usa
WindowInsets.safeDrawingpara proteger el contenido que no se debe dibujar debajo de ninguna IU del sistema. Este es el uso más común de las inserciones: evitar dibujar contenido que esté oculto por la IU del sistema (ya sea parcial o completamente). - Usa
WindowInsets.safeGesturespara proteger el contenido con gestos. Esto evita que los gestos del sistema entren en conflicto con los gestos de la app (como los de las hojas inferiores, los carruseles o los juegos). - Usa
WindowInsets.safeContentcomo una combinación deWindowInsets.safeDrawingyWindowInsets.safeGesturespara garantizar que el contenido no tenga superposición visual ni de gestos.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Componentes y diseños de Material
- Migra
CoordinatorLayouta Compose - Otras consideraciones