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

Otros

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

El icono más importante de una aplicación es sin duda el icono lanzador o launcher. Se utilizará para identificar tu aplicación, tanto en el sistema Android como en la tienda de aplicaciones. El icono a utilizar ha de indicarse en un atributo de AndroidManifest:

<application
    android:icon="@mipmap/ic_launcher"/>


Si vas a los recursos a ver como se defineic_launcher, verás que hay hasta 14 ficheros con este nombre. ¿Por qué tantos? La razón está en que a lo largo de las distintas versiones de Android han ido apareciendo hasta tres formas diferentes de crear este icono. Como queremos que el icono se vea bien en todas las versiones, tenemos que crearlo de varias formas. Veamos las tres formas de crear iconos en Android:

Heredados - legacy icons (1): Disponibles desde la primera versión de Android. Los dispositivos con versiones anteriores a la 8.0 los utilizan. Si la versión mínima de API es anterior, tendremos que incluirlos en la aplicación.

  Android ha sido concebido para ser utilizado en pantallas con una gran variedad de densidades gráficas . Este rango va desde 160 píxeles/pulgada (mdpi) hasta 640 píxeles/pulgada (xxxhdpi). Sin embargo, el ancho del icono queremos que sea igual en todas las pantallas, en concreto 0,3 pulgadas. Por lo tanto, con una densidad de 160ppp, necesitamos un icono de 0,3·160=48 píxeles de lado. Pero para 640dpi, necesitamos uno de 0,3·640=192 píxeles. Accede en los recursos a res/mipmap/ic_launcher y observarás como se ha creado un icono para cada una de la densidades gráficas. Recuerda que la carpeta mipmap se utilizaba para recursos gráficos que no han de ser re-escalados.





Circulares - round icons (2): Aparecen en la versión 7.1 (API 25) cuando muchas distribuciones de Android optaron por utilizar iconos circulares. Algunas incluso, daban la posibilidad de escoger al usuario entre iconos normales y circulares:


Para que el icono de nuestra aplicación se vea uniforme con el resto de iconos, es interesante proporcionar los dos tipos de iconos. Para ello se ha añadido un nuevo atributo en AndroidManifest:
 
<application
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"… />
Adaptativos - adaptative icons (3): Aparecen en la versión 8.0 (API 26) para dar mayor flexibilidad en la representación de los iconos. Para diseñar un icono habrá que proporcionar dos capas: fondo y primer plano; y luego se aplicará una máscara:


Nosotros proporcionaremos las dos capas, pero la máscara la pondrá el sistema según las preferencias del usuario:


Los iconos adaptativos se definen en un fichero xml de la siguiente forma:

<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

Verifica como ambos ficheros están dentro de la carpeta drawable. Son definidos de forma vectorial. Trabajar con un formato vectorial tiene importantes ventajas. Por ejemplo, los iconos pueden generarse con diferentes dimensiones o pueden girarse. Además, ocupan menos memoria.

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://youtu.be/wt0Jzc9UHNw

https://material.io/design/iconography

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

https://material.io/tools/icons
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 dos gráficos vectoriales para crear el icono de una aplicación. El primer plano es una estrella amarilla y el fondo es blanco con cuatro rallas azules.

1.     Pulsa con el botón derecho sobre res/drawable y selecciona New/Drawable Resource File. Introduce en nombre estrella.xml. Reemplaza el contenido por:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="60dp"
    android:height="100dp"
    android:viewportWidth="6.0"
    android:viewportHeight="10.0">
    <path android:fillColor="#D9A802"
          android:pathData=
          "M0,2L2,2L3,0L4,2L6,2L4.5,4L6,6L4,6L3,10L2,6L0,6L1.5,4Z"/>
</vector>
NOTA:  El objetivo de esta unidad no es describir los gráficos vectoriales, pero si tienes curiosidad te damos algunas claves para que entiendas este fichero. Primero se indica el ancho y alto que tendrá el gráfico y luego el ancho y alto con el que lo vamos a dibujarlo. La etiqueta path permite realizar un trazado rellenándolo del color indicado. Nos movemos a la coordenada 0,2 (M0,2); trazamos una línea hasta 2,2 (L2,2); otra línea hasta 3,0 (L3,0). Se sigue trazando líneas hasta llegar a Z, que significa trazar una línea hasta el primer punto (0,2) y rellena la figura.

2.     Repite el proceso para el fichero fondo.xml.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="5.0"
    android:viewportHeight="5.0">
    <path android:fillColor="#FFFFFF"
          android:pathData="M0,0h5v5h-5z"/>
    <path android:strokeColor="#394077"
          android:strokeWidth="0.1"
          android:pathData="M0,1L5,1 M0,2L5,2 M0,3L5,3 M0,4L5,4"/>
</vector>
  NOTA: Este fichero dibuja dos path. Un rectángulo blanco que ocupa toda el área de dibujo y cuatro líneas horizontales de color azul.

3.   Selecciona File/New/Image Asset. Selecciona en Icon Type: Launcher Icons (Adaptive and Legacy); en Name: ic_mi_icono; en Asset Type: Image; en Path: pulsa el icono de la carpeta, en la parte superior pulsa en el icono de Android, para buscar un fichero en tu proyecto. Selecciona app\ src\ main\ res\ drawable\ estrella.xml. Desplaza la barra Resize hasta conseguir un tamaño adecuado.

4.   Selecciona la lengüeta Background Layer. Selecciona en Asset Type: Image; en Path: pulsa el icono de la carpeta y repite el proceso anterior para seleccionar fondo.xml. Desplaza la barra Resize hasta conseguir un tamaño adecuado. El resultado ha de ser similar al siguiente:


5.     Pulsa en Next y se mostrará una previsualización de todos los ficheros generados. Pulsa en Finish para acabar.

6.     Verifica como se han creado en res/mipmap/ic_mi_icono cinco gráficos png a partir del gráfico vectorial. Selecciona el de densidad mdpi. El resultado no ha sido 100% satisfactorio.


 

Las líneas horizontales tendrían que ser del mismo grosor. Para ver si el usuario llegará a apreciarlo, reduce el zoom hasta que el icono tenga un tamaño similar al que tendrá en un móvil. Si sigues apreciando que las rallas son diferentes, es buena idea retocar este fichero. Abre el png con un editor gráfico y redibuja las líneas horizontales para que tenga el mismo grosor.
Aunque este no es el caso, algunos iconos tienen muchos detalles. Cuando se representan para mdpi con tan solo 48x48 píxeles, puede ocurrir que se vea de forma incorrecta. En baja densidad se recomienda cambiar a un diseño más simple. Mira el siguiente ejemplo:
 

7.     Verifica como se han creado en res/mipmap/ic_mi_icono_round cinco gráficos png con forma circular.

8.     Verifica como se ha creado el icono adaptativo en res/mipmap/ic_mi_icono.xml. Comprueba también como se han creado las dos capas que corresponden a versiones redimensionadas de los ficheros estrella.xml y fondo.xml.

9.     Para aplicar este icono como el lanzador de tu aplicación modifica el fichero AndroidManifest:
 
<application
    android:icon="@mipmap/ic_mi_icono"
    android:roundIcon="@mipmap/ic_mi_icono"… />
10.    Ejecuta el proyecto y comprueba que el icono asociado es correcto.
 

Preguntas de repaso: Iconos