Cómo configurar la función de borde a borde

La visualización de borde a borde permite que tu app dibuje su IU detrás de las barras del sistema (la barra de estado, la barra de subtítulos y la barra de navegación) para lograr una experiencia del usuario más envolvente. Si tu app se orienta a dispositivos que ejecutan Android 15 (nivel de API 35) o versiones posteriores, se aplica el diseño de borde a borde de forma predeterminada.

Para mostrar correctamente el contenido de borde a borde en todas las versiones de Android, sigue estos pasos de configuración. Sin estos pasos, es posible que tu app dibuje colores sólidos detrás de las barras del sistema o que no anime su contenido de forma síncrona con las transiciones del teclado en pantalla (IME).

1. Habilita la pantalla de borde a borde

Para habilitar el diseño de borde a borde en versiones anteriores de Android, llama a enableEdgeToEdge() en tu método Activity.onCreate():

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    // ...
}

De forma predeterminada, enableEdgeToEdge() hace que las barras del sistema sean transparentes, excepto en el modo de navegación con 3 botones, en el que aplica un scrim translúcido a la barra de navegación para mejorar el contraste. El color de los íconos del sistema y la máscara se adaptan al tema claro u oscuro del sistema.

2. Configura windowSoftInputMode

Establece android:windowSoftInputMode="adjustResize" en la entrada AndroidManifest.xml de tu actividad. Este parámetro de configuración permite que tu app reciba inserciones de IME, lo que te permite ajustar tu diseño con padding cuando aparece o desaparece el teclado en pantalla.

<!-- In your AndroidManifest.xml file: -->
<activity
  android:name=".ui.MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:theme="@style/Theme.MyApplication"
  android:exported="true">
  ...
</activity>

3. Controla las superposiciones con inserciones

Una vez que se habilita el diseño de borde a borde, es posible que algunos elementos de la IU y el contenido de tu app se dibujen detrás de las barras del sistema. Para evitar que las barras del sistema oculten los elementos críticos o interactivos, o que se superpongan con los gestos del sistema, debes controlar las inserciones.

Las inserciones describen partes de la pantalla que se cruzan con la IU del sistema o los gestos del sistema. Los principales tipos de inserciones que se deben tener en cuenta para la visualización de borde a borde son los siguientes:

  • Inserciones de barras del sistema: Representan las áreas en las que se muestran las barras del sistema. Úsalas para evitar que las barras del sistema oculten la IU.
  • Inserciones de corte de pantalla: Representan áreas en las que existe un corte físico (como un recorte de cámara) en la pantalla del dispositivo.

En Compose, puedes controlar los elementos insertados con reglas, modificadores de padding o modificadores de tamaño de elementos insertados. Consulta Acerca de las inserciones de ventanas para obtener orientación detallada.

Temas avanzados

Ten en cuenta lo siguiente para casos de uso más avanzados de borde a borde.

Modo envolvente

Algunos tipos de contenido, como los videos o los mapas, se benefician de una experiencia completamente inmersiva en la que se ocultan las barras del sistema. Puedes ocultar las barras del sistema con WindowInsetsControllerCompat:

val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars())

Colores e íconos de la barra del sistema

Cuando se usa el modo de borde a borde, es posible que el fondo de la app se vea detrás de las barras del sistema, por lo que tal vez debas ajustar los colores de los íconos de la barra del sistema para mejorar el contraste.

Para cambiar los íconos de la barra de estado a claros u oscuros, usa WindowInsetsControllerCompat:

// Set status bar icons to dark.
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = true

// Set status bar icons to light.
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

Protección de la barra del sistema

Si bien enableEdgeToEdge() proporciona barras del sistema transparentes o translúcidas de forma predeterminada, es posible que debas personalizarlas. Consulta la guía de diseño de las barras del sistema Android y la guía de diseño de borde a borde para decidir cuándo usar barras transparentes o translúcidas.

Para que la barra de navegación de 3 botones sea completamente transparente en lugar de traslúcida, puedes inhabilitar la aplicación de contraste:

window.isNavigationBarContrastEnforced = false

Para obtener más información, consulta Acerca de la protección de la barra del sistema.

Siguiente
Acerca de WindowInsetsRulers