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.

Ejemplo de recorte en modo vertical
Figura 1: Ejemplo de recorte en modo Retrato
Ejemplo de recorte en modo horizontal
Figura 2. Ejemplo de recorte en modo horizontal

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

De forma predeterminada, los recortes de pantalla se incluyen en la información de los recuadros de la ventana. Por este motivo, tu app no se dibujará en las áreas de corte de la pantalla cuando sigas la guía para hacer que tu app sea de borde a borde.

Por ejemplo, cuando usas Modifier.windowInsetsPadding(WindowInsets.safeContent) o Modifier.windowInsetsPadding(WindowInsets.safeDrawing), tu app no dibujará automáticamente en las áreas donde se coloca un recorte. WindowInsets.safeContent y WindowInsets.safeDrawing contienen información sobre el corte de la pantalla y no dibujarán donde está el corte del dispositivo.

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

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) {
            // Any composable inside here will avoid drawing behind cutouts
        }
    }
}
CutoutSnippets.kt

Para personalizar este comportamiento aún más, debes controlar la información de recorte por tu cuenta.

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

Puedes controlar los recortes de las siguientes maneras:

En Compose, se recomienda establecer windowLayoutInDisplayCutoutMode en default en tu tema general y, luego, aprovechar WindowInsets.displayCutout para controlar las inserciones en tus elementos componibles:

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

Este enfoque te permite respetar el padding de displayCutout cuando sea necesario o ignorarlo cuando no lo sea.

Como alternativa, puedes aplicar la misma configuración que se describe en la documentación de recorte de vistas si configuras el tema de la actividad android:windowLayoutInDisplayCutoutMode en otra opción o si configuras el atributo de ventana con window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT. Sin embargo, el modo de recorte se aplica a toda una actividad y no se puede controlar por elemento componible individual.

Para respetar el recorte de la pantalla en ciertos elementos componibles, pero no en otros, usa WindowInset.displayCutout. Esta API te permite acceder a la información de recorte cuando sea necesario.

Prácticas recomendadas

Cuando trabajes con recortes de pantalla, ten en cuenta lo siguiente:

  • Ten en cuenta la ubicación de los elementos críticos de la IU. No permitas que el área de corte oculte textos, controles o informaciones importantes.
  • No coloques ni extiendas en el área de corte ningún elemento interactivo que requiera reconocimiento táctil avanzado. La sensibilidad al tacto puede ser menor en el área de corte.
  • Cuando se sigue la guía de borde a borde, la información de recorte se incluye en los insertos safeDrawing o safeContent.
  • Siempre que sea posible, usa Modifier.windowInsetsPadding(WindowInsets.safeDrawing) para determinar el padding adecuado para tu contenido. Evita codificar la altura de la barra de estado, ya que eso puede generar contenido superpuesto o cortado.

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.
    cómo simular un corte de pantalla en el emulador
    Figura 3: Usa las Opciones para desarrolladores para probar cómo se renderiza tu contenido.