Cómo cambiar el ícono de la app

El ícono de la app es importante para distinguirla. También aparece en diferentes lugares, por ejemplo, en la pantalla principal, en la pantalla Todas las apps y en la app de Configuración.

El ícono de la app también se conoce como ícono de selector. Launcher (selector) hace referencia a la experiencia cuando presionas el botón de inicio de un dispositivo Android a fin de ver y organizar tus apps, agregar widgets y accesos directos, y más.

Si probaste diferentes dispositivos Android, es posible que hayas notado que la experiencia de Launcher puede verse diferente en función del fabricante del dispositivo. A veces, los fabricantes de dispositivos crean una experiencia de Launcher personalizada que es característica de su marca. Por eso, diferentes fabricantes pueden mostrar los íconos de las apps de una forma diferente a la circular que se muestra arriba.

Podrían mostrar todos los íconos de las apps de forma cuadrada, cuadrada con esquinas redondeadas o cuadrada redondeada (un término medio entre un cuadrado y un círculo), por ejemplo.

Independientemente de la forma que elijan los fabricantes de dispositivos, el objetivo es que todos los íconos de las apps en un solo dispositivo tengan una forma uniforme de modo que brinden una experiencia del usuario más coherente.

Por eso, la plataforma de Android introdujo la compatibilidad con los íconos adaptables (a partir del nivel de API 26). Cuando implementes un ícono adaptable en tu app, esta podrá adaptarse a una gran variedad de dispositivos mostrando un ícono de la app en alta calidad de la manera adecuada.

En este codelab, se te proporcionarán archivos de origen de imagen para el ícono de selector de una calculadora de propinas. Usarás una herramienta en Android Studio llamada Image Asset Studio a fin de generar todas las versiones de los íconos de selector que sean necesarios. Luego, podrás aplicar lo que aprendiste a fin de cambiar el ícono de otras apps.

Requisitos previos

Ser capaz de navegar por los archivos de un proyecto básico de Android, incluidos los archivos de recursos
Poder instalar una app para Android desde Android Studio en el emulador o en un dispositivo físico

Qué aprenderás

Cómo cambiar el ícono de selector de una app
Cómo usar Image Asset Studio en Android Studio a efectos de generar elementos de íconos de selector
Qué es un ícono adaptable y por qué se compone de dos capas

Qué compilarás

Una app para Android con un nuevo ícono de selector

Requisitos

Una computadora que tenga instalado Android Studio 4.1 o una versión posterior
Conexión a Internet a fin de descargar los archivos de recursos de imagen

Si estás realizando este codelab como parte del curso Aspectos básicos de Android en Kotlin, puedes usar directamente la calculadora de propinas del codelab anterior en la que ya estuviste trabajando.

Si estás realizando este codelab por separado (fuera del curso), puedes configurar un nuevo proyecto en Android Studio usando la plantilla Empty Activity. De esta manera, no podrás modificar ni reemplazar los archivos de íconos de selector en una app existente hasta que te sientas más cómodo con estos pasos.

El objetivo es que el ícono de selector se vea fantástico (nítido y claro), independientemente del modelo del dispositivo o de la densidad de la pantalla. En particular, la densidad de píxeles de la pantalla hace referencia a la cantidad de píxeles por pulgada (dpi, o puntos por pulgada) que aparecen en la pantalla. En el caso de un dispositivo de densidad media (mdpi), hay 160 puntos por pulgada en la pantalla, mientras que un dispositivo de densidad extremadamente alta (xxxhdpi) tiene 640 puntos por pulgada en la pantalla.

Para adaptarte a la variedad de densidades de pantalla de los distintos dispositivos, deberás proporcionar diferentes versiones del ícono de la app.

Explora los archivos de ícono de selector

A fin de ver su aspecto, abre el proyecto en Android Studio. Si tu app se inició a partir de una plantilla, deberías tener los íconos de selector predeterminados que Android Studio ya proporciona.
En la ventana Project, cambia a la vista Project. Esto te mostrará los archivos de tu proyecto en función de la estructura de archivos y de cómo se guardan esos archivos en tu computadora.

Navega al directorio de recursos (app > src > main > res) y expande algunas de las carpetas mipmap. Estas carpetas mipmap son el lugar donde debes colocar los elementos del ícono de selector de tu app para Android.

mdpi, hdpi, xhdpi, etc., son calificadores de densidad que puedes agregar al nombre de un directorio de recursos (como mipmap) a fin de indicar que son recursos para dispositivos de una determinada densidad de la pantalla. A continuación, se incluye una lista de calificadores de densidad en Android:

mdpi: Recursos para pantallas de densidad media (~160 dpi)
hdpi: Recursos para pantallas de densidad alta (~240 dpi)
xhdpi: Recursos para pantallas de densidad muy alta (~320 dpi)
xxhdpi: Recursos para pantallas de densidad muy muy alta (~480 dpi)
xxxhdpi: Recursos para pantallas de densidad extremadamente alta (~640 dpi)
nodpi: Recursos que no están diseñados para su escalamiento, independientemente de la densidad de píxeles de la pantalla
anydpi: Recursos que se escalan a cualquier densidad

Si haces clic en los archivos de imagen, obtendrás una vista previa. Los archivos ic_launcher.png contienen la versión cuadrada del ícono, mientras que los ic_launcher_round.png contienen su versión circular. Ambos se proporcionan en cada directorio de recursos.

Por ejemplo, así se ve res > mipmap-xxxhdpi > ic_launcher_round.png. Observa también que el tamaño del elemento se muestra en la parte superior derecha. El tamaño de esta imagen es de 192 px x 192 px.

Por otro lado, así se ve res > mipmap-mdpi > ic_launcher_round.png. Tiene un tamaño de solo 48 px x 48 px.

Como puedes ver, estos archivos de imagen de mapa de bits se componen de una cuadrícula fija de píxeles. Se crearon para una resolución de pantalla determinada. Por eso, la calidad puede disminuir a medida que se les cambia el tamaño.

Si reduces la escala de una imagen de mapa de bits, probablemente se vea bien porque estás descartando información de píxeles. Si aumentas el tamaño de una imagen de mapa de bits de manera significativa, puede verse borrosa porque Android deberá adivinar la información de píxeles faltante y rellenar la imagen.

Dado que ya tienes información contextual sobre los íconos de selector, a continuación, aprenderás sobre los íconos adaptables.

Capas en primer y segundo plano

La versión de Android 8.0 (nivel de API 26) y las posteriores son compatibles con los íconos de selector adaptables, lo que proporciona una mayor flexibilidad y efectos visuales interesantes en lo que respecta a los íconos de las apps. Para los desarrolladores, esto significa que el ícono de tu app se compone de dos capas: una en primer plano y otra en segundo.

En el ejemplo anterior, el ícono blanco de Android se encuentra en la capa en primer plano, mientras que la cuadrícula azul y blanca está en la capa en segundo plano. La capa en primer plano se apilará sobre la capa en segundo plano. Luego, se aplicará una máscara (una circular en este caso) a fin de generar un ícono de la app de forma circular.

Explora los archivos de íconos adaptables

Observa los archivos de íconos adaptables predeterminados que se proporcionan en la plantilla del proyecto en Android Studio.

En la ventana Project de Android Studio, busca y expande el directorio de recursos res > mipmap-anydpi-v26.

Abre uno de los archivos en formato XML, por ejemplo, ic_launcher.xml. Deberías ver lo siguiente:

<?xml version="1.0" encoding="utf-8"?>
<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>

Observa cómo se usa el elemento <adaptive-icon> a fin de declarar las capas de <background> y <foreground> del ícono de la app cuando se proporcionan elementos de diseño de recursos para cada uno.
Vuelve a la vista Project y busca el lugar en el que se declaran los elementos de diseño: drawable > ic_launcher_background.xml y drawable-v24 > ic_launcher_foreground.xml.
Cambia a la vista Design a efectos de obtener una vista previa de cada uno (a la izquierda, el de segundo plano; a la derecha, el de primer plano).

Ambos son archivos de interfaz dibujable en vector. No tienen un tamaño fijo en píxeles. Si cambias a la vista Code y usas el elemento <vector>, podrás ver la declaración XML de la interfaz dibujable en vector.

Aunque tanto la interfaz dibujable en vector como la imagen de mapa de bits describen un gráfico, existen diferencias importantes entre ellas.

Una imagen de mapa de bits no comprende mucho la imagen que contiene, excepto por la información de color de cada píxel. En cambio, un gráfico vectorial sabe cómo dibujar las formas que definen una imagen. Estas instrucciones se componen de un conjunto de puntos, líneas y curvas, junto con información sobre los colores. La ventaja es que un gráfico vectorial se puede ajustar para cualquier tamaño de lienzo en cualquier densidad de pantalla, sin perder calidad.

Una interfaz dibujable en vector es la implementación de gráficos vectoriales de Android, diseñada para ser lo suficientemente flexible en dispositivos móviles. Se pueden definir en XML con estos elementos posibles. En lugar de proporcionar versiones de un elemento de mapa de bits para todas las densidades, solo deberás definir la imagen una vez. Por lo tanto, esto reduce el tamaño de tu app y facilita su mantenimiento.

Ahora es el momento de cambiar el ícono de la app.

A continuación, descarga los 2 elementos nuevos que te permitirán crear un ícono adaptable para una app de Calculadora de propinas. No tienes que preocuparte por comprender todos los detalles de los archivos de interfaces dibujables en vector. Su contenido puede generarse automáticamente a partir de herramientas de diseño.

Descarga ic_launcher_background.xml, la interfaz dibujable en vector para la capa en segundo plano. Si tu navegador muestra el archivo en lugar de descargarlo, selecciona File > Save Page As… a fin de guardarlo en tu computadora.
Descarga ic_launcher_foreground.xml, la interfaz dibujable en vector para la capa en primer plano.

Ten en cuenta que existen ciertos requisitos para estos elementos de las capas en primer y segundo plano, como el hecho de que ambos tengan un tamaño de 108 dp x 108 dp. Obtén más información sobre los requisitos aquí o consulta la guía de diseño sobre íconos para Android en el sitio de Material.

Debido a que los bordes del ícono se pueden recortar según la forma de la máscara del fabricante del dispositivo, es importante colocar la información clave del ícono en una "zona segura", que es un círculo de 66 dp de diámetro en el centro de la capa. El contenido fuera de esa zona segura no debe ser esencial (por ejemplo, el color de fondo) de modo que no haya problemas si esa parte se recorta.

Vuelve a Android Studio a fin de usar los nuevos elementos.

Primero, borra los recursos de elementos de diseño viejos que tengan el ícono de Android y el fondo de cuadrícula verde. En la vista Project, haz clic con el botón derecho en el archivo y elige Delete.

Borra lo siguiente:

drawable/ic_launcher_background.xml
drawable-v24/ic_launcher_foreground.xml

Puedes desmarcar la casilla Safe delete (with usage search) y hacer clic en OK.

Crea un elemento de imagen nuevo. Puedes hacer clic con el botón derecho en el directorio res y seleccionar New > Image Asset. También puedes hacer clic en la pestaña Resource Manager y en el ícono + y seleccionar Image Asset.

Se abrirá la herramienta Image Asset Studio de Android Studio.
Deja la configuración predeterminada:
Icon Type: Launcher Icons (Adaptive and Legacy)
Name: ic_launcher

Con la pestaña Foreground Layer seleccionada, desplázate hasta la subsección Source Asset. En el campo Path, haz clic en el ícono de carpeta.
Aparecerá un mensaje para explorar tu computadora y seleccionar un archivo. Busca la ubicación del nuevo archivo ic_launcher_foreground.xml que acabas de descargar en tu computadora. Es posible que se encuentre en la carpeta de descargas. Cuando lo encuentres, haz clic en Open.
Ahora Path se actualizó con la ubicación de la nueva interfaz dibujable en vector del primer plano. Deja Layer Name como ic_launcher_foreground y Asset Type como Image.

Ahora puedes cambiar a la pestaña Background Layer de la interfaz. Deja los valores predeterminados tal como están. Haz clic en el ícono de carpeta del campo Path.
Busca la ubicación del archivo ic_launcher_background.xml que acabas de descargar. Haz clic en Open.

La vista previa se debe actualizar a medida que seleccionas los nuevos archivos de recursos. Así se debería ver en función de las nuevas capas en primer y segundo plano.

Cuando representas el ícono de la app en dos capas, los fabricantes de dispositivos (llamados fabricantes del equipo original u OEM para abreviar) pueden crear diferentes formas según el dispositivo Android, como se muestra en la vista previa anterior. El OEM proporciona una máscara que se aplica a todos los íconos de las apps del dispositivo.

Esta máscara se aplica sobre las capas en primer y segundo plano del ícono de tu app. A continuación, te mostramos un ejemplo de máscara circular y máscara cuadrada.

Cuando se aplica una máscara circular a ambas capas del ícono de la app, el resultado es un ícono circular con un fondo de cuadrícula azul y un Android en él (imagen de la izquierda, más arriba). También puedes aplicar una máscara cuadrada para producir el ícono de la app que se muestra en la parte superior derecha.

Tener dos capas también permite lograr efectos visuales interesantes, ya que ambas se pueden mover de forma independiente, y también se puede ajustar su escala. Consulta esta entrada de blog en Consideraciones del diseño a fin de ver algunos ejemplos divertidos sobre cómo pueden verse los efectos visuales. Como no puedes saber con anticipación qué dispositivo tendrá tu usuario o qué máscara aplicará el OEM en tu ícono, debes configurar el ícono adaptable de modo que no se corte la información importante.

Asegúrate de que el contenido principal de la capa en primer plano (el ícono de campana de servicio en este caso) esté dentro de la zona segura y de que las diferentes formas de máscara no lo corten. Si el contenido importante aparece recortado o demasiado pequeño, puedes usar la barra del control deslizante Resize de la sección Scaling de cada capa. En este caso, no es necesario ajustar el tamaño, así que puedes dejarlo al 100%.

Presiona Siguiente.
En este paso, se confirmará la ruta del ícono. Puedes hacer clic en los archivos individuales a fin de obtener la vista previa. También hay una advertencia en la parte inferior, la cual indica que se reemplazarán algunos archivos existentes (los que se muestran en rojo). Eso está bien, ya que esos archivos viejos correspondían al ícono anterior de la app.

Como los valores predeterminados son adecuados, haz clic en Finish.
Verifica que todos los elementos generados se vean bien en las carpetas mipmap. Ejemplos:

¡Muy bien! Ahora harás un cambio más.

Mueve los archivos de interfaz dibujable en vector al directorio -v26

Según el SDK mínimo de tu app, es posible que notes que el elemento en primer plano se encuentra en la carpeta drawable-v24, mientras que el elemento en segundo plano se encuentra en la carpeta drawable. Esto se debe a que el elemento en primer plano contiene un gradiente, que comenzó a estar disponible en la versión de Android 7.0 (también conocida como nivel de API 24, de ahí que el calificador de recursos sea -v24). El elemento en segundo plano no contiene un gradiente, por lo tanto, puede incluirse en la carpeta base drawable.

En lugar de tener los elementos en primer y segundo plano en dos carpetas drawable separadas, mueve ambos archivos de interfaz dibujable en vector a un directorio de recursos -v26. Dado que estos elementos solo se usan para íconos adaptables, estos dos elementos de diseño solo se necesitan en el nivel de API 26 y superiores. Esta estructura de carpetas facilitará la búsqueda y la administración de los archivos de íconos adaptables.

drawable-anydpi-v26
   ic_launcher_background.xml
   ic_launcher_foreground.xml
mipmap-anydpi-v26
   ic_launcher.xml
   ic_launcher_round.xml

Primero, crea el directorio drawable-anydpi-v26. Haz clic con el botón derecho en la carpeta res. Selecciona New > Android Resource Directory.
Aparecerá el diálogo New Resource Directory. Selecciona estas opciones:

Directory name: drawable-anydpi-v26

Resource type: drawable (selecciónalo del menú desplegable)

Source set: main (deja el valor predeterminado como está)

Haz clic en OK. En la vista Project, verifica que se haya creado el nuevo directorio de recursos res > drawable-anydpi-v26.

Haz clic con el botón izquierdo en el archivo ic_launcher_foreground.xml y arrástralo desde la carpeta drawable hasta la carpeta drawable-anydpi-v26. Recuerda que colocar un recurso en un directorio "any dpi" indica que es un recurso cuya escala puede ajustarse a cualquier densidad.
Haz clic con el botón izquierdo en el archivo ic_launcher_background.xml y arrástralo desde la carpeta drawable-v24 hasta la carpeta drawable-anydpi-v26.
Borra la carpeta drawable-v24 si ahora está vacía. Haz clic con el botón derecho en la carpeta y selecciona Delete.
Haz clic en los archivos drawable y mipmap de tu proyecto. Asegúrate de que la vista previa de estos íconos sea la correcta.

Prueba tu app

Comprueba que aparezca el nuevo ícono de la app. Ejecuta la app en tu dispositivo (emulador o dispositivo físico).
Presiona el botón de inicio del dispositivo.
Desliza el dedo hacia arriba de modo que se muestre la lista Todas las apps.
Busca la app que acabas de actualizar. Debería mostrarse el nuevo ícono de la app.

Nota: Según el modelo de tu dispositivo, es posible que veas un ícono de selector con otra forma. Sin embargo, debe mostrar tu capa en primer plano encima de tu capa en segundo plano con algún tipo de máscara aplicada.

¡Buen trabajo! El nuevo ícono de la app se ve increíble.

Íconos de selector adaptativos y heredados

Ahora que tu ícono adaptable funciona bien, seguramente te preguntes por qué no puedes deshacerte de todas las imágenes de mapa de bits del ícono de la app. Aún necesitas esos archivos para que el ícono de tu app aparezca en alta calidad en versiones anteriores de Android, lo que se conoce como retrocompatibilidad.

En dispositivos que ejecutan Android 8.0 o versiones posteriores (nivel de API 26 y superiores), ocurre lo siguiente:

Se pueden usar íconos adaptables (combinación de interfaces dibujables en vector en primer y segundo plano, con una máscara OEM aplicada sobre ellos). Estos son los archivos relevantes de tu proyecto:

res/drawable-anydpi-v26/ic_lancher_background.xml
res/drawable-anydpi-v26/ic_launcher_foreground.xml
res/mipmap-anydpi-v26/ic_launcher.xml
res/mipmap-anydpi-v26/ic_launcher_round.xml

En dispositivos que ejecutan cualquier versión anterior a Android 8.0 (pero con el nivel mínimo de API requerido por nuestra app), ocurre lo siguiente:

Se usarán íconos de selector heredados (imágenes de mapas de bits en las carpetas mipmap de las diferentes densidades). Estos son los archivos relevantes de tu proyecto:

res/mipmap-mdpi/ic_launcher.png
res/mipmap-mdpi/ic_launcher_round.png
res/mipmap-hdpi/ic_launcher.png
res/mipmap-hdpi/ic_launcher_round.png
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.png
res/mipmap-xxdpi/ic_launcher.png
res/mipmap-xxdpi/ic_launcher_round.png
res/mipmap-xxxdpi/ic_launcher.png
res/mipmap-xxxdpi/ic_launcher_round.png

En esencia, Android recurrirá a las imágenes de mapa de bits en dispositivos más antiguos sin compatibilidad con íconos adaptables.

¡Felicitaciones! Completaste todos los pasos para cambiar un ícono de la app.

A continuación, encontrarás el código de la solución para este codelab.

res/mipmap-anydpi-v26/ic_launcher.xml

<?xml version="1.0" encoding="utf-8"?>
<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>

res/mipmap-anydpi-v26/ic_launcher_round.xml

<?xml version="1.0" encoding="utf-8"?>
<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>

res/drawable-anydpi-v26/ic_launcher_background.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
  <path
      android:pathData="M0,0h108v108h-108z">
    <aapt:attr name="android:fillColor">
      <gradient
          android:startY="-1.0078"
          android:startX="54"
          android:endY="106.9922"
          android:endX="54"
          android:type="linear">
        <item android:offset="0" android:color="#FF12C26D"/>
        <item android:offset="1" android:color="#FF0F9453"/>
      </gradient>
    </aapt:attr>
  </path>
</vector>

res/drawable-anydpi-v26/ic_launcher_foreground.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
  <path
      android:pathData="M38.19,65.92L69.32,65.92a1.2,1.2 0,0 0,1.2 -1.2,0.89 0.89,0 0,0 0,-0.23 17,17 0,0 0,-33.25 0,1.18 1.18,0 0,0 0.9,1.42ZM74.53,69.05a0.85,0.85 0,0 0,-0.78 -0.84L34,68.21a0.85,0.85 0,0 0,-0.77 0.84v2.82a0.84,0.84 0,0 0,0.77 0.86L73.78,72.73a0.85,0.85 0,0 0,0.77 -0.86L74.55,70.65C74.55,70.24 74.56,69.58 74.53,69.05ZM52.08,49h3.59a1.86,1.86 0,0 0,0 -3.72L52.08,45.28a1.86,1.86 0,0 0,0 3.72ZM53.87,39.81a1.19,1.19 0,0 0,1.19 -1.19L55.06,32.87a1.19,1.19 0,0 0,-2.38 0v5.71a1.19,1.19 0,0 0,1.19 1.19h0ZM61.69,41l4.62,-3.35a1.19,1.19 0,1 0,-1.4 -1.93L60.29,39A1.2,1.2 0,0 0,60 40.67a1.18,1.18 0,0 0,1.66 0.26ZM41.69,37.65L46.31,41a1.2,1.2 0,0 0,1.35 -2L43,35.66a1.19,1.19 0,0 0,-1.66 0.26,1.2 1.2,0 0,0 0.3,1.67Z"
      android:fillColor="#FFFFFF"/>
</vector>

Android Studio también debería haber generado automáticamente las imágenes de mapa de bits en las siguientes ubicaciones:

res/mipmap-mdpi/ic_launcher.png
res/mipmap-mdpi/ic_launcher_round.png
res/mipmap-hdpi/ic_launcher.png
res/mipmap-hdpi/ic_launcher_round.png
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.png
res/mipmap-xxdpi/ic_launcher.png
res/mipmap-xxdpi/ic_launcher_round.png
res/mipmap-xxxdpi/ic_launcher.png
res/mipmap-xxxdpi/ic_launcher_round.png

Coloca los archivos de íconos de la app en los directorios de recursos mipmap.
Proporciona diferentes versiones de imágenes de mapas de bits de íconos de la app para cada densidad (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) a fin de ofrecer retrocompatibilidad.
Agrega calificadores de recursos a directorios de recursos para especificar aquellos recursos que se deben usar en dispositivos con una configuración determinada (p. ej., v26).
Las interfaces dibujables en vector son la implementación de Android de los gráficos vectoriales. Se definen en XML como un conjunto de puntos, líneas y curvas, junto con la información de colores relacionada. Las interfaces dibujables en vector se pueden ajustar para cualquier densidad sin pérdida de calidad.
Se introdujeron los íconos adaptables en la plataforma de Android en el nivel de API 26. Estos se componen de capas en primer y segundo plano que cumplen con requisitos específicos, por lo que el ícono de tu app se verá en alta calidad en una variedad de dispositivos con diferentes máscaras OEM.
Usa Image Asset Studio en Android Studio a fin de crear íconos heredados y adaptables para tu app.