Cómo brindar compatibilidad con cortes de pantalla

Prueba el estilo de Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Aprende a trabajar con cortes de pantalla en Compose.

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

Android admite cortes de pantalla en dispositivos que ejecutan 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 este documento, se describe cómo implementar la compatibilidad con dispositivos con cortes, 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.

Imagen que muestra un ejemplo de corte de pantalla en la parte superior central
Figura 1: 1 Corte de pantalla.

Elige cómo administra tu app las áreas de corte

Si no deseas que tu contenido se superponga con un área de corte, en general, es suficiente para asegurarte de que no se superponga con la barra de estado ni con la barra de navegación. Si renderizas en el área de corte, usa WindowInsetsCompat.getDisplayCutout() para recuperar un objeto DisplayCutout que contenga las inserciones seguras y el cuadro de límite para cada corte. Estas APIs te permiten verificar si tu contenido se superpone con el corte para que puedas cambiar la posición si es necesario.

También puedes determinar si el contenido se distribuye detrás del área de corte. El atributo de diseño de la ventana layoutInDisplayCutoutMode controla cómo se dibuja tu contenido en el área de corte. Puedes establecer layoutInDisplayCutoutMode en uno de los siguientes valores:

Puedes configurar el modo de corte de manera programática o estableciendo un estilo en tu actividad. En el siguiente ejemplo, se define un estilo para aplicar el atributo LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES a la actividad.

<style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    shortEdges <!-- default, shortEdges, or never -->
  </item>
</style>

En las siguientes secciones, se describen los diferentes modos de corte con más detalle.

Comportamiento predeterminado

De forma predeterminada, en el modo vertical sin marcas especiales configuradas, se cambia el tamaño de la barra de estado en un dispositivo con corte para que sea al menos tan alta como el corte, y tu contenido se muestra en el área que aparece debajo. En el modo horizontal o de pantalla completa, la ventana de tu app tiene formato letterbox para que no aparezca ningún contenido en el área de corte.

Procesa contenido en áreas de corte del borde corto

Para cierto contenido, como videos, fotos, mapas y juegos, la renderización en el área de corte puede ser una excelente manera de proporcionar una experiencia más envolvente a los usuarios. Con LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES, el contenido se extiende al área de corte en el borde corto de la pantalla tanto en modo vertical como horizontal, independientemente de si las barras del sistema están ocultas o visibles. Cuando uses este modo, asegúrate de que ningún contenido importante se superponga con el área de corte.

La siguiente imagen es un ejemplo de LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES para un dispositivo en posición vertical:

Una imagen que muestra el contenido que se renderiza en el área de corte mientras se usa el modo vertical
Figura 2: Renderización de contenido en el área de corte en modo vertical

La siguiente imagen es un ejemplo de LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES para un dispositivo en orientación horizontal:

Una imagen que muestra la renderización de contenido en el área de corte mientras se usa el modo horizontal
Figura 3: Renderización de contenido en el área de corte mientras se usa el modo horizontal

En este modo, la ventana se extiende por cortes en el borde corto de la pantalla, tanto en modo vertical como horizontal, independientemente de si la ventana oculta las barras del sistema.

Se considera que un corte en la esquina está en el borde corto:

Imagen de un dispositivo con un corte de esquina
Figura 4: Un dispositivo con un corte de esquina.

Nunca proceses contenido en el área de corte de la pantalla

Con LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER, la ventana nunca puede superponerse con el área de corte.

A continuación, se muestra un ejemplo de LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER en orientación vertical:

Una imagen que muestra LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER para el retrato
Figura 5: Ejemplo de LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER para el modo vertical.

El siguiente es un ejemplo de LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER en modo horizontal:

Una imagen que muestra LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER para la orientación horizontal
Figura 6: Ejemplo de LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER en modo horizontal.

Prácticas recomendadas para admitir el corte de pantalla

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

  • Ten en cuenta la ubicación de elementos fundamentales de la IU. No permitas que el área de corte oculte texto, controles ni otra información importante.
  • No coloques ni extiendas en el área de corte ningún elemento interactivo que requiera reconocimiento táctil. La sensibilidad táctil puede ser menor en el área de corte.
  • Cuando sea posible, usa WindowInsetsCompat para recuperar la altura de la barra de estado y determinar el padding apropiado que se aplicará a tu contenido. Evita codificar la altura de la barra de estado, ya que esto puede generar contenido superpuesto o cortado.

    Una imagen que muestra contenido cortado en la parte superior por una configuración incorrecta de las inserciones
    Figura 7: Usa WindowInsetsCompat para evitar la superposición o corte de contenido.
  • Usa View.getLocationInWindow() a fin de determinar cuánto espacio de ventana usa tu app. No supongas que la app usa toda la ventana ni View.getLocationOnScreen().

  • Usa los modos de corte shortEdges o never si tu app necesita entrar al modo envolvente y salir de él. El comportamiento de corte predeterminado puede hacer que el contenido de tu app se renderice en el área de corte mientras las barras del sistema están presentes, pero no en el modo envolvente. De esta manera, el contenido se mueve hacia arriba y hacia abajo durante las transiciones, como se muestra en el siguiente ejemplo.

    Una imagen que muestra contenido que se mueve hacia arriba y hacia abajo durante las transiciones.
    Figura 8: Ejemplo de contenido que se mueve hacia arriba y hacia abajo durante las transiciones.
  • En el modo envolvente, ten cuidado cuando uses coordenadas de ventana frente a pantalla, ya que tu app no usa toda la pantalla cuando está en formato letterbox. Debido al formato letterbox, las coordenadas del origen de la pantalla no son las mismas que las coordenadas del origen de la ventana. Puedes transformar las coordenadas de la pantalla en las coordenadas de la vista según sea necesario con getLocationOnScreen(). En la siguiente imagen, se muestra cómo difieren las coordenadas cuando el contenido está en formato letterbox:

    Imagen que muestra las coordenadas de la ventana frente a la pantalla cuando el contenido está en formato letterbox.
    Figura 9: Coordenadas de ventana frente a pantalla cuando el contenido está en formato letterbox.
  • Cuando controles MotionEvent, usa MotionEvent.getX() y MotionEvent.getY() para evitar problemas de coordenadas similares. No uses MotionEvent.getRawX() ni MotionEvent.getRawY().

Prueba cómo se procesa tu contenido

Prueba todas las pantallas y experiencias de tu app. Si es posible, realiza pruebas en dispositivos con diferentes tipos de cortes. Si no tienes un dispositivo con un corte, puedes simular las configuraciones de corte comunes en cualquier dispositivo o emulador que ejecute Android 9 o versiones posteriores de la siguiente manera:

  1. Habilita las 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.

    Imagen que muestra cómo simular un corte de pantalla en el emulador
    Figura 10: Opciones para desarrolladores para probar cómo se procesa tu contenido

Recursos adicionales