Los dispositivos que corren bajo el SO Android vienen en muchas formas y tamaños a lo largo y ancho del mundo. ¿La razón? El extenso número de fabricantes detrás de cada teléfono. De la mano de esta amplia gama de dispositivos, los desarrolladores tenemos la oportunidad de llegar a un público enorme con cada aplicación que construyamos. Sin embargo, para que esto sea posible es prioritario que nuestras aplicaciones tengan la capacidad de adaptarse a las diferentes configuraciones que presentan todos estos dispositivos. Entre las variaciones a tomar en cuenta están los temas del idioma, tamaños de pantalla y las versiones de la plataforma Android.
Con la intención de seguir con los tutoriales orientados a explicar aquellas recomendaciones para construir aplicaciones que se vean bien en el mayor número de dispositivos, el día de hoy vamos a hablar de cómo debemos construir y organizar nuestros layouts, los recursos de imagen y una parte de la guía de diseño de Android relacionada con la iconografía de las aplicaciones. ¿Listo?
Uno de los primeros puntos importantes es conocer cómo se utilizan las funciones básicas de la plataforma para aprovechar al máximo los recursos alternativos y otras características con la intención de que nuestras aplicaciones puedan proporcionar una experiencia de usuario optimizada en una amplia gama de dispositivos compatibles con Android utilizando una misma APK.
Android categoriza las pantallas de los dispositivos utilizando dos propiedades importantes: tamaño y densidad. Como los dispositivos Android se mueven entre diferentes rangos que mezclan estas dos características, es necesario incluir algunos recursos alternativos que nos ayudarán a optimizar la apariencia de nuestras aplicaciones.
Para empezar a trabajar con estos conceptos, necesitamos saber que:
- Existen cuatro tamaños estándar: pequeño (small), normal, grande (large) y extra grande (xlarge).
- Existen cuatro densidades estándar: low (ldpi), medium (mdpi), high (hdpi) y extra high (xhdpi).
Para declarar los diferentes layouts y archivos gráficos (bitmaps) que utilizaremos para diferentes pantallas, resulta útil organizar estos recursos en directorios separados.
Otro punto importante es saber que la orientación de pantalla (portrait y landscape) se consideran como una variación al tamaño de pantalla, por lo que también es conveniente trabajar en el diseño de los layouts destinados a cada orientación para optimizar la experiencia de usuario.
Ahora vamos a aprender cómo empezar a organizar nuestros recursos del proyecto de acuerdo a las necesidades de visualización de la aplicación. Empecemos con los layouts.
Creación de diferentes layouts para una aplicación Android
Para optimizar la experiencia de usuario en los diferentes tamaños de pantalla, debes crear un archivo XML de layout por cada tamaño de pantalla a soportar. Cada uno de estos layouts deben guardarse dentro del directorio apropiado. En Android, los layouts van en el directorio res/layout. Para los casos en que estemos realizando el óptimo soporte para múltiples tamaños de pantalla debemos crear un directorio layout-[tamaño_pantalla] donde los valores small, large y xlarge son los sufijos a sustituir según sea el caso y siendo el directorio layout que nos crea Eclipse por default, el tamaño normal soportado.
Por lo tanto, si estuviéramos creando un layout para definir el estilo de una pantalla en nuestra aplicación y quisiéramos que este layout estuviera soportado por pantallas de tamaño normal y grande, nuestra estructura de directorios sería muy similar a la siguiente:
Como se muestra en el ejemplo, el archivo de layout se llama de la misma forma para ambas carpetas, de esta forma Android podrá llamar al archivo main.xml apropiado dependiendo del tamaño de pantalla que tenga el dispositivo que se encuentre ejecutando nuestra aplicación. Esta gestión de recursos la hace Android, por lo que nosotros únicamente nos encargaremos de organizar correctamente nuestros archivos en los directorios que correspondan. (Es el mismo sistema que se utiliza cuando utilizamos diferentes archivos de strings.xml para el soporte de varios idiomas).
De esta forma, para llamar los layouts lo haremos de la forma en que siempre lo hemos hecho:
Lo único que varía de estos archivos es su contenido, pues ambos pueden tener un acomodo distinto de los componentes que representan la pantalla de la aplicación. Esta práctica te ayudará a construir UI’s optimizadas para cada tamaño de pantalla.
Por otro lado, el tema del cambio de orientación en el dispositivo es algo que se debe también manejar en el diseño de los layouts dependiendo si en nuestro diseño consideramos que habrá algún comportamiento de respuesta al momento que nuestro usuario rote su teléfono.
En este segundo caso, si quisiéramos que una pantalla luzca bien en ambas orientaciones deberemos incluir un directorio extra llamado layout-land cuyo sufijo corresponde a la abreviación de landscape, es decir, a la orientación horizontal del teléfono.
Por default, la carpeta layout (que nos crea Eclipse) contiene los archivos para el diseño de pantallas que corresponden al tamaño normal y cuya orientación es portrait.
Por lo tanto, la distribución de directorios para el soporte de ambas orientaciones de pantalla quedaría de la siguiente manera:
En un proyecto real, manejamos layouts para soporte de orientación y tamaño de pantalla. Por lo que nuestra distribución de directorios es bastante similar a la siguiente:
De esta forma, nuestro árbol de directorios irá creciendo dependiendo de las necesidades de visualización de la aplicación.
Nota Importante: A partir de la versión Android 3.2 y superiores tenemos a nuestra disposición un método más avanzado para definir tamaños de pantalla que nos permite especificar recursos para ciertos tamaños de pantalla basados en los valores mínimos de ancho (width) y alto (height) en términos de dip/dp (density-independent pixels). En un siguiente post veremos esta otra técnica.
Creación de diferentes Bitmaps
A la par del cuidado que le pongamos a la construcción de los layouts, es igual de importante poner especial atención en que la escala de los recursos de imágenes que manejaremos dentro de la aplicación (iconos, fondos, barras, etc.) sea la apropiada para cada uno de los grupos de densidades que manejamos en Android: low, medium, high y extra-high. Esto nos ayudará a conseguir una buena calidad gráfica en todas las densidades de pantalla.
Para generar cada una de estas imágenes, se recomienda partir con el archivo en bruto hecho en un formato vectorizado y a partir de este sacar cada una de las imágenes en base a la siguiente escala (que está definida en la documentación oficial de Android):
- xhdpi: 2.0
- hdpi: 1.5
- mdpi: 1.0 (baseline)
- ldpi: 0.75
Esto significa que si generamos una imagen de 200×200 para los dispositivos de una densidad de xhdpi, deberíamos en teoría tener una versión de ese recurso con una dimensión de 150×150 en el directorio hdpi, una versión de ese recurso con una dimensión de 100×100 en el directorio mdpi y otra versión de ese recurso con una dimensión de 75×75 en el directorio ldpi.
Siguiendo esta práctica, el árbol de directorios de nuestro proyecto quedaría de la siguiente manera:
Nota importante: Los recursos de baja densidad (ldpi) no siempre son necesarios. En los casos en los que tengamos agregados recursos de alta resolución (hdpi), el sistema se encarga de escalar los recursos contenidos en este directorio a la mitad para que se puedan visualizar en los dispositivos con pantallas de baja densidad. Si no tenemos recursos en hdpi sí resulta importante agregar los recursos del directorio de baja resolución.
De la misma forma en la que Android gestiona qué archivos de layout llamar, presenta el mismo comportamiento para los recursos de imagen. Dependiendo de la resolución de pantalla que detecte el sistema será el set de imágenes que mande a llamar para mostrar en la UI de la aplicación.
Iconografía en Android
Para cerrar este post, voy a citar parte de la documentación que se ha actualizado en el sitio de Android Design, un apartado que se creó con el objetivo de empezar a estandarizar el diseño de las aplicaciones a partir del lanzamiento de la versión Android 4.0 Icecream Sandwich.
El apartado que voy a tratar corresponde a la guía de diseño para la iconografía de las aplicaciones. Esta sección de la documentación se centra en definir el tipo de iconos que podemos utilizar, su tamaño, proporciones y estilos.
Es importante que si quieres conseguir un trabajo de excelencia en el diseño de UI’s leas detalladamente esta referencia. En este post incluyo la parte de iconografía porque después de conocer cómo vamos a organizar nuestras imágenes también es importante saber cómo pedirle a los diseñadores estos recursos.
Vamos por partes.
¿Qué es un icono?
Es un gráfico que ocupa una pequeña porción del espacio de la pantalla y ofrece una representación rápida e intuitiva de una acción, estado o una aplicación. Tener presente este concepto es importante para no descuidar estas dos características. No tendría caso contar con imágenes que no representan lo que queremos decirle al usuario.
Los icono para el Launcher.
Son los iconos que representan visualmente a nuestra aplicación en el Home del dispositivo. Como los dispositivos Android son altamente personalizables y podemos cambiarle el fondo a nuestro teléfono, o los temas, será importante poner especial cuidado en que el icono sea claramente visible en cualquier variedad de color de fondo.
– Tamaños y escalas.
El tamaño de este icono en los dispositivos debe ser de 48×48 dp.
El tamaño de este icono para efectos de mostrarse en Google Play debe ser de 512×512 pixeles.
– Proporciones.
El área activa del icono debe medir tal cual los 48×48 dp, esto es, sin espacios en blanco (o aire que es el término que me han dicho se utiliza para nombrar esto).
– Estilo.
Es necesario utilizar una silueta distinta. Es decir, el icono debe estar diseñado cuidando sus tres dimensiones; una vista frontal con una perspectiva como si se estuviera viendo desde arriba, de modo que el usuario perciba cierta profundidad en el icono.
Los iconos de la Action Bar
Los iconos para la Action Bar son botones gráficos que representan las acciones más importantes que pueden realizar los usuarios dentro de tu aplicación. Es importante que cada icono tome una simple metáfora que represente un simple concepto que el usuario pueda captar a primera vista.
Iconos predefenidos pueden utilizarse para las acciones más comunes como lo son “Refrescar” (Refresh) o “Compartir” (Share). En la guía de diseño de Android está disponible un paquete de iconos que contiene archivos de Adobe Illustrator (vectores) para que podamos crear los sets para las diferentes densidades de pantalla utilizando los temas Holo Light y Holo Dark que es el tema oficial de la versión Android 4.0. Aparte de estos archivos tenemos iconos en PNG organizados en los directorios tal cual ocuparemos en nuestro proyecto y que son ejemplos de cómo tenemos que escalar los iconos.
El link de descarga es este.
– Tamaño y escalas.
Los iconos de la Action Bar para mostrarse en los dispositivos deben ser de 32×32 dp.
– Área focal y proporciones.
El área total de este icono debe ser tal cual los 32×32 dp.
Se debe considerar un cuadrante de visión de 24×24 dp que corresponden a la imagen que representa el icono.
– Estilo.
Debemos cuidar que este icono esté diseñado de forma pictográfica, plano, sin muchos detalles, con suaves formas y formas agudas. Si la imagen del icono es delgada podemos aplicarle una pequeña rotación de 45° hacia la izquierda o derecha con la intención de llenar el espacio focal definido en el punto anterior. El grosor de los trazos y los espacios negativos deben ser de mínimo 2 dp.
– Colores.
Podemos utilizarlos con un color de #333333, con un 60% de opacidad cuando el icono está activado y con un 30% de opacidad cuando está desactivado.
Podemos utilizarlos con un color de #FFFFFF, con un 80% de opacidad cuando el icono está activado y con un 30% de opacidad cuando está desactivado.
Los iconos contextuales/pequeños
Dentro del flujo de la aplicación es importante crear iconos que representen ciertas acciones o estatus dentro de los elementos que se están manejando. Estos elementos pueden ser listas, grid de imágenes, mensajes o cualquier otra cosa con la que pueda interactuar el usuario.
Por ejemplo, en la aplicación de Gmail, cuando marcamos algún correo como favorito, una pequeña estrella se pone al lado de dicho correo para notificarle al usuario la acción que acaba de lanzar. Estos iconos son los que se tratan en esta sección.
– Tamaño y escalas.
Estos iconos deben ser de 16×16 dp.
– Área focal y proporciones.
El tamaño total del archivo del icono es tal cual los 16×16 dp.
Se debe tomar en cuenta un cuadrante de visión de 12×12 dp, que corresponde a la imagen que representa la figura del icono.
– Estilo.
Este tipo de iconos deben tener un diseño neutral, plano y simple. Dado que las formas rellenas son más fáciles de ver que los trazos finos, utilízalas en el diseño de este tipo de iconos. Por último, trata de utilizar metáforas visuales sencillas que el usuario pueda reconocer fácilmente y entender su propósito en la aplicación.
– Colores.
Utiliza colores no-neutros con moderación y con un propósito. La estrella de favoritos que utiliza la aplicación de Gmail es un ejemplo de este uso de colores. Resulta también buena idea utilizar colores que contrasten con el fondo.
Los iconos para notificaciones
En el caso de que tu aplicación genere notificaciones, resulta útil proporcionar un icono para que el sistema pueda desplegar en la barra de estado cada que una nueva notificación esté disponible.
– Tamaños y escala.
Este tipo de iconos deben ser de 24×24 dp.
– Área focal y proporciones.
El tamaño total del archivo del icono es tal cual los 24×24 dp.
Se debe tomar en cuenta un cuadrante de visión de 22×22 dp, que corresponde a la imagen que representa la figura del icono.
– Estilo.
Es importante mantener un estilo plano y simple para este tipo de iconos, utilizando el mismo tipo de metáfora visual que la utilizada para el icono del launcher.
– Colores.
Todos los iconos de notificaciones deben ser totalmente de color blanco.
Con esto terminamos un primer tutorial de cómo trabajar con diferentes dispositivos en Android. Espero que este par de tips te sean realmente útiles en la práctica. Si quieres leer la documentación oficial de Android Design visita este link y navega por todos los estándares que el equipo de Google tiene disponibles para que empieces a construir aplicaciones más bellas.
Poco a poco iré publicando otros apartados de esta documentación para que vayan quedando más claros. A veces resulta más sencillo que alguien más te platique las cosas.
Referencia – Android Training