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 subtítulos y la barra de navegación) para lograr una experiencia del usuario más envolvente. Si segmentas tu app para dispositivos que ejecutan Android 15 (nivel de API 35) o versiones posteriores, se aplicará el modo 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. Si no sigues 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 modo 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 una capa traslúcida a la barra de navegación para mejorar el contraste. El color de los íconos del sistema y la cortinilla se adaptan al tema claro u oscuro del sistema.
2. Cómo configurar 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. Cómo controlar las superposiciones con inserciones
Una vez que se habilite la función 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 elementos interactivos o críticos, 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 borde a borde son los siguientes:
- Inserciones de barras del sistema: Representan las áreas en las que se muestran las barras del sistema. Úsalos 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 padding o modificadores de tamaño de inserción. Consulta Acerca de las inserciones de ventanas para obtener orientación detallada.
Temas avanzados
Considera lo siguiente para casos de uso de borde a borde más avanzados.
Modo envolvente
Algunos contenidos, como los videos o los 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`,
Colores e íconos de la barra del sistema
Cuando se usa el modo de pantalla completa, es posible que el fondo de la app se vea detrás de las barras del sistema, por lo que es posible que debas ajustar los colores de los íconos de las barras 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 predeterminadas transparentes o traslúcidas, es posible que debas personalizarlas. Consulta la guía de diseño de las 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 de 3 botones sea completamente transparente en lugar de traslú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) }
}
...
}