Recortes en Compose

Un corte de pantalla es un área en algunos dispositivos que se extiende a la superficie de la pantalla. Permite una experiencia de borde a borde y, al mismo tiempo, proporciona espacio para sensores importantes en la parte frontal del dispositivo.

Android admite cortes de pantalla en dispositivos con Android 9 (nivel de API 28) y versiones posteriores. Sin embargo, los fabricantes de dispositivos también pueden admitir cortes de pantalla en dispositivos con Android 8.1 o versiones anteriores.

En esta página, se describe cómo implementar la compatibilidad con dispositivos con cortes en Compose, incluido cómo trabajar con el área de corte, es decir, el rectángulo de borde a borde en la superficie de la pantalla que contiene el corte.

Caso predeterminado

Las apps que se orientan al nivel de API 34 o versiones anteriores, o las actividades que no llaman a enableEdgeToEdge, no dibujarán en la región del corte de forma predeterminada, a menos que la app dibuje en una barra del sistema que contenga el corte de pantalla.

Las apps que se orientan al nivel de API 35 o versiones posteriores en dispositivos que ejecutan Android 15 o versiones posteriores, o las actividades que llaman a enableEdgeToEdge, dibujan en la región recortada.

En otras palabras, LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT, LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES y LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER se interpretan como LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS para ventanas no flotantes en apps orientadas al nivel de API 35 o versiones posteriores en dispositivos con Android 15 o versiones posteriores.

Cómo controlar la información de recortes de forma manual

Debes controlar la información de corte para evitar que el área de corte oculte texto, controles o elementos interactivos importantes que requieran reconocimiento de tacto preciso (la sensibilidad al tacto puede ser menor en el área de corte). Cuando controles los recortes, no codifiques la altura de la barra de estado, ya que eso puede generar contenido superpuesto o cortado. En su lugar, controla los recortes de una de las siguientes maneras:

• Usa WindowInsets.displayCutout, WindowInsets.safeContent o WindowInsets.safeDrawing.

• Cómo acceder al objeto Path recortado con LocalView.current.rootWindowInsets.displayCutout

En el caso de Compose, te recomendamos que uses displayCutout, safeContent o safeDrawing para controlar los recortes en tus elementos componibles. Este enfoque te permite respetar el padding del recorte de la pantalla cuando sea necesario o ignorarlo cuando no sea necesario.

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}
CutoutSnippets.kt

Prueba cómo se renderiza tu contenido con recortes

Asegúrate de probar todas las pantallas y experiencias de tu app. Si es posible, pruébalas en dispositivos con diferentes tipos de cortes. Si no tienes un dispositivo con un corte, puedes simular algunas configuraciones de corte comunes en cualquier dispositivo o emulador que ejecute Android 9 o versiones posteriores. Para ello, haz lo siguiente:

1. Habilita Opciones para desarrolladores.
2. En la pantalla Opciones para desarrolladores, desplázate hacia abajo hasta la sección Dibujo y selecciona Simular una pantalla con un corte.
3. Selecciona el tipo de corte.