Más información sobre dispositivos plegables

Los dispositivos plegables ofrecen una oportunidad para desarrollar apps innovadoras. Las pantallas grande y pequeña del mismo dispositivo ofrecen experiencias interactivas complementarias, pero distintas. Las funciones de plegado, como la posición de mesa y la posición de libro, permiten usar diseños imaginativos e interfaces de usuario poco convencionales.

Figura 1: Dispositivo plegable en varias posiciones: plegado, abierto y plano, abierto y plano rotado en modo horizontal, y semiabierto (para mesa).

Diseño responsivo/adaptable

La compatibilidad con dispositivos plegables comienza con un diseño responsivo. Los diseños responsivos permiten que una app se vea y funcione bien en una variedad de tamaños de pantalla, incluidas las pantallas plegadas y desplegadas de un dispositivo plegable. Para diseños basados en vistas, implementa un diseño responsivo con ConstraintLayout; para Compose, BoxWithConstraints.

Sin embargo, a veces, el diseño debe adaptarse. Las diferencias en el tamaño de la pantalla y la relación de aspecto de las pantallas plegadas y desplegadas pueden ser bastante grandes, por lo que incluso un diseño responsivo puede no adaptarse a ambas pantallas de manera óptima. El diseño adaptable crea alternativas optimizadas para diferentes tamaños y configuraciones de pantalla. Los diseños adaptables proporcionan una experiencia del usuario optimizada cuando se pliega o despliega un dispositivo plegable en orientación horizontal o vertical, o bien en posición de mesa o libro.

Por ejemplo, un dispositivo plegable de pantalla grande desplegado en orientación horizontal es como una tablet; un diseño de doble panel con riel de navegación permite aprovechar la pantalla panorámica de forma excelente. Plegado, el dispositivo es similar a un teléfono estándar. Un diseño de una sola columna con una barra de navegación inferior es simple, pero eficaz. Debido a que los diseños son independientes, puedes optimizar cada uno para su caso de uso específico.

Animación que muestra cómo un dispositivo plegable se pliega hacia adentro y se despliega hacia afuera.
Figura 2. Diseños adaptables optimizados para pantallas plegadas y desplegadas.

Los dispositivos plegables se pliegan de diversas maneras, por ejemplo, hacia adentro, con la pantalla doblada en el interior del dispositivo, o hacia afuera, con la pantalla cubierta por el dispositivo. El diseño responsivo o adaptable prepara tu app para admitir todos los tipos de factores de forma plegables.

Si quieres obtener más información sobre el diseño responsivo o adaptable para dispositivos plegables, consulta lo siguiente:

Estados y posturas plegables

El pliegue de un dispositivo plegable divide la pantalla en dos partes. Puede ser un área flexible de la pantalla o, en dispositivos con pantalla doble, una bisagra que separe las dos pantallas.

El pliegue tiene una dimensión y una propiedad occlusionType, que define si el pliegue oculta parte de la pantalla. En dispositivos con pantalla doble, el objeto occlusionType es FULL, pero no se puede ver contenido en el área plegable (bisagra), aunque una app pueda abarcar ambas pantallas.

Los dispositivos plegables pueden estar en varios estados plegados, como FLAT (completamente abierto) o HALF_OPENED (en algún lugar entre completamente abierto y totalmente cerrado).

Figura 3: Dispositivo plegable en estado plano y semiabierto.

Cuando un dispositivo se encuentra en el estado HALF_OPENED, es posible tener dos posiciones, según la orientación del pliegue: posición de mesa (pliegue horizontal) y posición de libro (pliegue vertical).

Las posiciones de mesa y de libro ofrecen nuevas posibilidades de diseño, pero el estado del dispositivo HALF_OPENED también impone algunas limitaciones. Por ejemplo, a los usuarios les puede resultar difícil acceder a los controles de la IU cercanos al pliegue, y el texto que se superpone al pliegue puede ser difícil de leer (o ilegible si el objeto occlusionType es FULL).

Diseña tus diseños para que los elementos de la IU sean accesibles en todos los estados del dispositivo. Coloca los cuadros de diálogo y los menús emergentes de modo que no se superpongan al pliegue. Asegúrate de que el contenido importante se pueda ver cuando el dispositivo esté parcialmente plegado. Divide el contenido en dos áreas con el dispositivo en posición HALF_OPENED: arriba y abajo en la posición de mesa, a la izquierda y a la derecha en la posición de libro.

Para obtener más información sobre los pliegues y las posturas plegables, consulta Cómo hacer que tu app funcione en dispositivos plegables.

Continuidad de las apps

Las apps se detienen y se reinician mientras pasan de una pantalla a la otra, cuando se pliega o despliega un dispositivo. Para mantener la continuidad para el usuario, la app debe restablecer el estado cuando vuelve a crear el diseño en una pantalla plegada o desplegada. Por ejemplo, las apps deben hacer lo siguiente:

  • Retener el texto escrito en los campos de entrada
  • Restablecer el estado del teclado
  • Restablecer la posición de desplazamiento de los campos desplazables
  • Reanudar la reproducción del contenido multimedia desde donde se paró cuando se detuvo la app

Los diferentes diseños de pantalla de un dispositivo plegable también deben complementarse. Por ejemplo, si la pantalla plegada muestra la imagen y la descripción de un producto de una tienda en línea, la pantalla desplegada debe mantener la continuidad mediante la visualización de la misma imagen y descripción, pero también se debe incluir contenido complementario, como las especificaciones del producto o las opiniones relacionadas.

Para obtener más información sobre cómo administrar el estado y la continuidad de las apps, consulta Cómo guardar estados de IU y Cómo controlar cambios de configuración.

La forma de realizar varias tareas a la vez

Los dispositivos plegables con pantalla grande tienen una pantalla del tamaño de una tablet que es ideal para realizar varias tareas a la vez en el modo multiventana. Los dispositivos plegables admiten el modo de pantalla dividida. Algunos incluso admiten el modo de formato libre, en el que las apps se encuentran en ventanas que se pueden mover y cambiar de tamaño, de forma similar a un sistema de ventanas de escritorio.

Figure 4. Dispositivo plegable en orientación horizontal que ejecuta tres apps en el modo de pantalla dividida (izquierda) y en el modo de formato libre (derecha).

De forma predeterminada, Android 12 (nivel de API 31) y las versiones posteriores usan el modo multiventana. En pantallas grandes, todas las apps se ejecutan en el modo multiventana, independientemente de la configuración de la app. En versiones anteriores a Android 7.0 (nivel de API 24), debes configurar tu app para que pueda cambiar de tamaño y admitir el modo multiventana.

Para obtener más información sobre cómo realizar varias tareas a la vez en el modo multiventana, consulta Compatibilidad con el modo multiventana.

Arrastrar y soltar

Los dispositivos plegables con pantalla grande ofrecen un espacio amplio para estas interacciones. El modo multiventana en dispositivos plegables permite arrastrar y soltar entre apps.

Las interacciones de arrastrar y soltar crean una experiencia del usuario productiva y atractiva. Agrega la función de arrastrar y soltar a tu app con el framework de arrastrar y soltar de Android. Para obtener más información, consulta Arrastrar y soltar.

Recursos adicionales