Android: Diseño adaptado a la orientación de pantalla

Android: Diseño adaptado a la orientación de pantalla

A la hora de desarrollar una aplicación habitualmente creamos un diseño en vertical puesto que es la orientación por defecto, aunque suele ser conveniente que el diseño sea lo suficientemente flexible para adaptarse a la rotación del dispositivo y mostrarse de manera correcta también en horizontal.

Si quieres que tu aplicación sea igualmente funcional en ambas orientaciones (portrait y landscape), Android Studio nos facilita las cosas.

Antes de nada, cuando ejecutes tu aplicación en el emulador de Android asegúrate que en los ajustes está activada la opción de rotación automática (Auto-rotate) como se ve en la imagen:



Nuestra aplicación de ejemplo (para esta entrada he utilizado código del repositorio en Github de Google Developer Training) se ve así en modo vertical:



Al rotar el dispositivo (en el emulador) la aplicación se muestra así en modo apaisado:



Comprobamos que la imagen se corta y que la disposición del diseño no queda optimizada para esta orientación.

Para solucionarlo abrimos el archivo de diseño, en nuestro ejemplo layout/activity_main.xml, y desde la pestaña Design pulsamos sobre el icono Orientation for Preview, donde está activada la opción Portrait; seleccionamos Landscape y comprobamos que se ve igual que en el emulador (no podíamos esperar otra cosa).

En Orientation for Preview pulsamos sobre Create Landscape Variation, lo que crea un nuevo archivo: layout-land/activity_main.xml que es una copia del archivo de diseño original. Sobre este archivo debemos hacer los cambios para que el diseño se ajuste correctamente en horizontal.

Una vez hechos los cambios oportunos en el diseño (se podría hacer mejor, pero para el ejemplo simplemente he cambiado el escalado de la imagen de fondo y la distribución del texto inferior), volvemos a ejecutar la aplicación en el emulador, y comprobamos que al rotar el dispositivo la aplicación toma automáticamente el diseño que corresponde a cada orientación:

Comentarios

Entradas populares

Recursos gratis para aprender Kotlin

I/O: entrada y salida de datos en consola

Lectura y escritura de archivos