Entrada publicada por Dave Burke, vicepresidente de Ingeniería
Existen más de 250 millones de dispositivos de pantalla grande con Android, entre tablets, dispositivos plegables y dispositivos Chrome OS. Solo en los últimos 12 meses, hubo alrededor de 100 millones de activaciones nuevas de tablets Android, un crecimiento interanual del 20%. Al mismo tiempo, Chrome OS, que ahora es la plataforma de escritorio con el crecimiento más rápido, aumentó su volumen en un 92%. También se incrementó el uso de dispositivos plegables, que tuvo un crecimiento interanual de más del 265%. En total, hay más de 250 millones de dispositivos de pantalla grande activos con Android. Frente a este ritmo de crecimiento, continuamos invirtiendo para seguir mejorando el sistema operativo Android en estos dispositivos, tanto para usuarios como para desarrolladores.
Por lo tanto, hoy en Android Dev Summit, anunciamos una actualización de funciones para Android 12 diseñadas especialmente para pantallas grandes, a la que llamamos 12L. También presentamos nuevas API, herramientas y orientación a fin de facilitar la compilación para pantallas grandes. Además, debatimos sobre los cambios que haremos en Google Play para ayudar a los usuarios a descubrir con mayor facilidad las apps optimizadas para pantallas grandes. ¡Continúa leyendo y descubre las novedades para pantallas grandes en Android!
Hoy te mostraremos una versión preliminar para desarrolladores de 12L, nuestra próxima actualización de funciones que permite mejorar aún más Android 12 en pantallas grandes. Con la versión preliminar, puedes probar las nuevas funciones para pantallas grandes, optimizar tus apps y enviarnos tus comentarios.
En 12L perfeccionamos la IU en pantallas grandes mediante notificaciones, configuraciones rápidas, pantalla de bloqueo, descripción general, pantalla de inicio y mucho más. Por ejemplo, en pantallas de más de 600 dp el tono de la notificación, la pantalla de bloqueo y otras superficies del sistema cuentan con un nuevo diseño de dos columnas para aprovechar el área de la pantalla. También se optimizaron las apps del sistema.
Los diseños de dos columnas permiten mostrar más contenido y son más fáciles de usar
También logramos que la capacidad multitarea sea más potente e intuitiva: 12L incluye una nueva barra de tareas en pantallas grandes que permite que los usuarios cambien al instante sus apps favoritas sobre la marcha. Además, con la nueva barra de tareas, el modo de pantalla dividida es más visible que nunca. Para ejecutar una app en modo de pantalla dividida, solo debes arrastrarla y soltarla desde la barra de tareas. Para mejorar la experiencia del modo de pantalla dividida en Android 12 y versiones posteriores, ayudamos a los usuarios permitiendo de forma automática que todas las apps ingresen al modo de pantalla dividida, independientemente de que se pueda o no cambiar el tamaño de las apps.
Arrastra y suelta apps para verlas en el modo de pantalla dividida
Por último, realizamos mejoras visuales y de estabilidad en el modo de compatibilidad a fin de mejorar la experiencia de letterboxing para los usuarios y ayudar a que las apps se vean mejor de forma predeterminada. Logramos que los fabricantes de dispositivos puedan personalizar con facilidad el letterboxing. Ahora pueden establecer colores o tratamientos personalizados, ajustar la posición de la ventana insertada, aplicar esquinas redondeadas personalizadas y mucho más.
Planeamos lanzar la actualización de funciones de 12L a principios del año que viene, justo a tiempo para la próxima ola de tablets y dispositivos plegables con Android 12. Estamos trabajando con nuestros socios de OEM a fin de incorporar estas funciones a sus dispositivos de pantalla grande. No te pierdas la vista previa para desarrolladores de 12L, que llegará pronto a la tablet Lenovo P12 Pro. Ya que estas funciones llegarán a los dispositivos en los próximos meses, este es un buen momento para optimizar tus apps para pantallas grandes.
Recomendamos a los desarrolladores que vean cómo funcionan sus apps en el modo de pantalla dividida con ventanas de varios tamaños. Si aún no optimizaste tu app, puedes comprobar cómo se ven las diferentes orientaciones y probar los nuevos cambios en el modo de compatibilidad, si corresponde. Junto con las funciones de pantallas grandes, 12L también incluye nuevas API y nuevos niveles de API para desarrolladores. Tuvimos cuidado para no introducir cambios rotundos en las apps, por lo que no será necesario que aborden 12L para cumplir con los requisitos de Google Play.
Para dar los primeros pasos con 12L, descarga las imágenes y herramientas de sistema de Android Emulator 12L de la última versión preliminar de Android Studio. Revisa los cambios y funciones para saber qué áreas de la app debes probar y mira la descripción general de la versión preliminar de los detalles del cronograma y del lanzamiento. Puedes denunciar problemas o realizar solicitudes aquí y, como siempre, agradeceremos que nos envíes tus comentarios.
Si bien 12L también se utilizará en teléfonos, nos concentraremos en tablets y dispositivos plegables y Chrome OS, ya que la mayoría de las nuevas funciones no son visibles en pantallas más pequeñas. Más adelante en la vista previa, planeamos abrir las inscripciones de Android Beta para dispositivos Pixel. Descubre más información en developer.android.com/12L.
Es momento de comenzar a diseñar apps del todo adaptables para cualquier pantalla y hacerlo ahora es incluso más sencillo. Además de la vista previa para desarrolladores, lanzaremos actualizaciones de API, herramientas y guías a fin de prepararte para estos cambios en OS y Play.
El primer paso para poder admitir la IU adaptable es diseñar tu app de modo que se comporte bien tanto en una pantalla pequeña como en una grande. Estuvimos trabajando en una nueva guía de Material Design que te ayudará a escalar las IU de tus apps en todas las pantallas. La guía tiene información sobre patrones de diseño comunes que prevalecen en el ecosistema, y que te ayudarán a inspirarte y poner en marcha tus esfuerzos.
Patrones de IU adaptables en la guía de Material Design
Para brindar la mejor experiencia de navegación posible a tus usuarios, deberías brindar una IU de navegación que se adapte al tamaño de ventana del dispositivo del usuario. Los patrones de navegación recomendados incluyen el uso de una barra de navegación para pantallas compactas y un riel de navegación para dispositivos de ancho medio o más grandes (más de 600 dp). Para los dispositivos más anchos, incluimos varias ideas sobre diseños de pantalla más grandes dentro de nuestra nueva guía de Material Design, como una estructura de lista y detalle que se puede implementar usando SlidingPaneLayout. Consulta nuestra guía a fin de saber cómo implementar la navegación para IU adaptables en Views y Compose.
Aunque actualizar el patrón de navegación y utilizar SlidingPaneLayout es una gran manera de aplicar un diseño optimizado de pantalla grande a una app existente con fragmentos, sabemos que muchos desarrolladores tienen apps basadas en varias actividades. Para esas apps, las nuevas API de incorporación de actividades que lanzamos en Jetpack WindowManager 1.0 beta 03 facilitan la compatibilidad gracias a los nuevos paradigmas de IU, como la vista TwoPane. Estamos trabajando en la actualización de SlidingPaneLayout para admitir esas API. En los próximos meses, ya podrás disponer de esa actualización.
SlidingPaneLayout
Jetpack Compose facilita la creación para pantallas grandes y diseños diversos. Si recién comienzas a utilizar Compose, puedes aprovechar para optimizar también las pantallas grandes.
Compose es un kit de herramientas de IU expresivas. Se describe toda la IU en código y es fácil tomar decisiones en el tiempo de ejecución sobre cómo se debe adaptar al tamaño disponible. Por este motivo, Compose es una excelente herramienta para desarrollar IU adaptables, ya que es muy fácil manejar los cambios de IU en los diferentes tamaños o componentes de pantalla. La guía Compila diseños adaptables en Compose incluye los conceptos básicos que debes conocer.
La biblioteca Jetpack WindowManager brinda una forma compatible con versiones anteriores para trabajar con Windows en tu app y compilar una IU receptiva en todos los dispositivos. Aquí te presentamos las novedades.
Incorporación de actividades
La incorporación de actividades te permite aprovechar el área de visualización adicional de las pantallas grandes, ya que muestra varias actividades a la vez, como para el patrón de lista y detalle, y requiere poca refactorización de la app o incluso no la requiere. Puedes determinar cómo tus apps muestran las actividades (una al lado de la otra o en pilas) creando un archivo de configuración XML o realizando llamadas a la API de Jetpack WindowManager. El sistema se encarga de lo demás y determina la presentación según las configuraciones que creaste.
La incorporación de actividades funciona a la perfección en dispositivos plegables, ya que dispone actividades en pilas y las quita de ellas a medida que se pliega y despliega el dispositivo. Si tu app usa varias actividades, la incorporación puede mejorar la experiencia del usuario en dispositivos de pantalla grande. Prueba las API de incorporación de actividades en Jetpack WindowManager 1.0 beta 03 y versiones posteriores. Encontrarás más información aquí.
Incorporación de actividades con Jetpack WindowManager
Usa clases de tamaño de ventanas para detectar el tamaño de la tuya
Las clases de tamaño de ventanas son un conjunto de puntos de interrupción de viewport condicionados que te permiten diseñar, desarrollar y probar diseños de apps de tamaño ajustable. Hay tres categorías de puntos de interrupción de Windows Size Class: compactas, medias y expandidas. Se diseñaron con el objetivo específico de equilibrar la simplicidad del diseño con la flexibilidad de optimizar tu app para los casos de uso más exclusivos y, al mismo tiempo, representar una gran proporción de dispositivos en el ecosistema. Las API de Windows Size Class pronto estarán disponibles en Jetpack WindowManager 1.1 y facilitarán la creación de IU receptivas. Infórmate aquí.
Windows Size Classes en Jetpack WindowManager
Haz que tu app detecte los pliegues
WindowManager también brinda una superficie API común para diferentes funciones de ventana, como pliegues o bisagras. Cuando tu app detecta los pliegues, se puede adaptar el contenido de la ventana para evitar estos pliegues y bisagras, o aprovecharlos y usarlos como separadores naturales. Descubre cómo puedes hacer que tu app detecte los pliegues en esta guía.
Dispositivos de referencia
Dado que las apps de Android deben compilarse para responder y adaptarse a todos los dispositivos y categorías, presentamos dispositivos de referencia de Android Studio en muchas herramientas que utilizas para crear, desarrollar y probar la IU y el diseño. Los cuatro dispositivos de referencia representan los teléfonos, pantallas grandes interiores plegables, tablets y computadoras de escritorio. Los diseñamos luego de analizar los datos del mercado a fin de representar dispositivos populares o segmentos de rápido crecimiento. También te permiten asegurarte de que tu app funcione en combinaciones de puntos de interrupción populares con los nuevos puntos de interrupción de WindowSizeClass, y así poder garantizar que tu app cubra la mayor cantidad de casos de uso posible.
Definiciones de dispositivos de referencia
Validación del diseño
Si no te decides por dónde comenzar a adaptar tu IU para pantallas grandes, lo primero que debes hacer es utilizar nuevas herramientas para identificar problemas que puedan afectar a los dispositivos de pantalla grande. En Android Studio Chipmunk, trabajamos en una nueva herramienta visual que muestra de forma proactiva las advertencias y sugerencias de la IU en la validación del diseño, incluidos los dispositivos de referencia afectados.
Herramienta de validación del dispositivo con clases de dispositivos de referencia
Emulador de tamaño ajustable
Para probar tu app en el tiempo de ejecución, podemos utilizar la nueva configuración de emulador de tamaño ajustable de Android Studio Chipmunk. El emulador de tamaño ajustable te permite alternar con rapidez entre los cuatro dispositivos de referencia: teléfonos, dispositivos plegables, tablets y computadoras de escritorio. Esto simplifica la validación de tu diseño cuando lo creas y la comprobación del comportamiento en el tiempo de ejecución, ya que ambos usan los mismos dispositivos de referencia. Para crear un nuevo emulador de tamaño ajustable, usa el administrador de dispositivos de Android Studio, crea un nuevo dispositivo virtual y selecciona la definición de dispositivo de tamaño ajustable con la imagen del sistema Android 12L (Sv2).
Emulador de Android de tamaño ajustable
Con el objetivo de facilitar las mejores experiencias con las apps en tablets, dispositivos plegables y dispositivos Chrome OS, realizamos cambios en Play para destacar las apps que están optimizadas en los dispositivos.
Agregamos nuevas comprobaciones para evaluar la calidad de cada app según nuestras guías de calidad de apps para pantallas grandes con el objetivo de garantizar que aparezcan las mejores apps posibles en esos dispositivos. En cuanto a las apps que no están optimizadas para pantallas grandes, comenzaremos a advertir a los usuarios de pantallas grandes con un aviso en la página del listado de Play Store.
Además, presentaremos calificaciones de apps específicas para pantallas grandes, como anunciamos a principios de este año, a fin de que los usuarios puedan calificar el funcionamiento de tu app en los dispositivos de pantalla grande. Estos cambios se implementarán el año que viene, así que tienes tiempo para preparar tus apps.
Además, asegúrate de leer nuestra publicación que destaca cómo desarrollamos nuestro modelo de negocio para abordar las necesidades de los desarrolladores en Google Play.
Te ayudaremos a comenzar a compilar para pantallas grandes y dispositivos plegables, no importa si utilizas Views o Compose. Lanzaremos una nueva guía actualizada sobre cómo admitir diferentes tamaños de pantallas tanto en una app nueva como en una existente, cómo implementar la navegación para Views y Compose, cómo aprovechar los dispositivos plegables, y mucho más. Puedes consultarla en la sección de guías para pantallas grandes si necesitas asistencia con Views, o en la sección de guías de Compose.
Los códigos hablan por sí solos: actualizamos las siguientes muestras para admitir IU receptivas:
Para poner esto en práctica, consulta nuestro laboratorio de código actualizado de asistencia para dispositivos plegables y de doble pantalla con Jetpack WindowManager.