Cómo cambiar la relación de aspecto en apps para dispositivos plegables

  • Android 16 ignora restricciones de orientación y aspecto en pantallas ≥ 600dp; prepara tu UI para redimensionado real.
  • Usa Window Size Classes, Jetpack WindowManager y estado en ViewModel/rememberSaveable para continuidad.
  • En web, combina breakpoints por ancho con media queries de aspect-ratio y Window Segments API.

relación de aspecto en apps para plegables

Si estás peleándote con la relación de aspecto de tus apps en un plegable, no eres el único: la variedad de tamaños, orientaciones y estados plegado/desplegado convierte el ajuste fino en todo un arte. Entre los cambios de Android 16, las opciones del sistema y las mejores prácticas de diseño, hay una ruta clara para que tus aplicaciones (y también tus sitios web) se vean de cine en pantallas compactas, medianas y expandidas.

La realidad es que Android está empujando con fuerza a que todas las apps sean redimensionables y funcionen en todas las orientaciones y relaciones de aspecto cuando hay espacio de sobra (tablets, modo escritorio y la pantalla interna de muchos plegables). En paralelo, hay herramientas para probar, banderas de compatibilidad, excepciones puntuales y trucos de usuario que te pueden salvar el día mientras actualizas tu UI.

Qué cambia en Android 16 (API 36) y por qué te afecta

Con Android 16, el sistema ignora las restricciones de orientación, relación de aspecto y redimensionado de las apps que apunten a API 36 cuando el dispositivo tiene un ancho más pequeño (smallest width) de al menos 600dp. Esto incluye tablets, la pantalla interior de plegables con panel grande y el modo de ventanas de escritorio. La meta es ofrecer una experiencia coherente y aprovechar el espacio sin forzar una app a vertical estrecho si hay margen para más.

Además, todas las actividades pasan a ser redimensionables por defecto y pueden entrar en multiventana si el dispositivo cumple ese umbral de sw ≥ 600dp. En la práctica, es equivalente a tener resizeableActivity=true, pero sin que tengas que declararlo en el manifiesto.

Atributos y APIs del manifiesto que pasan a mejor vida en pantallas grandes

En dispositivos con sw ≥ 600dp, cuando apuntas a API 36, el sistema ignora varios atributos históricos. Entre ellos se encuentran los valores fijos de screenOrientation (portrait, landscape y sus variantes sensor/user), cualquier valor de resizeableActivity, así como minAspectRatio y maxAspectRatio. También pierden efecto las llamadas a setRequestedOrientation()/getRequestedOrientation() con esos modos rígidos.

Si por motivos justificados necesitas darte de baja en API 36, existe una salida temporal: declara la propiedad android.window.PROPERTY_COMPAT_ALLOW_RESTRICTED_RESIZABILITY. Puedes aplicarla por actividad o de forma global en la app así:

<activity ...><property android:name="android.window.PROPERTY_COMPAT_ALLOW_RESTRICTED_RESIZABILITY" android:value="true" /></activity>

<application ...><property android:name="android.window.PROPERTY_COMPAT_ALLOW_RESTRICTED_RESIZABILITY" android:value="true" /></application>

Ten en cuenta un detalle importante: esta deshabilitación desaparece en API 37. A partir de ese objetivo, el framework ignorará siempre las restricciones de orientación, relación de aspecto y tamaño en pantallas con sw ≥ 600dp, de modo que es mejor ir adaptando tu UI desde ya.

Excepciones, casos especiales y preferencias del usuario

Galaxy Z Flip 7 FE

Hay situaciones en las que el cambio no aplica. Las pantallas con sw < 600dp (la mayoría de teléfonos, muchos exteriores de plegables) no están afectadas. También quedan fuera los juegos cuando la app está marcada con la categoría android:appCategory="game".

Además, si el usuario activa el comportamiento predeterminado de una app en los ajustes de relación de aspecto del sistema, esa preferencia manda por encima de las reglas generales. Para juegos, publicar con Android App Bundles y la firma de apps de Play ayuda a que la categoría esté bien gestionada por Google Play.

Ajustes rápidos para usuarios de plegables: pantalla completa y densidad

Si tienes un Galaxy Fold, Pixel Fold o similar y ves Instagram, Reddit o algunos juegos estirados o súper aumentados, puedes probar con las opciones del sistema. Busca Ajustes > Pantalla > Apps en pantalla completa / Escalado de aplicaciones y habilita el modo que mejor se vea para cada app. No es milagroso si la app no está optimizada, pero a veces mejora mucho el resultado; por ejemplo, YouTube cambia de aspecto en smart TV.

Otra vía, ya más avanzada, es ajustar el parámetro “Ancho más pequeño” en las Opciones de desarrollador. Subir el valor hace que todo “encoga” (más contenido a la vista), y bajarlo agranda los elementos. Hazlo con cuidado, anota el valor original y recuerda que puede afectar a toda la interfaz del sistema.

Cómo probar: emuladores, flags de compatibilidad y tests automáticos

Para verificar si tu app se ve afectada por las novedades de Android 16, tira de los emuladores de Pixel Tablet y Pixel Fold en Android Studio. Configura en tu módulo targetSdkPreview="Baklava" y juega con rotaciones, plegado/desplegado, multiventana y modo escritorio.

En dispositivos físicos de test, puedes habilitar la marca del marco de compatibilidad UNIVERSAL_RESIZABLE_BY_DEFAULT para simular el comportamiento universal redimensionable. Y si quieres automatizar flujos, Espresso y las APIs de test de Jetpack Compose te permiten validar interacciones mientras la ventana cambia de tamaño.

Problemas típicos al cambiar relación de aspecto y cómo evitarlos

Nuevos detalles Samsung Galaxy Z Flip 7 FE-3

Las apps que bloqueaban orientación, aspect ratio o redimensionado suelen sufrir en pantallas grandes: layouts estirados, solapes, botones fuera de pantalla e incluso previsualizaciones de cámara deformadas. Lo suyo es abrazar el diseño adaptable y cubrir estos puntos:

  • Pon anchos máximos a componentes propensos a “desparramarse” en horizontal (cards, barras, imágenes).
  • Habilita scroll donde sea necesario para que no se “pierdan” acciones al pasar a landscape o multiventana.
  • Cámara: que el visor gire correctamente, y que acepte relaciones de aspecto de la UI distintas al sensor.
  • Preserva estado en cambios de tamaño: la actividad puede recrearse; no pierdas formularios ni contexto.
  • Piensa en Window Size Classes y usa diseños responsivos dentro de cada clase.

Compose bien hecho: clases de tamaño, estado y layouts que no se rompen

Jetpack Compose es ideal para construir UIs que cambian de tamaño sin dramas. Con Material 3 Window Size Class puedes clasificar el ancho y alto en Compact, Medium y Expanded y adaptar la IU sin atarte a un modelo de dispositivo concreto.

En el composable raíz, calcula el tamaño de ventana y propágalo como estado hacia abajo. Evita decisiones del tipo “¿es tablet?”; la app puede ir en multiventana, estar en un monitor externo o en un segmento de pantalla. Herramientas como BoxWithConstraints te permiten cambiar el contenido mostrado según el espacio disponible.

Para no perder UI state cuando la actividad se recrea, sustituye remember por rememberSaveable en aquello que deba sobrevivir a cambios de configuración. Y para continuidad real, eleva el estado a un ViewModel: inicializa en el init del ViewModel y no en onCreate() de la actividad, para que las cargas costosas no se repitan al redimensionar.

Un patrón típico: en pantallas estrechas, muestra lista; con más ancho, pasa a grid de 2-3 columnas, sube tipografías y márgenes, y reparte mejor la información. Pasa siempre los datos completos al composable y decide qué se ve según el espacio para evitar efectos secundarios al cambiar el tamaño.

XML y recursos: de las densidades clásicas a las ventanas por clases

Durante años nos apoyamos en carpetas como ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi para imágenes, layouts y dimensiones, con variantes por orientación. Eso sigue siendo útil, pero la variedad actual de aspectos y estados hace que las Window Size Classes sean más escalables a largo plazo.

Como referencia recomendada por Google para ancho: 0–599dp Compact, 600–839dp Medium, 840+dp Expanded. Para alto, se usan rangos análogos (por ejemplo, 0–479, 480–899, 900+). Un plegable en vertical puede caer en Medium, mientras que desplegado horizontal suele pasar a Expanded.

Diseño web: CSS, relación de aspecto y segmentos de pantalla

nuevo smartphone Samsung pantalla plegable enero 2025

Si tu reto es una web, los plegables piden ir un paso más allá del responsive clásico. Combina breakpoints por ancho con media queries por relación de aspecto para estados plegado/desplegado. Un ejemplo orientativo:

@media (min-width: 600px) and (max-width: 900px) { /* Estilos para un plegable semiabierto */ }
@media (aspect-ratio: 3/4) { /* Vertical plegado */ }
@media (aspect-ratio: 16/9) { /* Apaisado desplegado */ }

En entornos multipanel, la Window Segments API te da el área visual activa: window.screenSegments te devuelve los segmentos para distribuir contenido y evitar pliegues o bisagras. Añade viewport-fit: cover en CSS para que el contenido aproveche todo el espacio, y detecta la orientación con la Screen Orientation API para ajustar la UI sin parpadeos.

En rendimiento, piensa que los plegables son muy de multitarea: lazy loading, imágenes optimizadas y recursos comprimidos son obligatorios. Herramientas como Lighthouse o WebPageTest te mostrarán cuellos de botella al instante.

Jetpack WindowManager: pliegues, bisagras y posturas (mesa y libro)

Para Android nativo, la biblioteca Jetpack WindowManager expone la información del dispositivo plegable a través de WindowInfoTracker y sus emisiones de WindowLayoutInfo. Puedes recogerlas con corrutinas usando repeatOnLifecycle (se reinicia sola cuando la actividad vuelve a STARTED) o con callbacks Java a través de WindowInfoTrackerCallbackAdapter. Si usas RxJava, tienes artefactos para Observable/Flowable y suscribirte en el hilo principal.

Dentro de WindowLayoutInfo hay DisplayFeatures como FoldingFeature, que informan de estado (FLAT o HALF_OPENED), orientación del pliegue (HORIZONTAL o VERTICAL), tipo de oclusión (NONE o FULL) y si isSeparating es verdadero. Con bounds puedes alinear la UI para no colocar contenido crucial sobre el pliegue o bisagra.

Con esos datos, detecta la postura de mesa (TABLETOP): bisagra horizontal, semiabierto. Coloca el contenido principal arriba del pliegue y, debajo, controles y elementos auxiliares; es comodísimo para vídeo, fotos y videollamadas sin manos. También puedes detectar la postura de libro (pliegue vertical, semiabierto) para UIs de lectura a doble página o capturas con otra relación de aspecto.

Importante: el ángulo de apertura no se expone en la API (la precisión varía por dispositivo), así que no bases animaciones críticas en él. En plegables de doble pantalla, aplica igualmente diseños que respeten la separación física, y usa occlusionType para decidir si evitas el área de la bisagra.

Cambios de tamaño y métricas de ventana

Samsung smartphone pantalla plegable no llega a España

Al rotar, plegar/desplegar o entrar en multiventana, cambian las WindowMetrics. Con WindowMetricsCalculator (retrocompatible) obtienes límites actuales y máximos, y puedes reaccionar al vuelo. Desde API 24, solo los cambios “significativos” recrean la actividad, pero puede ocurrir al pasar de una mitad de pantalla a pantalla completa o al conectar un monitor externo con distinta densidad.

Para simplificar la lógica, usa una capa superior (Window Size Class) y no propagues tamaños físicos a todos los componentes. Observa LocalConfiguration.current en Compose si necesitas reaccionar a orientación/anchos/altos, pero intenta que los hijos decidan en base a su espacio disponible.

Ciclo de vida, estado y trabajo en segundo plano

Registra eventos del ciclo de vida con un LifecycleEventObserver para ver qué ocurre al minimizar, traer al frente o redimensionar a lo bruto. En muchos dispositivos, verás pausas y reanudaciones, y en algunos casos recreaciones de la actividad si el cambio es grande. Esto tiene impacto directo en tu estado de UI y cargas iniciales.

Para no perder la intención del usuario, emplea rememberSaveable en Compose y eleva el estado al ViewModel. Quita inicializaciones costosas de onCreate() y muévelas al init del ViewModel: así evitarás duplicar llamadas de red o E/S cada vez que la actividad se recrea por un cambio de tamaño.

Consejos prácticos de UI: componentes, tipografías y rejillas

Los componentes que ocupan todo el ancho tienden a estirarse feo en horizontal; define anchos máximos y usa contenedores centrados para tarjetas y formularios. Ajusta tipografías y espaciados cuando pases a Expanded, y recuerda que una rejilla de 2–3 columnas gana legibilidad y densidad de información donde procede.

Al alternar de lista a rejilla, sube el tamaño de iconos o imágenes y mantén la jerarquía visual con títulos más generosos en pantallas grandes. Si tu layout cambia de una a dos columnas, eleva flags de estado como “ver más” para que no se pierda la acción del usuario al recomponer.

Pruebas en dispositivos y laboratorios remotos

Además de los emuladores de Android Studio, puedes probar en remoto con BrowserStack o Samsung Remote Test Lab para validar estados plegado/desplegado reales. En Chrome DevTools, emula varios tamaños y relación de aspecto para webs. Verás rápido dónde tu UI se queda corta y qué breakpoints te faltan.

Para equipos Android, no olvides la marca de compatibilidad UNIVERSAL_RESIZABLE_BY_DEFAULT y los codelabs oficiales enfocados en redimensionado. Si algo se desmadra, es mejor descubrirlo aquí que en manos de tus usuarios y plantearse crear una versión lite de la app.

Fechas y publicación: lo que viene en tienda

móviles con pantalla plegable

Android 16 establece como referencia que, en pantallas con sw ≥ 600dp, la experiencia por defecto es compatible con todas las orientaciones y relaciones de aspecto en apps que apunten a API 36 (con opt-out temporal). Y Android 37 eliminará esa posibilidad de deshabilitarlo.

Las fechas límite dependen de cada store, pero Google Play exigirá target API 36 a partir de agosto de 2026. Si sigues atado a orientaciones fijas y ratios rígidos, es momento de planificar la migración para evitar bloqueos de publicación y, sobre todo, mejorar la experiencia en pantallas grandes.

Lo que cuenta la comunidad (y un apunte curioso)

Es habitual leer que en plegables como Fold o Pixel Fold, algunas apps se ven estiradas o con zoom exagerado, y ciertos juegos no aprovechan el espacio. Forzar pantalla completa por app puede mejorar a corto plazo, pero el salto de calidad llega cuando el desarrollador adopta UI adaptable con clases de tamaño y layouts responsivos.

Y si tras probar todo sigues sin estar cómodo con tu terminal, en el contenido original se mencionaba que hay servicios de recompra como “Moviloff” para vender el móvil y darle una segunda vida. No soluciona el problema técnico, pero puede cuadrarte si decides cambiar de dispositivo.

Dominar la relación de aspecto en apps para dispositivos plegables es más sencillo si abrazas el nuevo modelo: deja que el sistema gestione ventanas grandes, construye UIs responsivas, conserva el estado y prueba a conciencia. Entre Window Size Classes, Jetpack WindowManager, buenas prácticas en Compose, media queries por aspecto y pruebas en emuladores y laboratorios, tienes todo para que tus apps y webs luzcan bien en cualquier postura y tamaño, con menos estirones y más contenido útil a la vista.

Nuevos cambios de pantalla en YouTube
Artículo relacionado:
YouTube cambia de aspecto en su versión para SmartTV