En el mercado actual, encontramos una amplia gama de dispositivos Android, haciendo necesario que las aplicaciones sean compatibles con los distintos tamaños de pantalla y modos de visualización. En un ecosistema tan diverso, disponer de una interfaz de usuario adaptable y flexible no solo asegura una experiencia coherente, sino que también optimiza el rendimiento y la usabilidad de la aplicación en una amplia gama de dispositivos, desde teléfonos inteligentes tradicionales hasta dispositivos plegables y tablets.

En este artículo nos queremos centrar en las estrategias y recomendaciones clave para el desarrollo de apps que se ajusten eficazmente a las características únicas de los dispositivos plegables y las pantallas grandes. De esta manera, podrás crear aplicaciones que sean compatibles con una gran variedad de dispositivos y que también ofrezcan una experiencia de usuario fluida y adaptada a las necesidades específicas de cada dispositivo.

Mostrar widgets y aplicaciones en la pantalla de portada

Una de las grandes ventajas de los dispositivos Android es la personalización. Con Good Lock, los usuarios pueden personalizar One UI para añadir widgets a la pantalla de portada de los dispositivos plegables. Por ejemplo, el Samsung Galaxy Z Flip5 cuenta con una pantalla de portada de 3.4 pulgadas que permite a los usuarios acceder a la información y funcionalidades importantes sin abrir el dispositivo.

En este caso, la pantalla de portada está diseñada para mostrar widgets personalizables, como relojes, fondos de pantalla, listas de notificaciones y calendarios. Además, también puedes crear widgets específicos para tu app que sean mostrados en esta pantalla. Por ejemplo, si estás desarrollando una aplicación de mensajería, puedes mejorarla creando un widget que muestre los mensajes recientes o no leídos en la pantalla de portada.

¿Cómo puedo hacer para mostrar un widget en la pantalla de portada del Galaxy Z Flip5?

1. Crea un archivo XML en la carpeta ‘res/xml’ de tu aplicación y pon este código para configurar la visualización de su widget para la ventana Flex:

2. Agrega los metadatos del archivo XML en el manifiesto de tu proyecto, dentro del elemento ‘<receiver>’ para tu widget:

3. Ajusta los atributos del widget en el archivo XML de metadatos a los siguientes valores recomendados:

Cuando se instale la aplicación, tu widget aparecerá en la lista de widgets de la pantalla de portada del dispositivo. Podrás mostrar el widget en la ventana Flex yendo a Configuración > Pantalla de portada > Widgets y seleccionando el widget de la lista.

Aunque la pantalla de portada está pensada principalmente para widgets, también puedes utilizar la aplicación MultiStar en Good Lock para lanzar aplicaciones completas en esta pantalla. Para hacerlo solo tienes que:

1. Instala Good Lock desde la Galaxy Store.
2. En la aplicación Good Lock, ve a Life Up > MultiStar > I ♡ Galaxy Foldable > Launcher Widget.
3. De la lista, selecciona la aplicación que deseas iniciar en la pantalla de portada y haz clic en Habilitar widget de inicio.

Adaptar aplicaciones al Modo Flex

Para que tu aplicación se adapte al Modo Flex, se recomienda utilizar Constraint Layout para implementar una interfaz de usuario interactiva. Este proporciona una jerarquía de vistas planas evitando vistas anidadas complicadas. De esta manera, puedes asignar tamaños relativos y distancias entre grupos de vistas, de modo que los componentes se ajusten según el dispositivo.

Imaginemos que quieres crear una app que muestre una lista de imágenes en el centro de la pantalla espaciadas uniformemente. Para ello, puedes utilizar algunas directrices, que no son nada más que unas guías virtuales que te ayudarán a alinear las vistas.

Para añadir estas directrices y adaptar tu UI a ellas tan solo tienes que:

• En Android Studio, ve a Helpers > Guideline(Horizontal) o Guideline(Vertical) y arrastra las guías a tu diseño.
• Cambia el valor de ‘app:layout_constraintGuide_begin’ de un valor estático a un valor porcentual.
• Alinea tus vistas con las nuevas directrices restringiéndolas a las guías.

También puedes usar la biblioteca Jetpack WindowManager de Android, que admite varios factores de forma, incluida la multiventana, para proporcionar apoyo para el Modo Flex en tu app. Para ello, agrega las siguientes dependencias al archivo ‘build.gradle’ de la aplicación:

Configura una tarea consciente del ciclo de vida para obtener información sobre el diseño de la ventana con el objeto ‘WindowLayoutInfo’. Utiliza la función ‘checkAndUpdateState()’ para actualizar la UI, pasando el objeto ‘newLayoutInfo’ a esta función.

El objeto ‘WindowLayoutInfo’ contiene un objeto ‘displayFeatures’, que describe los estados y orientaciones específicas de los dispositivos plegables:

• Si ‘displayFeatures’ es ‘null’, el dispositivo está cerrado o plegado.
• Si ‘FoldingFeature.State’ es ‘HALF_OPENED’ y ’FoldingFeature.Orientation’ es ‘VERTICAL’, el dispositivo es un Galaxy Flip en Modo Flex.
• Si ‘FoldingFeature.State’ es ‘HALF_OPENED’ y ‘FoldingFeature.Orientation’ es ‘HORIZONTAL’, el dispositivo es un Galaxy Fold en Modo Flex.
• Si ‘FoldingFeature.State’ es ‘Flat’, el dispositivo está completamente abierto.

Para configurar tu aplicación según el tamaño de ventana actual, ya sea vertical, horizontal, plegada, desplegada, multiventana o cualquier otro modo, anula la función ‘onConfigurationChanged()’ y recupera el tamaño de ventana actual desde la interfaz ‘windowMetricsCalculator’.

Adapta tu aplicación al Modo Multiventana

El Modo Multiventana permite utilizar dos o más aplicaciones simultáneamente en la misma pantalla y se pueden utilizar también en la vista emergente como una ventana flotante sobre otra aplicación abierta.

Para implementar la compatibilidad con el Modo Multiventana y la continuidad de la aplicación debes hacer lo siguiente:

1. Agrega los siguientes atributos al elemento ‘<activity>’ en el archivo ‘AndroidManifest.xml’:

El hecho de añadir estos atributos al ‘configChanges’ asegura que la interfaz de usuario se adapte a los cambios de configuración relevantes del dispositivo. Mientras que establecer ‘resizeableActivity’ a ‘true’ permite que la actividad se inicie en modo de pantalla dividida y emergente.

2. Para recordar el estado de la aplicación antes de los cambios de configuración, debes utilizar componentes compatibles con el ciclo de vida:

• Guarda el estado anterior en un ‘Bundle’ dentro de la función ‘onSaveInstanceState()’. Después, verifica si existe un estado guardado en la función ‘onCreate()’. Si el ‘savedInstanceState’ es ‘null’, no hay estado guardado. Si no es ‘null’, recupera el estado y actualiza la UI.
• Como alternativa, puedes usar ViewModels. Un ViewModel te permite almacenar el estado de la UI de la app y también te proporciona acceso a la idea de negocio principal. Para crear un ViewModel, crea una clase que extienda ‘ViewModel‘ e inicializa objetos ‘MutableState’. Crea una instancia del ViewModel en la función ‘onCreate()’ de tu actividad y utilízala para actualizar los elementos de la UI.

Si no deseas poner el Modo Multiventana, establece ‘resizeableActivity’ a ‘false’ en el elemento ‘<activity>’.

Como ves, implementar una UI adaptable y flexible es esencial para mejorar la experiencia del usuario en dispositivos Android con distintos tamaños y formas de pantalla. Adaptar tu aplicación para la pantalla de portada, el Modo Flex y el Modo Multiventana te permitirá ofrecer una experiencia de usuario más fluida y versátil, aprovechando al máximo las capacidades de los dispositivos plegables y de pantalla grande.

¿A qué esperas para ponerte en marcha?

Samsung Dev Spain es la comunidad oficial de Samsung para desarrolladores españoles. Si te das de alta, puedes conseguir entrar en nuestro programa de préstamos -y conseguir dispositivos para desarrollar apps para nuestro ecosistema-, acceder a material gratuito como la Guía de optimización de apps para foldables, participar en promociones como dispositivos por apps o acudir gratis a eventos formativos como Samsung Dev Day o disfrutar de ventajas exclusivas en Samsung PLUS.