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, y pantallas plegadas y desplegadas de dispositivos plegables.
Una breve lista de parámetros de configuración y APIs te permite compilar apps adaptativas. Sin embargo, algunos parámetros de configuración y APIs obsoletos son incompatibles con las apps adaptativas y se deben evitar.
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 Compatibilidad con el modo multiventana.
Habilita tu app para que participe en situaciones de multiventana y multitarea para aumentar 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, no te preocupes, ya que es true de forma predeterminada en Android 7.0 (nivel de API 24) y versiones posteriores.
No establezcas 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 adaptativas admiten la orientación vertical y horizontal, independientemente del tamaño de la pantalla o el modo de renderización en ventanas.
El parámetro de configuración del manifiesto screenOrientation restringe la orientación de la actividad.
Elimina el parámetro de configuración screenOrientation del manifiesto de tu app.
Bloquear la orientación de las apps no impide los cambios de tamaño de la ventana. Las apps cambian de tamaño 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 escritorio. Tu app debe admitir cambios en el tamaño de la ventana, independientemente del parámetro de configuración del atributo screenOrientation.
No restringe la orientación de la actividad. Las apps que bloquean la orientación se muestran en formato letterbox en dispositivos con pantallas grandes y tamaños de ventana incompatibles.
Las apps con formato de buzón están sujetas a una menor visibilidad en Google Play para tablets, dispositivos plegables y dispositivos ChromeOS.
Relación de aspecto
A medida que varían los tamaños de pantalla y ventana, también lo hacen sus relaciones de aspecto, desde altas y estrechas hasta cuadradas, y cortas y anchas.
Los parámetros de configuración del manifiesto minAspectRatio y maxAspectRatio restringen 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 tu app. También puedes asegurarte de que tu app se 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 tu app se ejecuta en una pantalla o en una ventana que tiene una relación de aspecto incompatible con la de la app, esta se mostrará en 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 llenar 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. Adapta tu app cambiando 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 según 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 de Compose Material 3 Adaptive. Para obtener más información, consulta Cómo compilar apps adaptables.
No ignores la utilidad de las definiciones de clases 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 que están obsoletas para determinar el tamaño de la ventana:
getSize(): Se dejó de usar en Android 11 (nivel de API 30)getMetrics(): Se dejó de usar en Android 11 (nivel de API 30)getRealSize(): Se dejó de usar en Android 12 (nivel de API 31)getRealMetrics(): Se dejó de usar en Android 12 (nivel de API 31)
Redactar
Jetpack Compose está diseñado para el desarrollo de IU adaptables. No hay archivos XML ni 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 día con las funciones y versiones más recientes.
No dependas de tecnología obsoleta. No permitas que tu app quede obsoleta.
Biblioteca de Compose Material 3 Adaptive
La biblioteca de Compose Material 3 Adaptive proporciona componentes y APIs que facilitan el desarrollo de apps adaptativas.
Usa las siguientes APIs para que tu app sea adaptable:
NavigationSuiteScaffold: Cambia entre la barra de navegación y el riel de navegación según la clase de tamaño de la ventana de la app.ListDetailPaneScaffold: Implementa el diseño canónico de lista y 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 beneficios de productividad para desarrolladores que ofrecen 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 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, intercambia la barra de navegación inferior que se usa en tamaños de ventana compactos por un riel de navegación vertical en ventanas medianas y expandidas. Se reposicionaron los diálogos para que se puedan alcanzar en todas las pantallas.
Organiza el contenido en paneles para habilitar diseños de varios paneles, como el de lista y detalles, y el panel complementario para las pantallas de contenido dinámico.
Si no usas paneles de contenido, no estires los elementos de la IU para que ocupen el espacio de pantalla 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 supongas 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 adaptativas admiten teclados, mouses y lápices ópticos 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 tabulador del teclado y los clics, la selección y el desplazamiento con el mouse o el panel táctil. Publica las combinaciones de teclas de tu app en el Asistente de combinaciones de teclas.
Usa la biblioteca de Material 3 de Jetpack para permitir que los usuarios escriban en cualquier componente TextField con un lápiz stylus.
No imposibilites los métodos de entrada alternativos. No introducir problemas de accesibilidad
Resumen
- Cómo compilar tu app con Compose y la biblioteca adaptable de Material 3
- Cómo basar los diseños en las clases de tamaño de ventana
- Crea diseños multipanel
- Crea una app de tamaño variable
- Nunca bloquear 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 en los que las personas confían todos los días.
✗ No esperes. ¡Comienza hoy!