Íconos adaptables

Encabezado de íconos adaptables

Un ícono adaptable, o AdaptiveIconDrawable, puede mostrarse de formas diferentes en función de las capacidades de cada dispositivo individual y el uso de temas del usuario. Los íconos adaptables se utilizan principalmente en el selector de la pantalla principal, pero también pueden utilizarse 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 una variedad de formas en diferentes modelos de dispositivos. Por ejemplo, puede mostrar una forma circular en un dispositivo de OEM y una forma cuadrada redondeada (un término medio entre un cuadrado y un círculo) en otro dispositivo. Cada OEM de dispositivo debe proporcionar una máscara, que el sistema usa para renderizar todos los íconos adaptables con la misma forma.

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

  • Efectos visuales: Un ícono adaptable es compatible con una variedad de efectos visuales atractivos, que se muestran cuando los usuarios ubican o mueven el ícono en la pantalla principal.

    Un GIF que muestra ejemplos de dos íconos de muestra de Android con forma de círculo, animados para mostrar la respuesta del usuario. El primer ícono muestra el logotipo de Android balanceándose hacia la izquierda y, luego, hacia la derecha, y hacia arriba y hacia abajo dentro del círculo. El segundo ícono se expande y, luego, se contrae de nuevo.
    Figura 2: Ejemplos de efectos visuales que muestra un ícono adaptable

  • Temas del usuario: A partir de Android 13 (nivel de API 33), los usuarios pueden agregar temas a sus íconos adaptables. Si un usuario habilita los íconos de la app temáticos en la configuración del sistema y el selector admite esta función, el sistema usará el color del fondo de pantalla y el tema que haya elegido el usuario para determinar el color de tono de los íconos de las apps que tengan una capa monochrome en su ícono adaptable. A partir de Android 16 QPR 2, Android aplica automáticamente un tema a los íconos de las apps que no proporcionan uno propio.

    Un ejemplo de tres dispositivos Android, cada uno con un tema de usuario diferente con distintos tonos: el primero muestra un fondo de pantalla con tonos oscuros; el segundo, un fondo de pantalla con tonos dorados; el tercero, un fondo de pantalla con tonos grises claros y azulados. En cada ejemplo, los íconos heredaron el tono del fondo de pantalla y se integran perfectamente.
    Figura 3: Íconos adaptables que heredan el 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:

    • Si el usuario no habilita los íconos de la app temáticos.
    • Si la app no proporciona un ícono monocromático y el dispositivo del usuario ejecuta una versión de Android anterior a Android 16 QPR2
    • Si el selector no es compatible con los íconos de apps temáticos.

Cómo diseñar íconos adaptables

Para asegurar que el ícono adaptable sea compatible con distintas 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.

    Ejemplo de una capa en primer plano (izquierda) y una capa en segundo plano (derecha) En primer plano, se muestra el ícono de 16 lados de un logotipo de Android de ejemplo centrado dentro de una zona segura de 66 x 66. La zona segura está centrada dentro de un contenedor de 108 x 108. En el fondo, se muestran las mismas dimensiones medidas para la zona segura y el contenedor, pero solo un fondo azul y ningún logotipo.
    Figura 4: Íconos adaptables definidos con capas de primer plano y de fondo La zona segura de 66 x 66 que se muestra es el área que nunca se corta con una máscara de forma definida por un OEM.
    Ejemplo en el que se muestra el ícono de la figura anterior superpuesto en una máscara circular
    Figura 5: Ejemplo de cómo se ven juntas las capas en primer y segundo plano con una máscara circular aplicada

  • Si quieres que los íconos de la app sean compatibles con el uso de temas de los usuarios, proporciona una única capa para la versión monocromática del ícono.

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

  • Cambia 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 dp × 66 dp, ya que los 66 dp × 66 dp internos del ícono aparecen dentro del viewport enmascarado.

Los 18 dp exteriores de cada uno de los cuatro lados de las capas se reservan para el enmascaramiento y para crear efectos visuales, como paralaje o pulsación.

Para aprender a crear íconos adaptables con Android Studio, consulta la plantilla de Figma para íconos de la app para Android o la documentación de Android Studio para crear íconos de selector. Además, lee la entrada de blog Cómo diseñar íconos adaptables.

Agrega el ícono adaptable a tu app

Al igual que los íconos no adaptables, los íconos 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, que puede ser útil si el ícono de tu app incluye un fondo circular como parte central de su diseño. Estos selectores deben generar íconos de la app aplicando una máscara circular a android:roundIcon, y esta garantía puede permitirte optimizar la apariencia del ícono de tu app, por ejemplo, agrandando un poco el logotipo y asegurándote de que, cuando se recorte, el fondo circular se extienda hasta el borde.

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>

A continuación, guarda tu ícono adaptable en res/mipmap-anydpi-v26/ic_launcher.xml. Usa el elemento <adaptive-icon> para definir los recursos de capa en primer plano, en segundo plano y monocromática 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" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

Las capas de primer plano y monocromática usan el mismo elemento de diseño. Sin embargo, puedes crear elementos de diseño independientes para cada capa si es necesario.

También puedes definir elementos de diseño como elementos intercalándolos en los elementos <foreground>, <background> y <monochrome>. En el siguiente fragmento, se muestra un ejemplo de cómo hacerlo con el 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 el mismo efecto visual a tus accesos directos que a los íconos adaptables normales, usa una de las siguientes técnicas:

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

Para obtener más información sobre cómo implementar íconos adaptables, consulta Cómo implementar íconos adaptables. Para obtener más información sobre los accesos directos, consulta la descripción general de los accesos directos a apps.

Recursos adicionales

Consulta los siguientes recursos para obtener más información sobre cómo diseñar e implementar íconos adaptables.

Anterior
Cómo implementar prácticas recomendadas para accesos directos
Siguiente
Burbujas