Para empezar a trabajar con estos conceptos, necesitamos saber que:<\/p>\n
- \n
- Existen cuatro tama\u00f1os est\u00e1ndar:\u00a0peque\u00f1o (small<\/em>), normal, grande (large<\/em>) y extra grande (xlarge<\/em>).<\/li>\n
- Existen cuatro densidades est\u00e1ndar:\u00a0low (ldpi<\/em>), medium (mdpi<\/em>), high (hdpi<\/em>) y extra high (xhdpi<\/em>).<\/li>\n<\/ul>\n
Para declarar los diferentes layouts y archivos gr\u00e1ficos (bitmaps) que utilizaremos para diferentes pantallas, resulta \u00fatil organizar estos recursos en directorios separados.<\/p>\n
Otro punto importante es saber que la orientaci\u00f3n de pantalla (portrait<\/em> y landscape<\/em>) se consideran como una variaci\u00f3n al tama\u00f1o de pantalla, por lo que tambi\u00e9n es conveniente trabajar en el dise\u00f1o de los layouts destinados a cada orientaci\u00f3n para optimizar la experiencia de usuario.<\/p>\n
Ahora vamos a aprender c\u00f3mo empezar a organizar nuestros recursos del proyecto de acuerdo a las necesidades de visualizaci\u00f3n de la aplicaci\u00f3n. Empecemos con los layouts.<\/p>\n
<\/p>\n
Creaci\u00f3n de diferentes layouts para una aplicaci\u00f3n Android<\/strong><\/p>\n
Para optimizar la experiencia de usuario en los diferentes tama\u00f1os de pantalla, debes crear un archivo XML de layout por cada tama\u00f1o 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<\/em>. Para los casos en que estemos realizando el \u00f3ptimo soporte para m\u00faltiples tama\u00f1os de pantalla debemos crear un directorio layout-[tama\u00f1o_pantalla]<\/em> donde los valores small<\/em>, large<\/em> y xlarge<\/em> son los sufijos a sustituir seg\u00fan sea el caso y siendo el directorio layout<\/em> que nos crea Eclipse por default, el tama\u00f1o normal<\/em> soportado.<\/p>\n
Por lo tanto, si estuvi\u00e9ramos creando un layout para definir el estilo de una pantalla\u00a0en nuestra aplicaci\u00f3n y quisi\u00e9ramos que este layout estuviera soportado por pantallas de tama\u00f1o normal y grande, nuestra estructura de directorios ser\u00eda muy similar a la siguiente:<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/diferentesPantallas_01.png\" "\\"Diferentes")
<\/a><\/p>\nComo se muestra en el ejemplo, el archivo de layout se llama de la misma forma para ambas carpetas, de esta forma Android podr\u00e1 llamar al archivo main.xml<\/em> apropiado dependiendo del tama\u00f1o de pantalla que tenga el dispositivo que se encuentre ejecutando nuestra aplicaci\u00f3n. Esta gesti\u00f3n de recursos la hace Android, por lo que nosotros \u00fanicamente 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<\/em> para el soporte de varios idiomas<\/a>).<\/p>\n
De esta forma, para llamar los layouts lo haremos de la forma en que siempre lo hemos hecho:<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/diferentesPantallas_02.png\" "\\"Diferentes")
<\/a><\/p>\nLo \u00fanico que var\u00eda de estos archivos es su contenido, pues ambos pueden tener un acomodo distinto de los componentes que representan la pantalla de la aplicaci\u00f3n. Esta pr\u00e1ctica te ayudar\u00e1 a construir UI\u2019s optimizadas para cada tama\u00f1o de pantalla.<\/p>\n
Por otro lado, el tema del cambio de orientaci\u00f3n en el dispositivo es algo que se debe tambi\u00e9n manejar en el dise\u00f1o de los layouts dependiendo si en nuestro dise\u00f1o consideramos que habr\u00e1 alg\u00fan comportamiento de respuesta al momento que nuestro usuario rote su tel\u00e9fono.<\/p>\n
En este segundo caso, si quisi\u00e9ramos que una pantalla luzca bien en ambas orientaciones deberemos incluir un directorio extra llamado layout-land<\/em> cuyo sufijo corresponde a la abreviaci\u00f3n de landscape<\/em>, es decir, a la orientaci\u00f3n horizontal del tel\u00e9fono.<\/p>\n
Por default, la carpeta layout<\/em>\u00a0(que nos crea Eclipse) contiene los archivos para el dise\u00f1o de pantallas que corresponden al tama\u00f1o normal<\/em> y cuya orientaci\u00f3n es portrait<\/em>.<\/p>\n
Por lo tanto, la distribuci\u00f3n de directorios para el soporte de ambas orientaciones de pantalla quedar\u00eda de la siguiente manera:<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/diferentesPantallas_03.png\" "\\"Diferentes")
<\/a><\/p>\nEn un proyecto real, manejamos layouts para soporte de orientaci\u00f3n y tama\u00f1o de pantalla. Por lo que nuestra distribuci\u00f3n de directorios es bastante similar a la siguiente:<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/diferentesPantallas_04.png\" "\\"Diferentes")
<\/a><\/p>\nDe esta forma, nuestro \u00e1rbol de directorios ir\u00e1 creciendo dependiendo de las necesidades de visualizaci\u00f3n de la aplicaci\u00f3n.<\/p>\n
Nota Importante:<\/strong> A partir de la versi\u00f3n Android 3.2 y superiores tenemos a nuestra disposici\u00f3n un m\u00e9todo m\u00e1s avanzado para definir tama\u00f1os de pantalla que nos permite especificar recursos para ciertos tama\u00f1os de pantalla basados en los valores m\u00ednimos de ancho (width<\/em>) y alto (height<\/em>) en t\u00e9rminos de dip\/dp <\/em>(density-independent pixels<\/em>). En un siguiente post veremos esta otra t\u00e9cnica.<\/p>\n
<\/p>\n
Creaci\u00f3n de diferentes Bitmaps<\/strong><\/p>\n
A la par del cuidado que le pongamos a la construcci\u00f3n de los layouts, es igual de importante poner especial atenci\u00f3n en que la escala de los recursos de im\u00e1genes que manejaremos dentro de la aplicaci\u00f3n (iconos, fondos, barras, etc.) sea la apropiada para cada uno de los grupos de densidades que manejamos en Android: low<\/em>, medium<\/em>, high<\/em> y extra-high<\/em>. Esto nos ayudar\u00e1 a conseguir una buena calidad gr\u00e1fica en todas las densidades de pantalla.<\/p>\n
Para generar cada una de estas im\u00e1genes, se recomienda partir con el archivo en bruto hecho en un formato vectorizado y a partir de este sacar cada una de las im\u00e1genes en base a la siguiente escala (que est\u00e1 definida en la documentaci\u00f3n oficial de Android):<\/p>\n
- \n
- xhdpi: 2.0<\/li>\n
- hdpi: 1.5<\/li>\n
- mdpi: 1.0 (baseline)<\/li>\n
- ldpi: 0.75<\/li>\n<\/ul>\n
Esto significa que si generamos una imagen de 200\u00d7200 para los dispositivos de una densidad de xhdpi, deber\u00edamos en teor\u00eda tener una versi\u00f3n de ese recurso con una dimensi\u00f3n de 150\u00d7150 en el directorio hdpi, una versi\u00f3n de ese recurso con una dimensi\u00f3n de 100\u00d7100 en el directorio mdpi y otra versi\u00f3n de ese recurso con una dimensi\u00f3n de 75\u00d775 en el directorio ldpi.<\/p>\n
Siguiendo esta pr\u00e1ctica, el \u00e1rbol de directorios de nuestro proyecto quedar\u00eda de la siguiente manera:<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/diferentesPantallas_05.png\" "\\"Diferentes")
<\/a><\/p>\nNota importante:<\/strong> Los recursos de baja densidad (ldpi) no siempre son necesarios. En los casos en los que tengamos agregados recursos de alta resoluci\u00f3n (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\u00ed resulta importante agregar los recursos del directorio de baja resoluci\u00f3n.<\/p>\n
De la misma forma en la que Android gestiona qu\u00e9 archivos de layout llamar, presenta el mismo comportamiento para los recursos de imagen. Dependiendo de la resoluci\u00f3n de pantalla que detecte el sistema ser\u00e1 el set de im\u00e1genes que mande a llamar para mostrar en la UI de la aplicaci\u00f3n.<\/p>\n
<\/p>\n
Iconograf\u00eda en Android<\/strong><\/p>\n
Para cerrar este post, voy a citar parte de la documentaci\u00f3n que se ha actualizado en el sitio de Android Design<\/strong>, un apartado que se cre\u00f3 con el objetivo de empezar a estandarizar el dise\u00f1o de las aplicaciones a partir del lanzamiento de la versi\u00f3n Android 4.0 Icecream Sandwich.<\/p>\n
El apartado que voy a tratar corresponde a la gu\u00eda de dise\u00f1o para la iconograf\u00eda<\/a> de las aplicaciones.\u00a0Esta secci\u00f3n de la documentaci\u00f3n se centra en definir el tipo de iconos que podemos utilizar, su tama\u00f1o, proporciones y estilos.<\/p>\n
Es importante que si quieres conseguir un trabajo de excelencia en el dise\u00f1o de UI\u2019s leas detalladamente esta referencia. En este post incluyo la parte de iconograf\u00eda porque despu\u00e9s de conocer c\u00f3mo vamos a organizar nuestras im\u00e1genes tambi\u00e9n es importante saber c\u00f3mo pedirle a los dise\u00f1adores estos recursos.<\/p>\n
Vamos por partes.<\/p>\n
<\/p>\n
\u00bfQu\u00e9 es un icono?<\/strong><\/p>\n
Es un gr\u00e1fico que ocupa una peque\u00f1a porci\u00f3n del espacio de la pantalla y ofrece una representaci\u00f3n r\u00e1pida e intuitiva<\/strong> de una acci\u00f3n, estado o una aplicaci\u00f3n. Tener presente este concepto es importante para no descuidar estas dos caracter\u00edsticas. No tendr\u00eda caso contar con im\u00e1genes que no representan lo que queremos decirle al usuario.<\/p>\n
<\/p>\n
Los icono para el Launcher.<\/strong><\/p>\n
Son los iconos que representan visualmente a nuestra aplicaci\u00f3n en el Home del dispositivo. Como los dispositivos Android son altamente personalizables y podemos cambiarle el fondo a nuestro tel\u00e9fono, o los temas, ser\u00e1 importante poner especial cuidado en que el icono sea claramente visible en cualquier variedad de color de fondo.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/diferentesPantallas_06.png\" "\\"Diferentes")
<\/a><\/p>\n– Tama\u00f1os y escalas.<\/p>\n
El tama\u00f1o de este icono en los dispositivos debe ser de 48\u00d748 dp<\/strong>.<\/p>\n
El tama\u00f1o de este icono para efectos de mostrarse en Google Play debe ser de 512\u00d7512 pixeles<\/strong>.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_launcher_size.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n– Proporciones.<\/p>\n
El \u00e1rea activa del icono debe medir tal cual los 48\u00d748 dp, esto es, sin espacios en blanco (o aire que es el t\u00e9rmino que me han dicho se utiliza para nombrar esto).<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_launcher_focal.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n– Estilo.<\/p>\n
Es necesario utilizar una silueta distinta. Es decir, el icono debe estar dise\u00f1ado 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.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_launcher_style.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n<\/p>\n
Los iconos de la Action Bar<\/strong><\/p>\n
Los iconos para la Action Bar son botones gr\u00e1ficos que representan las acciones m\u00e1s importantes que pueden realizar los usuarios dentro de tu aplicaci\u00f3n. Es importante que cada icono tome una simple met\u00e1fora que represente un simple concepto que el usuario pueda captar a primera vista.<\/p>\n
Iconos predefenidos pueden utilizarse para las acciones m\u00e1s comunes como lo son \u201cRefrescar\u201d (Refresh) o \u201cCompartir\u201d (Share). En la gu\u00eda de dise\u00f1o de Android est\u00e1 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<\/em>\u00a0y Holo Dark<\/em>\u00a0que es el tema oficial de la versi\u00f3n 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\u00f3mo tenemos que escalar los iconos.<\/p>\n
El link de descarga es este<\/a>.<\/p>\n
– Tama\u00f1o y escalas.<\/p>\n
Los iconos de la Action Bar para mostrarse en los dispositivos deben ser de 32\u00d732 dp<\/strong>.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_actionbar_size.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n– \u00c1rea focal y proporciones.<\/p>\n
El \u00e1rea total de este icono debe ser tal cual los 32\u00d732 dp<\/strong>.<\/p>\n
Se debe considerar un cuadrante de visi\u00f3n de 24\u00d724 dp<\/strong> que corresponden a la imagen que representa el icono.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_actionbar_focal.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n– Estilo.<\/p>\n
Debemos cuidar que este icono est\u00e9 dise\u00f1ado de forma pictogr\u00e1fica, plano, sin muchos detalles, con suaves formas y formas agudas. Si la imagen del icono es delgada podemos aplicarle una peque\u00f1a rotaci\u00f3n de 45\u00b0 hacia la izquierda o derecha con la intenci\u00f3n de llenar el espacio focal definido en el punto anterior. El grosor de los trazos y los espacios negativos deben ser de m\u00ednimo 2 dp<\/strong>.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_actionbar_style.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n– Colores.<\/p>\n
Podemos utilizarlos con un color de #333333, con un 60% de opacidad cuando el icono est\u00e1 activado y con un 30% de opacidad cuando est\u00e1 desactivado.<\/p>\n
Podemos utilizarlos con un color de #FFFFFF, con un 80% de opacidad cuando el icono est\u00e1 activado y con un 30% de opacidad cuando est\u00e1 desactivado.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_actionbar_colors.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n<\/p>\n
Los iconos contextuales\/peque\u00f1os<\/strong><\/p>\n
Dentro del flujo de la aplicaci\u00f3n es importante crear iconos que representen ciertas acciones o estatus dentro de los elementos que se est\u00e1n manejando. Estos elementos pueden ser listas, grid de im\u00e1genes, mensajes o cualquier otra cosa con la que pueda interactuar el usuario.<\/p>\n
Por ejemplo, en la aplicaci\u00f3n de Gmail, cuando marcamos alg\u00fan correo como favorito, una peque\u00f1a estrella se pone al lado de dicho correo para notificarle al usuario la acci\u00f3n que acaba de lanzar. Estos iconos son los que se tratan en esta secci\u00f3n.<\/p>\n
– Tama\u00f1o y escalas.<\/p>\n
Estos iconos deben ser de\u00a016\u00d716 dp<\/strong>.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_small_size.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n– \u00c1rea focal y proporciones.<\/p>\n
El tama\u00f1o total del archivo del icono es tal cual los 16\u00d716 dp.<\/p>\n
Se debe tomar en cuenta un cuadrante de visi\u00f3n de 12\u00d712 dp, que corresponde a la imagen que representa la figura del icono.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_small_focal.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n– Estilo.<\/p>\n
Este tipo de iconos deben tener un dise\u00f1o neutral, plano y simple. Dado que las formas rellenas son m\u00e1s f\u00e1ciles de ver que los trazos finos, util\u00edzalas en el dise\u00f1o de este tipo de iconos. Por \u00faltimo, trata de utilizar met\u00e1foras visuales sencillas que el usuario pueda reconocer f\u00e1cilmente y entender su prop\u00f3sito en la aplicaci\u00f3n.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_small_style.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n– Colores.<\/p>\n
Utiliza colores no-neutros con moderaci\u00f3n y con un prop\u00f3sito. La estrella de favoritos que utiliza la aplicaci\u00f3n de Gmail es un ejemplo de este uso de colores. Resulta tambi\u00e9n buena idea utilizar colores que contrasten con el fondo.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_small_colors.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n<\/p>\n
Los iconos para notificaciones<\/strong><\/p>\n
En el caso de que tu aplicaci\u00f3n genere notificaciones, resulta \u00fatil proporcionar un icono para que el sistema pueda desplegar en la barra de estado cada que una nueva notificaci\u00f3n est\u00e9 disponible.<\/p>\n
– Tama\u00f1os y escala.<\/p>\n
Este tipo de iconos deben ser de 24\u00d724 dp<\/strong>.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_notification_size.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n– \u00c1rea focal y proporciones.<\/p>\n
El tama\u00f1o total del archivo del icono es tal cual los 24\u00d724 dp<\/strong>.<\/p>\n
Se debe tomar en cuenta un cuadrante de visi\u00f3n de 22\u00d722 dp<\/strong>, que corresponde a la imagen que representa la figura del icono.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_notification_focal.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n– Estilo.<\/p>\n
Es importante mantener un estilo plano y simple para este tipo de iconos, utilizando el mismo tipo de met\u00e1fora visual que la utilizada para el icono del launcher.<\/p>\n
![\"\"](\"http:\/\/androideity.com\/wp-content\/uploads\/2012\/06\/iconography_notification_style.png\" "\\"Iconograf\u00eda")
<\/a><\/p>\n– Colores.<\/p>\n
Todos los iconos de notificaciones deben ser totalmente de color blanco.<\/p>\n
<\/p>\n
Con esto terminamos un primer tutorial de c\u00f3mo trabajar con diferentes dispositivos en Android. Espero que este par de tips te sean realmente \u00fatiles en la pr\u00e1ctica. Si quieres leer la documentaci\u00f3n oficial de Android Design visita este link<\/a> y navega por todos los est\u00e1ndares que el equipo de Google tiene disponibles para que empieces a construir aplicaciones m\u00e1s bellas.<\/p>\n
Poco a poco ir\u00e9 publicando otros apartados de esta documentaci\u00f3n para que vayan quedando m\u00e1s claros. A veces resulta m\u00e1s sencillo que alguien m\u00e1s te platique las cosas.<\/p>\n
<\/p>\n
- Existen cuatro densidades est\u00e1ndar:\u00a0low (ldpi<\/em>), medium (mdpi<\/em>), high (hdpi<\/em>) y extra high (xhdpi<\/em>).<\/li>\n<\/ul>\n