Cambia el ícono de la app

1. Antes de comenzar

El ícono de la app es importante para diferenciarla, ya que le otorga un estilo y una apariencia distintivos. El ícono de la app 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. El selector hace referencia a la experiencia cuando presionas el botón de inicio de un dispositivo Android para ver y organizar tus apps, agregar widgets y accesos directos, y mucho más.

Si usaste distintos dispositivos Android, es posible que hayas notado que la experiencia de selector puede verse diferente en función del fabricante del dispositivo. A veces, los fabricantes de dispositivos crean una experiencia de selector personalizada que es característica de su marca. Por ejemplo, distintos 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 elija el fabricante de dispositivos, el objetivo es que todos los íconos de las apps en un solo dispositivo tengan la misma forma 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 y mostrar el ícono de selector según la pantalla del dispositivo.

En este codelab, se te proporcionan archivos de origen de imagen para el ícono de selector de la app de Affirmations. Usarás una herramienta de Android Studio llamada Image Asset Studio para generar distintas versiones de los íconos de selector. Luego, podrás aplicar lo que aprendiste a los íconos 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 para generar elementos de íconos de selector
Qué es un ícono adaptable y por qué consta de dos capas

Qué crearás

Un ícono de selector personalizado para la app de Affirmations

Requisitos

Una computadora con la versión estable más reciente de Android Studio instalada
Conexión a Internet para descargar los archivos de recursos de imagen
Acceso a GitHub

Descarga el código de partida

En Android Studio, abre la carpeta basic-android-kotlin-compose-training-affirmations.

Navega a la página de repositorio de GitHub del proyecto.
Verifica que el nombre de la rama coincida con el especificado en el codelab. Por ejemplo, en la siguiente captura de pantalla, el nombre de la rama es main.

En la página de GitHub de este proyecto, haz clic en el botón Code, el cual abre una ventana emergente.

En la ventana emergente, haz clic en el botón Download ZIP para guardar el proyecto en tu computadora. Espera a que se complete la descarga.
Ubica el archivo en tu computadora (probablemente en la carpeta Descargas).
Haz doble clic en el archivo ZIP para descomprimirlo. Se creará una carpeta nueva con los archivos del proyecto.

Abre el proyecto en Android Studio

Inicia Android Studio.
En la ventana Welcome to Android Studio, haz clic en Open.

Nota: Si Android Studio ya está abierto, selecciona la opción de menú File > Open.

En el navegador de archivos, ve hasta donde se encuentra la carpeta del proyecto descomprimida (probablemente en Descargas).
Haz doble clic en la carpeta del proyecto.
Espera a que Android Studio abra el proyecto.
Haz clic en el botón Run para compilar y ejecutar la app. Asegúrate de que funcione como se espera.

2. Íconos de selector

El objetivo es que el ícono de selector se vea nítido y claro, independientemente del modelo del dispositivo o de la densidad de la pantalla. La densidad de la pantalla hace referencia a la cantidad de píxeles por pulgada o puntos por pulgada (dpi) que se muestran 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

Para consultar el modo en que se ven los íconos de selector en un proyecto, ábrelo en Android Studio.
En la ventana Project, cambia a la vista Project. Muestra la estructura de archivos de tu proyecto.

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.

Las carpetas de elementos de diseño contienen los vectores del ícono de selector en archivos XML. Un vector, en el caso de un ícono de elementos de diseño, es una serie de instrucciones que dibujan una imagen cuando se compila. 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.webp contienen la versión cuadrada del ícono, mientras que los ic_launcher_round.webp contienen su versión circular. Ambos se proporcionan en cada directorio mipmap.

Por ejemplo, así se ve res > mipmap-xxxhdpi > ic_launcher_round.webp. Observa 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.

Así se ve res > mipmap-mdpi > ic_launcher_round.webp. Tiene un tamaño de solo 48 px x 48 px.

Como puedes ver, estos archivos de imagen de mapa de bits constan 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.

Ahora que tienes más información sobre los íconos de selector, aprenderás sobre los íconos adaptables.

3. Íconos adaptables

Capas en primer y segundo plano

A partir de la versión de Android 8.0 (nivel de API 26), se admiten íconos adaptables, lo que proporciona más efectos visuales y una mayor flexibilidad. 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 apila sobre la capa en segundo plano. En este caso, se aplica una máscara circular en la parte superior para generar un ícono de la app circular.

Explora los archivos de íconos adaptables

Observa los archivos de íconos adaptables predeterminados que ya se proporcionan en el código de tu app de Affirmations.

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

Abre el archivo ic_launcher.xml. Verás 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"/>
    <monochrome android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>

Observa cómo se usa el elemento <adaptive-icon> para 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 los elementos de diseño en primer y segundo plano: res > drawable > ic_launcher_background.xml y res > drawable > ic_launcher_foreground.xml.
Cambia a la vista Design para obtener una vista previa de cada uno:

Segundo plano:

Primer plano:

Ambos son archivos de elementos de diseño vectorial. 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.

ic_launcher_foreground.xml

<!--
    Copyright (C) 2023 The Android Open Source Project

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         https://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->

<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="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
    <aapt:attr name="android:fillColor">
      <gradient
          android:endX="85.84757"
          android:endY="92.4963"
          android:startX="42.9492"
          android:startY="49.59793"
          android:type="linear">
        <item
            android:color="#44000000"
            android:offset="0.0" />
        <item
            android:color="#00000000"
            android:offset="1.0" />
      </gradient>
    </aapt:attr>
  </path>
  <path
      android:fillColor="#FFFFFF"
      android:fillType="nonZero"
      android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
      android:strokeWidth="1"
      android:strokeColor="#00000000" />
</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.

Un elemento de diseño vectorial 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.

4. Descarga elementos nuevos

Descarga los siguientes dos recursos nuevos que te permiten crear un ícono adaptable para la app de Affirmations. No tienes que preocuparte por comprender todos los detalles de los archivos de elementos de diseño vectorial. Su contenido se genera automáticamente a partir de herramientas de diseño.

Descarga ic_launcher_background.xml, que es el elemento de diseño vectorial de la capa en segundo plano. Si tu navegador muestra el archivo en lugar de descargarlo, selecciona Archivo > Guardar página como… para guardarlo en tu computadora.
Descarga ic_launcher_foreground.xml, que es el elemento de diseño vectorial de la capa en primer plano.

Ten en cuenta que existen ciertos requisitos para estos elementos de la capa en primer y segundo plano, como el hecho de que ambos tienen que tener un tamaño de 108 dpi x 108 dpi. Puedes ver más detalles en los documentos de AdaptiveIconDrawable y, además, puedes consultar los lineamientos de diseño en los íconos de Android del sitio de Material Design.

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 sobre tu ícono en la "zona segura". La zona segura es un círculo de 66 dpi de diámetro en el centro de la capa en primer plano. El contenido fuera de la zona segura no debe ser esencial, como el color de fondo, y se aplica si se recorta.

5. Cambia el ícono de la app

Regresa a Android Studio para usar los nuevos elementos que acabas de descargar.

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/ic_launcher_foreground.xml

Borra lo siguiente:

mipmap-anydpi-v26/
mipmap-hdpi/
mipmap-mdpi/
mipmap-xhdpi/
mipmap-xxhdpi/
mipmap-xxxhdpi/

Puedes desmarcar la casilla Safe delete (with usage search) y hacer clic en OK. La función Safe delete (with usage search) busca en el código el uso del recurso que estás a punto de borrar. En este caso, reemplazarás estas carpetas por otras nuevas con el mismo nombre, por lo que no tienes que preocuparte por Safe delete.

Crea un recurso de imagen nuevo. Puedes hacer clic con el botón derecho en el directorio res y elegir New > Image Asset, o hacer clic en la pestaña Resource Manager, en el ícono + y, luego, seleccionar Image Asset en el menú desplegable.

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 archivo ic_launcher_foreground.xml que acabas de descargar. 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 del nuevo elemento de diseño vectorial en primer plano. Deja Layer Name como ic_launcher_foreground y Asset Type como Image.

Ahora cambia a la pestaña Background Layer de la interfaz. Mantén los valores predeterminados:
Haz clic en el ícono de la carpeta en el campo Path.
Busca la ubicación del archivo ic_launcher_background.xml que acabas de descargar. Haz clic en Open.

La vista previa debería actualizarse 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.

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

Tener una capa en primer y segundo plano permite efectos visuales interesantes, ya que las dos capas pueden moverse de forma independiente unas de otras y ajustarse a ella. Para ver algunos ejemplos divertidos sobre cómo pueden verse los efectos visuales, consulta la entrada de blog Cómo diseñar íconos adaptables en Consideraciones del diseño. Como no sabes qué dispositivo tendrá el usuario ni qué máscara aplicará el OEM en el ícono, debes configurar el ícono adaptable para que no se recorte la información importante.

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 para asegurarte de que todo aparezca en la zona segura. Para asegurarte de que no se recorte nada, cambia el tamaño de las imágenes de primer y segundo plano al 99% arrastrando el control deslizante Resize en las pestañas Foreground Layer y Background Layer.

Haz clic en Siguiente.
En este paso, se confirmará la ruta del ícono. Puedes hacer clic en los archivos individuales para obtener la vista previa.

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.

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.

¡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 el caso de los dispositivos que ejecutan Android 8.0 o versiones posteriores (nivel de API 26 y posterior), se pueden usar íconos adaptables (combinación de elementos de diseño vectorial en primer y segundo plano, con una máscara OEM aplicada encima). Estos son los archivos relevantes de tu proyecto:

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

En los dispositivos que ejecutan cualquier versión anterior a Android 8.0 (pero sobre el nivel mínimo de API requerido por la app), se usan íconos de selector heredados (las imágenes de mapa de bits en las carpetas mipmap) de diferentes densidades. Estos son los archivos relevantes de tu proyecto:

res/mipmap-mdpi/ic_launcher.webp
res/mipmap-mdpi/ic_launcher_round.webp
res/mipmap-hdpi/ic_launcher.webp
res/mipmap-hdpi/ic_launcher_round.webp
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.webp
res/mipmap-xxhdpi/ic_launcher.webp
res/mipmap-xxhdpi/ic_launcher_round.webp
res/mipmap-xxxhdpi/ic_launcher.webp
res/mipmap-xxxhdpi/ic_launcher_round.webp

En esencia, Android recurre 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.

6. Obtén el código de la solución

Para descargar el código del codelab terminado, puedes usar estos comandos de git:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-affirmations.git
$ cd basic-android-kotlin-compose-training-affirmations
$ git checkout main

También puedes descargar el repositorio como un archivo ZIP, descomprimirlo y abrirlo en Android Studio.

Descargar ZIP

Si deseas ver el código de la solución, puedes hacerlo en GitHub.

Navega a la página de repositorio de GitHub del proyecto.
Verifica que el nombre de la rama coincida con el especificado en el codelab. Por ejemplo, en la siguiente captura de pantalla, el nombre de la rama es main.

En la página de GitHub de este proyecto, haz clic en el botón Code, el cual abre una ventana emergente.

En la ventana emergente, haz clic en el botón Download ZIP para guardar el proyecto en tu computadora. Espera a que se complete la descarga.
Ubica el archivo en tu computadora (probablemente en la carpeta Descargas).
Haz doble clic en el archivo ZIP para descomprimirlo. Se creará una carpeta nueva con los archivos del proyecto.

Abre el proyecto en Android Studio

Inicia Android Studio.
En la ventana Welcome to Android Studio, haz clic en Open.

Nota: Si Android Studio ya está abierto, selecciona la opción de menú File > Open.

En el navegador de archivos, ve hasta donde se encuentra la carpeta del proyecto descomprimida (probablemente en Descargas).
Haz doble clic en la carpeta del proyecto.
Espera a que Android Studio abra el proyecto.
Haz clic en el botón Run para compilar y ejecutar la app. Asegúrate de que funcione como se espera.

7. Resumen

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 en cada bucket de densidad (mdpi, hdpi, xhdpi, xxhdpi y xxxhdpi) para ofrecer retrocompatibilidad con versiones anteriores de Android.
Agrega calificadores de recursos a directorios de recursos para especificar aquellos recursos que se deben usar en dispositivos con una configuración determinada (v24 o v26).
Los elementos de diseño vectorial 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. Los elementos de diseño vectorial 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 para crear íconos heredados y adaptables para tu app.

Cambia el ícono de la app

1. Antes de comenzar

Requisitos previos

Qué aprenderás

Qué crearás

Requisitos

Descarga el código de partida

Abre el proyecto en Android Studio

2. Íconos de selector

Explora los archivos de ícono de selector

3. Íconos adaptables

Capas en primer y segundo plano

Explora los archivos de íconos adaptables

4. Descarga elementos nuevos

5. Cambia el ícono de la app

Prueba tu app

Íconos de selector adaptativos y heredados

6. Obtén el código de la solución

Abre el proyecto en Android Studio

7. Resumen

8. Más información