Íconos adaptables

Android 8.0 (API nivel 26) presenta íconos de selector adaptables que pueden mostrarse en diferentes formas en distintos modelos de dispositivos. Por ejemplo, un ícono de selector adaptable se puede mostrar con una forma circular en un dispositivo OEM y con un cuadrado con esquinas redondeadas en otro. Cada dispositivo OEM proporciona una máscara, que el sistema luego usa para procesar todos los íconos con la misma forma. Los íconos de selector adaptables también se usan en accesos directos, la app de Configuración, los diálogos de uso compartido y la pantalla de Recientes.

Una variedad de máscaras aplicadas a un wireframe de ícono adaptable Una variedad de máscaras aplicadas a un ícono adaptable

Figura 1: Los íconos adaptables admiten distintas máscaras que varían de un dispositivo a otro.

Puedes controlar la apariencia de tu ícono de selector si defines 2 capas; una para el primer plano y otra para el segundo. Debes proporcionar capas de íconos como elementos de diseño sin máscaras ni sombras en segundo plano alrededor del contorno del ícono.

Ilustración isométrica de la creación de un ícono adaptable

Figura 2: Los íconos adaptables se definen mediante 2 capas y una máscara.

En Android 7.1 (con una API de nivel 25) y versiones anteriores, se fijó el tamaño de los íconos de selector en 48 x48 dp. Ahora debes fijar el tamaño de las capas de ícono usando los siguientes lineamientos:

  • Se debe fijar el tamaño de ambas capas en 108 x 108 dp.
  • Los 72 x 72 dp internos del ícono aparecen dentro de la ventana gráfica de la máscara.
  • El sistema reserva los 18 dp externos de cada uno de los 4 lados para crear efectos visuales interesantes, como el paralaje o el destello.

Nota: Los efectos visuales animados se generan mediante selectores admitidos. Los efectos visuales pueden variar de un selector a otro.

Precaución: En un dispositivo OEM, es posible especificar una máscara que puede incluir un radio con un mínimo de 33 dp en ciertos puntos de la forma.

Demostración de paralaje aplicado a un ícono adaptable Demostración de animación de selección aplicada a un ícono adaptable

Figura 3: Los íconos adaptables admiten varios efectos visuales.

Precaución: Si no actualizas tu ícono de selector con las capas necesarias, no será coherente con otros íconos que muestra la IU del sistema. Tampoco admitirá efectos visuales.

Para obtener información sobre cómo crear íconos adaptables con Android Studio, consulta Crear íconos de apps con Image Asset Studio.

Cómo crear íconos adaptables en XML

Si quieres agregar un ícono adaptable a una app mediante XML, comienza por actualizar el atributo android:icon en el manifiesto de tu app para especificar un recurso de elemento de diseño. También puedes definir un recurso de elemento de diseño del ícono con el atributo android:roundIcon. Solo debes usar el atributo android:roundIcon si necesitas un elemento de ícono diferente para máscaras circulares (por ejemplo, si la marca de su logotipo se basa en una forma circular). En el siguiente fragmento de código, se ilustran ambos atributos:

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

A continuación, debes crear recursos de elemento de diseño alternativos en tu app para usarlos con Android 8.0 (API nivel 26) en res/mipmap-anydpi-v26/ic_launcher.xml. Luego, puedes usar el elemento <adaptive-icon> para definir los elementos de diseño de capas de primer y segundo plano para tus íconos. Los elementos internos <foreground> y <background> admiten el atributo android:drawable.

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

También puedes delimitar los elementos de diseño de primer y segundo plano con los elementos <foreground> y <background> para definirlos.

Si quieres aplicar la misma máscara y el mismo efecto visual que usas para los íconos de selector adaptables normales en los accesos directos, 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 los accesos directos, consulta Accesos directos a aplicaciones.

Recursos adicionales

Para obtener información adicional sobre el diseño y la implementación de íconos adaptables, consulta esta serie de artículos de Nick Butcher, diseñador y desarrollador de Google: