Las apps adaptables admiten pantallas de todos los tamaños: toda la pantalla del dispositivo, ventanas que pueden cambiar de tamaño en el modo multiventana, orientaciones vertical y horizontal, pantallas plegadas y desplegadas de dispositivos plegables.
Una lista breve de parámetros de configuración y APIs te permite compilar apps adaptativas. Sin embargo, algunos parámetros de configuración y APIs desactualizados son incompatibles con las apps adaptables y deben evitarse.
Capacidad de cambio de tamaño
Las apps adaptables admiten el cambio de tamaño de la app y el modo multiventana.
El atributo resizeableActivity de los elementos de manifiesto <activity> y <application> habilita o inhabilita el modo multiventana en Android 11 (nivel de API 30) y versiones anteriores. En Android 12 (nivel de API 31) y versiones posteriores, las pantallas grandes admiten el modo multiventana, independientemente del atributo. Para obtener más información, consulta Cómo admitir el modo multiventana.
Habilita que tu app participe en situaciones de multiventana y multitarea para mejorar la productividad y la satisfacción de los usuarios.
Establece resizeableActivity="true" si tu app se orienta a niveles de API inferiores a 24. De lo contrario, olvídate de este parámetro, ya que es true de forma predeterminada en Android 7.0 (nivel de API 24) y versiones posteriores.
No configures resizeableActivity="false" para ningún nivel de API. No excluyas tu app de los casos de uso que involucran el modo multiventana.
Orientación
Las apps adaptables admiten la orientación vertical y horizontal, independientemente del tamaño de la pantalla o del modo de ventana.
La configuración del manifiesto screenOrientation restringe la orientación de la actividad.
Elimina la configuración de screenOrientation del manifiesto de tu app.
El bloqueo de la orientación de las apps no impide los cambios de tamaño de la ventana. El tamaño de las apps cambia cuando entran en el modo multiventana, cuando se pliega o despliega un dispositivo, o cuando se cambia el tamaño de una ventana de tipo de escritorio. Tu app debe admitir cambios en el tamaño de la ventana, independientemente de la configuración del atributo screenOrientation.
No restrinjas la orientación de la actividad. Las apps que bloquean la orientación tienen formato letterbox en dispositivos con pantallas grandes y tamaños de ventana incompatibles.
Las apps con formato letterbox tienen una visibilidad menor en Google Play para tablets, dispositivos plegables y ChromeOS.
Relación de aspecto
A medida que varían los tamaños de la pantalla y la ventana, también lo hacen sus relaciones de aspecto, desde alta y estrecha, cuadrada, hasta corta y ancha.
La configuración del manifiesto minAspectRatio y maxAspectRatio restringe la relación de aspecto de tu app a valores codificados.
Adapta tu app para que se ajuste a la pantalla, independientemente de las dimensiones relativas.
Elimina la configuración de minAspectRatio y maxAspectRatio del manifiesto de la app. O bien asegúrate de que tu app pueda cambiar de tamaño y que la relación de aspecto se ajuste automáticamente (consulta la sección Cambio de tamaño).
No intentes controlar las dimensiones relativas de tu app. Si esta se ejecuta en una pantalla o en una ventana que tiene una relación de aspecto incompatible con la de la app, se aplica el formato letterbox.
En Android 14 (nivel de API 34) y versiones posteriores, los usuarios pueden anular la relación de aspecto de la app para expandir las apps en formato letterbox y que ocupen todo el área de visualización disponible. Consulta Modo de compatibilidad del dispositivo.
Tamaño de la ventana
La premisa central del diseño adaptable es optimizar los diseños para diferentes tamaños de pantalla. Las apps adaptables se enfocan en el tamaño de la ventana de la app en lugar del tamaño de la pantalla del dispositivo. Cuando la app está en pantalla completa, la ventana de la app es la pantalla del dispositivo.
Las clases de tamaño de ventana proporcionan una forma sistemática de determinar y categorizar el tamaño de la ventana de la app. Para adaptar tu app, cambia los diseños a medida que cambia la clase de tamaño de ventana de tu app.
Evalúa el tamaño de la ventana de tu app en función de las clases de tamaño de ventana.
Para determinar la clase de tamaño de ventana, usa la función de nivel superior currentWindowAdaptiveInfo() de la biblioteca adaptable de Material 3 de Compose. Para obtener más información, consulta Cómo compilar apps adaptables.
No ignores la utilidad de las definiciones de clase de tamaño de ventana y las APIs integradas. No uses APIs obsoletas para calcular el tamaño de la ventana.
APIs obsoletas
Las APIs de plataformas anteriores no miden correctamente la ventana de la app; algunas miden la pantalla del dispositivo y otras excluyen la decoración del sistema.
Usa WindowManager#getCurrentWindowMetrics() y WindowMetrics#getBounds() para obtener el tamaño de la ventana de la app. Usa WindowMetrics#getDensity() para obtener la densidad de pantalla.
No uses las siguientes APIs de Display obsoletas para determinar el tamaño de la ventana:
getSize(): Dejó de estar disponible en Android 11 (nivel de API 30).getMetrics(): Dejó de estar disponible en Android 11 (nivel de API 30).getRealSize(): Se dio de baja en Android 12 (nivel de API 31).getRealMetrics(): Se dio de baja en Android 12 (nivel de API 31).
Compose
Jetpack Compose está diseñado para el desarrollo de IU adaptable. No hay XML, ni archivos de diseño ni calificadores de recursos. Solo elementos componibles sin estado basados en Kotlin, como Column, Row y Box, que describen tu IU, y modificadores, como offset, padding y size, que agregan comportamiento a los elementos de la IU.
Compila con Compose. Mantente al tanto de las funciones y versiones más recientes.
No dependas de la tecnología obsoleta. No dejes que tu app se vuelva obsoleta.
Biblioteca adaptable de Compose Material 3
La biblioteca de Compose Material 3 Adaptive proporciona componentes y APIs que facilitan el desarrollo de apps adaptables.
Usa las siguientes APIs para que tu app sea adaptable:
NavigationSuiteScaffold: Alterna entre la barra de navegación y el riel de navegación según la clase de tamaño de ventana de la app.ListDetailPaneScaffold: Implementa el diseño canónico de lista-detalles. Adapta el diseño al tamaño de la ventana de la app.SupportingPaneScaffold: Implementa el diseño canónico del panel de asistencia.
No es necesario reinventar la rueda. No te pierdas los aumentos de productividad de los desarrolladores que proporcionan todas las bibliotecas de Jetpack Compose.
Diseños
Los usuarios esperan que las apps aprovechen al máximo el espacio de visualización disponible con contenido complementario o controles mejorados.
Las apps adaptables optimizan los diseños en función de los cambios en la pantalla, en particular, los cambios en el tamaño de la ventana de la app o los cambios en la posición del dispositivo.
Cambia los componentes de la IU a medida que cambia el tamaño de la ventana para aprovechar el espacio de visualización disponible. Por ejemplo, cambia la barra de navegación inferior que se usa en los tamaños de ventana compactos por un riel de navegación vertical en las ventanas medianas y expandidas. Se reubicaron los diálogos para que se puedan acceder a ellos en todas las pantallas.
Organiza el contenido en paneles para habilitar diseños de varios paneles, como la lista de detalles y el panel complementario para las pantallas de contenido dinámico.
Si no usas paneles de contenido, no solo estires los elementos de la IU para llenar el espacio de visualización disponible. Las líneas de texto largas son difíciles de leer. Los botones estirados se ven mal diseñados. Si usas Modifier.fillMaxWidth, no asumas que ese es el comportamiento correcto para todos los tamaños de pantalla.
Dispositivos de entrada
Los usuarios no solo usan pantallas táctiles para interactuar con las apps.
Las apps adaptables admiten teclados, mouse y plumas stylus externos para proporcionar una experiencia del usuario mejorada y ayudar a los usuarios a ser más productivos en factores de forma de todo tipo.
Aprovecha la funcionalidad integrada del framework de Android para la navegación con pestañas del teclado y el clic, la selección y el desplazamiento del mouse o el panel táctil. Publica las combinaciones de teclas de tu app en Keyboard Shortcuts Helper.
Usa la biblioteca de Material 3 de Jetpack para permitir que los usuarios escriban en cualquier componente TextField con una pluma stylus.
No hagas imposibles los métodos de entrada alternativos. No generes problemas de accesibilidad.
Resumen
- Compila tu app con Compose y la biblioteca de Material 3 Adaptive
- Cómo basar los diseños en clases de tamaño de ventana
- Crea diseños de varios paneles
- Crea una app de tamaño variable
- Nunca bloquees la orientación de la actividad
- No restringir la relación de aspecto
- Admite entradas que no sean táctiles
- Evita las APIs obsoletas
✓ Haz lo que esperan tus usuarios: Optimiza tu app para la diversidad de dispositivos que las personas usan todos los días.
✗ No esperes. ¡Comienza hoy!