La pantalla 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 título y la barra de navegación) para lograr una experiencia del usuario más envolvente. Si segmentas dispositivos que ejecutan Android 15 (nivel de API 35) o versiones posteriores, el borde a borde se aplica 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 borde a borde en versiones anteriores de Android, llama a
enableEdgeToEdge() en tu Activity.onCreate() método:
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 una superposición translúcida a la barra de navegación para obtener un mejor contraste. El color de los íconos del sistema y la superposición se adapta 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 relleno 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 borde a borde, es posible que parte del contenido y los elementos de la IU de tu app se dibujen detrás de las barras del sistema. Para evitar que las barras del sistema oculten 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 pantalla de borde a borde son los siguientes:
- Inserciones de barras del sistema: Representan á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 una muesca de cámara) en la pantalla del dispositivo.
En Compose, puedes controlar las inserciones con reglas, modificadores de relleno o modificadores de tamaño de inserción. Consulta Acerca de las inserciones de ventana para obtener instrucciones detalladas.
Temas avanzados
Considera lo siguiente para casos de uso más avanzados de borde a borde.
Modo envolvente
Algunos contenidos, como videos o mapas, se benefician de una experiencia completamente envolvente 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()) For example, use either `Scaffold`,
Íconos y colores de la barra del sistema
Cuando usas el borde a borde, es posible que el fondo de tu app sea visible detrás de las barras del sistema, por lo que es posible que debas ajustar los colores de los íconos de la barra del sistema para obtener un mejor contraste.
Para cambiar los íconos de la barra de estado a claro u oscuro, 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 predeterminadas, es posible que debas personalizar esto. Consulta la guía de diseño de barras del sistema de Android y la guía de diseño de borde a borde para decidir cuándo usar barras transparentes en lugar de translúcidas.
Para que la barra de navegación con 3 botones sea completamente transparente en lugar de translúcida, puedes inhabilitar la aplicación del contraste:
window.isNavigationBarContrastEnforced = false
Para obtener más información, consulta Acerca de la protección de la barra del sistema.
Diálogos
Para mostrar diálogos de pantalla completa de borde a borde, llama a WindowCompat.enableEdgeToEdge en el método onStart() del diálogo:
class MyAlertDialogFragment : DialogFragment() {
override fun onStart(){
super.onStart()
dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
}
...
}