Íconos adaptables

Un ícono adaptable, o AdaptiveIconDrawable, puede mostrarse de manera diferente según las capacidades individuales del dispositivo y los temas del usuario. El selector usa principalmente los íconos adaptables en la pantalla principal, pero también se pueden usar en accesos directos, la app de Configuración, los diálogos de uso compartido y la pantalla de descripción general. Los íconos adaptables se usan en todos los factores de forma de Android.

A diferencia de las imágenes de mapa de bits, los íconos adaptables pueden adaptarse a diferentes casos de uso:

  • Diferentes formas: Un ícono adaptable puede mostrar diferentes formas en los distintos modelos de dispositivos. Por ejemplo, puede mostrar una forma circular en un dispositivo OEM y un cuadrado (una forma entre un cuadrado y un círculo) en otro dispositivo. Cada dispositivo OEM debe proporcionar una máscara, que el sistema usa para renderizar todos los íconos adaptables con la misma forma.

    GIF que muestra una animación recurrente del mismo ícono de Android de muestra con diferentes formas según la máscara usada: un círculo y, luego, dos tipos diferentes de esquirlas
    Figura 1: Los íconos adaptables admiten una variedad de máscaras, que varían de un dispositivo a otro.

  • Efectos visuales: Un ícono adaptable admite una variedad de efectos visuales atractivos, que se muestran cuando los usuarios colocan o mueven el ícono por la pantalla principal.

    GIF que muestra ejemplos de dos íconos circulares de muestra de Android, animados para mostrar la respuesta del usuario. El primer ícono muestra el logotipo de Android tambaleante hacia la izquierda y, luego, hacia la derecha, y luego hacia arriba y hacia abajo dentro del círculo. El segundo ícono se expande y, luego, se vuelve a contraer.
    Figura 2: Ejemplos de efectos visuales que se muestran con un ícono adaptable

  • Temas de los usuarios: A partir de Android 13 (nivel de API 33), los usuarios pueden aplicar un tema a sus íconos adaptables. Si un usuario activa el botón de activación Íconos temáticos en la configuración del sistema y el selector admite esta función, el sistema usa el color del fondo de pantalla y el tema que eligió el usuario para determinar el color del tono.

    Una imagen que muestra ejemplos de tres dispositivos Android, cada uno con un tema de usuario diferente con tonos distintos. En el primero, se muestra un fondo de pantalla con tonos oscuros; el segundo, un fondo de pantalla dorado; y el tercero, un fondo de pantalla gris claro con tonos azulados. En cada ejemplo, los íconos heredaron el tono del fondo de pantalla y se mezclan a la perfección.
    Figura 3: Íconos adaptables que se heredan del fondo de pantalla y los temas del usuario

    En las siguientes situaciones, la pantalla principal no muestra el ícono temático de la app, sino el ícono adaptable o estándar de la app:

    • Si el usuario no habilita los íconos temáticos de apps.
    • Si la app no proporciona un ícono monocromático de esta.
    • Si el Selector no es compatible con los íconos temáticos de apps,

Cómo diseñar íconos adaptables

Para asegurarte de que tu ícono adaptable admita diferentes formas, efectos visuales y temas del usuario, el diseño debe cumplir con los siguientes requisitos:

  • Debes proporcionar dos capas para la versión en color del ícono: una para el primer plano y otra para el fondo. Las capas pueden ser vectores o mapas de bits, aunque se prefieren los vectores.

    Una imagen que muestra un ejemplo de una capa en primer plano (imagen izquierda) y una capa de fondo (imagen derecha). En primer plano, se muestra el ícono de 16 lados de un logotipo de Android de muestra centrado en una zona segura de 66 × 66. La zona segura se centra dentro de un contenedor de 108 × 108. El fondo muestra las mismas dimensiones medidas para la zona segura y el contenedor, pero solo un fondo azul y ningún logotipo.
    Figura 4: Los íconos adaptables se definen con capas en primer y segundo plano. La zona segura de 66 x 66 representada es el área que nunca está recortada por una máscara con forma definida por un OEM.
    Una imagen que muestra el ícono de la imagen anterior superpuesto sobre una máscara circular.
    Figura 5: Un ejemplo de cómo se ven las capas de primer y segundo plano juntas cuando se aplica una máscara circular.

  • Si deseas admitir el uso de temas del usuario de los íconos de la app, proporciona una sola capa para la versión monocromática del ícono.

    Una imagen que muestra un ejemplo de una capa de ícono monocromático (imagen izquierda) y vistas previas de colores (imagen derecha). La capa monocromática muestra el ícono de 16 lados de un logotipo de Android de muestra centrado en una zona segura de 66 x 66. La zona segura se centra en un contenedor de 108 × 108 píxeles. Las vistas previas de colores muestran esta capa cuando se aplica a temas de usuario de diferentes colores (naranja, rosa, amarillo y verde).
    Figura 6: Una capa de íconos monocromático (izquierda) con ejemplos de vistas previas de color (derecha)

  • Ajusta el tamaño de todas las capas a 108 x 108 dp.

  • Usa íconos con bordes limpios. Las capas no deben tener máscaras ni sombras de fondo alrededor del contorno del ícono.

  • Usa un logotipo de al menos 48 × 48 dp. No debe superar los 66 x 66 dp, ya que los 66 x 66 dp internos del ícono aparecen dentro del viewport enmascarado.

Los 18 dp externos de cada uno de los cuatro lados de las capas están reservados para enmascarar y crear efectos visuales, como paralaje o pulso.

Para obtener información sobre cómo crear íconos adaptables con Android Studio, consulta nuestra plantilla de Figma de íconos de apps para Android o la documentación de Android Studio para crear íconos de selector. Consulta también la entrada de blog Cómo diseñar íconos adaptables.

Cómo agregar el ícono adaptable a tu app

Los íconos adaptables, al igual que los no adaptables, se especifican con el atributo android:icon en el manifiesto de la app.

Los selectores que representan apps con íconos circulares usan un atributo opcional, android:roundIcon, y puede resultar útil si el ícono de tu app incluye un fondo circular como parte central de su diseño. Estos selectores son necesarios para generar íconos de apps aplicando una máscara circular a android:roundIcon. Esta garantía puede permitirte optimizar el aspecto del ícono de la app, por ejemplo, agrandando ligeramente el logotipo y asegurándote de que, cuando se recorte, el fondo circular tenga sangrado completo.

En el siguiente fragmento de código, se ilustran ambos atributos, pero la mayoría de las apps solo especifican android:icon:

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

Luego, guarda tu ícono adaptable en res/mipmap-anydpi-v26/ic_launcher.xml. Usa el elemento <adaptive-icon> para definir los recursos de capas monocromáticas, en primer plano y en segundo plano de tus íconos. Los elementos internos <foreground>, <background> y <monochrome> admiten imágenes vectoriales y de mapa de bits.

En el siguiente ejemplo, se muestra cómo definir los elementos <foreground>, <background> y <monochrome> dentro de <adaptive-icon>:

<?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" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

También puedes definir los elementos de diseño como elementos inlineándolos en los elementos <foreground>, <background> y <monochrome>. En el siguiente fragmento, se muestra un ejemplo de cómo hacer esto con un elemento de diseño en primer plano.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

Si quieres aplicar la misma máscara y efecto visual a tus accesos directos que los íconos adaptables regulares, usa una de las siguientes técnicas:

  • Para accesos directos estáticos, usa el elemento <adaptive-icon>.
  • Para accesos directos dinámicos, llama al método createWithAdaptiveBitmap() cuando los crees.

Para obtener más información sobre la implementación de íconos adaptables, consulta Cómo implementar íconos adaptables. Para obtener más información sobre las combinaciones de teclas, consulta Descripción general de los accesos directos a aplicaciones.

Recursos adicionales

Consulta los siguientes recursos para obtener información adicional sobre el diseño y la implementación de íconos adaptables.