Creación y uso de iconos

En el apartado anterior hemos creado una barra de acciones donde se mostraban algunos iconos. Se han utilizado iconos disponibles en el sistema Android, es decir, recursos ya almacenados en el sistema. Otra alternativa es crear tus propios iconos y almacenarlos en la carpeta  res/mipmap. En este apartado aprenderemos a hacerlo.

video[Tutorial Añadiendo iconos en Android

En Android se utilizan diferentes tipos de iconos según su utilidad. La siguiente tabla muestra los más importantes:

Tipo de iconos

Finalidad

Ejemplos

Lanzadores

Representa la aplicación en la pantalla principal del dispositivo

Barra de acciones

Opciones disponibles en la barra de acciones

 
          

Notificaciones

Pequeños iconos que aparecen en la barra de estado (véase capítulo 8)

Otros

También es muy frecuente el uso de iconos en cuadros de dialogo y en RecyclerView, etc.

A la hora de  diseñar tus propios iconos, has de tener en cuenta algunos aspectos. En primer lugar, recuerda que Android ha sido concebido para ser utilizado en dispositivos con una gran variedad de densidades gráficas. Este rango puede ir desde 100 píxeles/pulgada (ldpi) hasta 340 píxeles/pulgada (xhdpi). Por lo tanto, vas a tener que crear tus iconos en varias densidades gráficas.

Resulta interesante que plantees tus diseños con una resolución como mínimo de 300 píxeles/pulgada. Luego puedes usar las herramientas del sistema para obtener estos icones en diferentes densidades. Si para alguna densidad el resultado no es el adecuado tendrás que realizar algunos retoques (en el siguiente ejercicio se muestra un ejemplo).

En segundo lugar, tu aplicación se ejecutará dentro de un sistema donde se utilizan ciertas guías de estilo. Si quieres que tus iconos no desentonen, lee la documentación que se indica a continuación.

Enlaces de interés:

Guía de estilo para iconos:La siguiente página describe las guías de estilo para los iconos en Material Design:

        https://material.google.com/style/icons.html

Recursos de iconos:En las siguientes páginas puedes encontrar gran variedad de iconos:

https://materialdesignicons.com

https://design.google.com/icons/#ic_list

https://android-material-icon-generator.bitdroid.de/

Ejercicio: Creación de iconos personalizados

Veamos un ejemplo práctico de como crear un icono: El diseñador gráfico de nuestra empresa nos acaba de pasar el icono asociado para iniciar la aplicación que estamos diseñando (launcher icon).


(Pulsa con el botón derecho sobre el gráfico anterior para descargarlo)

Para asignarlo a una aplicación realiza los siguientes pasos:

1. Descarga el gráfico anterior  y llámale icon.png.

2. En el explorador proyecto pulsa con el botón derecho sobre la carpeta res y selecciona  File / New / Image Assets.

3.  En el campo Name: introduce ic_mi_icono; en Asser Type: Image y en Path: indica el fichero descargado en el paso 1. El resultado ha de ser similar a:

En la parte inferior de la página podrás previsualizar cómo quedarán las imágenes para diferentes densidades gráficas.

4.     Pulsa el botón Next y en la siguiente pantalla pulsa Finish.

5.     Verifica como dentro de la carpeta res/mipmap se han creado 5 recursos alternativos para diferentes densidades gráficas:

6.    El resultado es aceptable para algunas opciones. Pero en algunos casos el texto no se lee o unas líneas horizontales quedan más gruesas que otras. Puede ser interesante retocar estos fichero png usando un editor de gráficos. Por ejemplo, retoca los iconos hdpi y mdpi para que se pueda leer más claramente el texto “Aplicación” y redibuja las líneas horizontales para que tenga el mismo grosor y separación.

7.    Para que el nuevo icono sea utilizado como lanzador de nuestra aplicación, abre AndroidManifest.xml y reemplaza el valor del atributo iconcomo se muestra a continuación:

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launchermi_icono"

8. Visualiza el resultado instalando la aplicación en diferentes dispositivos con diferentes densidades gráficas.

Práctica: Creación de iconos para la aplicación

1.     Dibuja o busca en Internet un gráfico que sea adecuado para usar como icono de inicio en la aplicación.

2.     Repite los pasos indicados en el ejercicio anterior para crear los iconos en las diferentes densidades gráficas.

Ejercicio: Creación de iconos para la aplicación Mis Lugares

1.     Descarga y descomprime el siguiente fichero:

http://www.dcomg.upv.es/~jtomas/android/ficheros/mislugares_iconos.zip

2.     Utiliza los iconos que contiene para asociarlos a la aplicación Mis Lugares. Para copiarlos más fácilmente, pulsa en el icono   y cambia la vista del explorador de proyecto a Project Files.

3.   Arrastra el fichero ic_launcher.png de cada una de las carpetas a las carpetas con el mismo nombre del proyecto.

Preguntas de repaso: Iconos