Un icono es una imagen que toma una porción de la pantalla y proporciona una rápida e intuitiva representación de una acción, un estado o una aplicación.
Cuando diseñas los iconos para tu aplicación, es importante pensar que tu aplicación puede ser instalada en una amplia variedad de dispositivos con unos rangos de densidades de píxeles diferentes, como se menciona en Dispositivos y Pantallas. Pero puedes hacer que tus iconos se vean geniales en todos los dispositivos proporcionando un tamaño de icono para cada tamaño de pantalla. Cuando tu aplicación se ejecuta, Android comprueba las características de la pantalla del dispositivo y carga los recursos específicos de densidad adecuados para tu aplicación.
Entonces puedes colocar cada icono en varios tamaños para poder soportar diferentes densidades, las guías de abajo explican las dimensiones de los iconos en unidades dp, las cuales se basan en las dimensiones de los píxeles de una pantalla de densidad media (MDPI).
Así pues, para crear un icono para diferentes densidades, deberías seguir el siguiente ratio de escala: 2:3:4:6:8 entre las cinco densidades principales (medium, high, x-high, xx-high y xxx-high respectivamente). Por ejemplo, considera que el tamaño de la pantalla de un icono en el launcher debe ser 48×48 dp. Esto significa que los recursos de la linea base (MDPI) son 48×48 px, y los recursos de alta densidad (HDPI) deberían ser 1.5x de la línea base, 72×72 px, los recursos siguientes de alta densidad (XHDPI) deberían ser 2x de la línea base, es decir, 96×96 px, y continuaría así en adelante.
Nota: Android también soporta pantallas de baja densidad (LDPI), pero normalmente no necesitarás crear recursos personalizados para estas pantallas porque Android reduce la escala de tus recursos HDPI eficazmente a la mitad para encajar con el tamaño esperado.
Contenidos
Lanzador (Launcher)
El icono del launcher es la representación visual de tu aplicación en la Pantalla de Inicio (Escritorio) o en la pantalla Todas las Aplicaciones (Box de Aplicaciones). Desde que un usuario puede cambiar el fondo de pantalla de la Pantalla de Inicio, asegúrate de que tu icono para el launcher es claramente visible en cualquier tipo de fondo.
Barra de Acciones (Action Bar)
Los iconos de la barra de acciones son imágenes que representan las acciones más importantes que las personas realizan en tu aplicación. Cada uno debería ser una metáfora que represente un concepto simple que la mayoría de las personas pueda comprender con un rápido vistazo.
Los signos o iconos predefinidos deberían ser usados para ciertas acciones comunes como son “refrescar” y “compartir”. El link de descarga de abajo proporciona un paquete con los iconos, los cuales están escalados para varias densidades de pantalla y están listos para usar con los temas Holo Claro y Holo Oscuro. El paquete también incluye iconos sin estilo los cuales tu puedes modificar para que tomen la apariencia de tu tema en el caso de que sea personalizado, además de los archivos fuentes para Adobe® Illustrator® para poder tener una mayor personalización.
Descargar Iconos
Descargar Paquete de Iconos de la Barra de Acciones
Iconos Pequeños / Contextuales
Dentro del cuerpo de tu aplicación, usa pequeños iconos para las acciones superficiales y/o proporciona estados para elementos específicos. Por ejemplo, en la aplicación Gmail, cada mensaje tiene un icono en forma de estrella que marca el mensaje como importante.
Iconos de las Notificaciones
Si tu aplicación genera notificaciones, proporciona un icono que el sistema pueda mostrar en la barra de estado en cualquier momento en que haya una nueva notificación disponible.
Consejos de diseño
Aquí hay algunos trucos que tu puedes encontrar útiles tanto para crear iconos como otros recursos gráficos para tu aplicación. Estos trucos asumen que tu vas a usar Adobe® Photoshop® u otro programa de edición vectorial similar como Adobe® Illustrator®.
Usa formas vectoriales cuando sea posible
Muchos programas de edición vectorial te permiten usar una combinación de formas vectoriales, capas y efectos. Cuando puedas, usa formas vectoriales para así, si surge la necesidad, los recursos podrán ser aumentados en resolución sin perder calidad, detalle o nitidez en los bordes.
|
Tipo de Recurso |
Prefijo |
Ejemplo |
|
Iconos |
ic_ |
ic_star.png |
|
Iconos de la pantalla de inicio |
ic_launcher |
ic_launcher_calendar.png |
|
Iconos del menú y de la barra de acciones |
ic_menu |
ic_menu_archive.png |
|
Iconos de la barra de estado |
ic_stat_notify |
ic_stat_notify_msg.png |
|
Iconos de las pestañas |
ic_tab |
ic_tab_recent.png |
|
Iconos de los diálogos |
ic_dialog |
ic_dialog.png |
Ten en cuenta que no estás obligado a usar prefijos compartidos o de cualquier tipo, es solo para facilitar el trabajo.
Configura un espacio de trabajo que organice tus archivos en función de la densidad
Soportar múltiples densidades de pantalla significa crear varias versiones del mismo icono. Para ayudar a mantener las múltiples copias de los archivos seguras y fáciles de encontrar, nosotros recomendamos crear una estructura de directorios en tu espacio de trabajo que organice los recursos en base a la densidad. Por ejemplo:
art/...
mdpi/...
_pre_production/...
working_file.psd
finished_asset.png
hdpi/...
_pre_production/...
working_file.psd
finished_asset.png
xhdpi/...
_pre_production/...
working_file.psd
finished_asset.png
xxhdpi/...
_pre_production/...
working_file.psd
finished_asset.png
Como la estructura de tu espacio de trabajo es similar a la de la aplicación, tu puedes determinar rápidamente que recursos deberían ser copiados a cada directorio de recursos. Separar los recursos en función de la densidad también ayuda a detectar cualquier variante en los nombres de los archivos a lo largo de todas las densidades, lo cual es importante porque los recursos correspondientes a diferentes densidades deben tener el mismo nombre de archivo.
Para comparar, aquí está la estructura de directorios de recursos de una aplicación típica.
res/...
drawable-ldpi/...
finished_asset.png
drawable-mdpi/...
finished_asset.png
drawable-hdpi/...
finished_asset.png
drawable-xhdpi/...
finished_asset.png
drawable-xxhdpi/...
finished_asset.png
mipmap-ldpi/...
finished_launcher_asset.png
mipmap-mdpi/...
finished_launcher_asset.png
mipmap-hdpi/...
finished_launcher_asset.png
mipmap-xhdpi/...
finished_launcher_asset.png
mipmap-xxhdpi/...
finished_launcher_asset.png
mipmap-xxxhdpi/...
finished_launcher_asset.png
Para más información sobre como guardar recursos en un proyecto de una aplicación, observa Proporcionar Recursos.
Para más información sobre el uso de los directorios mipmap, observa Vista general de Gestión de proyectos.
Proporciona un icono del launcher con una densidad xxx xxx-high
Algunos dispositivos escalan el icono del launcher hasta un 25 más. Por ejemplo, si tu imagen del icono del launcher tiene una alta densidad, y esta es extra-extra-hight, el proceso de escalado hará que aparezcan menos dientes de sierra. Deberías siempre proporcionar un icono de alta densidad para el launcher en el directorio mipmap-xxxhdpi, el cual el sistema utilizará en lugar de escalar una versión más pequeña de dicho icono.
Nota: El calificador mipmap-xxxhdpi se necesita solo para proporcionar el icono del launcher que puede aparecer más grande de lo usual, en dispositivos xxhdpi. Es una buena práctica colocar todos tus iconos del launcher en sus respectivos directorios
res/mipmap-[density]/. Esto habilita a tu app para mostrar iconos del launcher que tengan una densidad más alta que el dispositivo, evitando el sobreescalado de una versión con peor densidad del icono. No necesitas proporcionar activos xxxhdpi para todas tus imágenes de tu app.
Observa Soporte de Varias Pantallas para más información.
Elimina los metadatos innecesarios de los recursos finales.
Aunque las herramientas del SDK de Android automáticamente comprimirán los PNGs cuando se empaqueta la aplicación dentro de un binario de la aplicación, una buena práctica es eliminar las cabeceras y los metadatos innecesarios de tus recursos PNG. Las herramientas tales como OptiPNG o Pngcrush puede asegurarse de que estos metadatos son eliminados y que los tamaños de los archivos de recursos de imágenes están optimizados.
Iconos Material Design
Google ha actualizado toda esta información, ¡echa un vistazo!
Puedes ver más información sobre Iconografía en la página oficial de Google en inglés pulsando aquí.