¿Cómo diseñar para diferentes dispositivos en Android?


¿Nunca te ha ocurrido que al crear una App en Android todo está perfecto en el dispositivo o emulador donde se le dio vida a la misma, pero al probarla en otro dispositivo no se ejecuta como la diseñamos?, presenta disimiles errores: los botones que ponemos debajo no se ven, las imágenes se muestran en otra resolución, en fin, estos problemas son muy comunes si no se siguen las buenas prácticas de diseño en Android. Por eso vamos a ver en este artículo como solucionar dicho problema y de paso aprender un poco más sobre Android.

Entrando en el tema, Android categoriza las pantallas de los dispositivos en dos opiniones:

Densidad: Se refiere a la cantidad de pixeles en un área determinada normalmente se le conoce por dpi (puntos por pulgadas). Mayormente se usan cuatro densidades:

  • ldpi (baja) (low density)
  • mdpi (media) (medium density)
  • hdpi (alta) (high density)
  • xhdpi (super alta) (Extra high density)

Tamaño: Se refiere a las proporciones de la pantalla del dispositivo. Existen varios tamaños pero los más usados son:

  • small (426dp x 320dp)
  • normal (470dp x 320dp)
  • large (640dp x 480dp)
  • xlarge (960dp x 720dp)

Nota: dp es la unidad de medida usada desde Android 3.0 en adelante, como buena práctica en nuestras App deberíamos utilizar esta unidad y no otra para las dimensiones mientras que para el tamaño del texto sp es la correcta.

Aquí les dejo un ejemplo donde pueden observar cómo una misma App sin soportar estas distintas densidades puede variar en la forma en que se visualiza en dependencia de las densidades de los dispositivos.

 

Varias pantallas

Fig1: Varias Pantallas

Soportar varias resoluciones

Bien, para solucionar estos problemas mayormente se les da soporte a estos cuatro tamaños y densidades. Lo que tenemos que hacer es crear un XML que contenga el visual para cada tamaño de pantalla que queramos soportar.

En el ejemplo que veremos a continuación crearemos una App sencilla con soporte para varias pantallas. Lo primero es abrir nuestro IDE y crear en el árbol del proyecto estas carpetas en dependencia del soporte que se le quiera dar.

Mi Proyecto/res/layout/main.xml (Por defecto vertical) (Portrait)

Mi Proyecto/res/layout-land/main.xml (horizantal) (Landscape)

Mi Proyecto/res/layout-large/main.xml (Pantallas grandes vertical)

Mi Proyecto/res/ layout-large-land/main.xml (Pantallas grandes horizontal)

Nota: Android se encargará de escalar estos XML, por lo que no tenemos que ocuparnos de esto, actuaremos normalmente como siempre a la hora de programar. Los nombres de los XML deben ser exactamente iguales, solo nos concentraremos en cambiar el contenido del mismo para cada vista. Para crear estas carpetas en el ADT, clic derecho encima de la carpeta res, New/Folder.

Debería quedar algo como esto:

Arbol de directorios

Fig2: Arbol de directorios

De la misma forma procederíamos para las imágenes, solo que el árbol de directorios ya está creado. Ejemplo: si tuviéramos una imagen en varias resoluciones, la copiaríamos en las diferentes carpetas:

Mi Proyecto/res/drawable-xhdpi/mi_imagen.png

Mi Proyecto/res/drawable-hdpi/mi_imagen.png

Mi Proyecto/res/drawable-mdpi/mi_imagen.png

Mi Proyecto/res/drawable-ldpi/mi_imagen.png

 

De esta forma podemos referenciar desde el código java a @drawable/mi_imagen.png y el sistema elegirá cual densidad es la correcta.

Nota: Los recursos de baja densidad (ldpi) no siempre son necesarios. Ya que cuando proporcionamos un recurso hdpi el sistema lo escala a la mitad para convertirlo en ldpi.

Siguiendo con nuestro ejemplo, vamos a crear en cada vista algo diferente para probar que funciona. En la primera vista cambiamos el texto que contiene el TextView que se muestra por defecto a “Portrait” que es como se llama este tipo de vista en forma vertical. “Landscape” para la segunda vista que no es más que el modo horizontal del teléfono. Para la tercera y la cuarta pondremos “Table Portrait” y “Table landscape” respectivamente.

Desde el código java no tenemos que hacer nada, como te comenté el propio sistema se encargará de elegir cual es la más optimizada para utilizar. Ejecutamos la App y veremos el resultado.

Nota: Ejecuta la App en distintos dispositivos que tengan distintas pantallas para que se pueda apreciar cómo el sistema Android elige cual XML utilizar en los distintos casos.

De más está decirte la importancia de darle soporte a las distintas densidades y tamaños, casi el 100% de las Apps soportan gran variedad de dispositivos gracias a esta técnica. Te recomiendo que no dejes de utilizar en tus App lo visto anteriormente, y aquí te dejo un enlace donde puedes ver más resoluciones y tamaños no tan usados pero que te pueden servir en el futuro y un demo del ejemplo que acabamos de ver. Cualquier duda o sugerencia no dudes en dejar tu comentario.

Descargar Demo

  • Diego

    Una consulta. Supongamos una aplicación que tiene una cierta actividad con varios elementos, por ejemplo varias opciones para elegir. Diseñando eso para una tableta de 10” se podría poner todo en una misma página, pero si quisiéramos hacerlo compatible con un teléfono pequeño seguramente eso no sea lo mejor y sería deseable separarlo en varias páginas. Esto como se haría? Muchas gracias.