The Android Developer Challenge is back! Submit your idea before December 2.

Íconos adaptables

Android 8.0 (con una API de 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.

A variety of masks applied to an adaptive icon wireframe A variety of masks applied to an adaptive icon

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.

Isometric illustration of creating an adaptive icon

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. Es posible que los efectos varíen 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.

Demo of parallax applied to an adaptive icon Demo of pickup animation applied to an adaptive icon

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, primero actualiza el atributo android:icon en el manifiesto de la app para especificar un recurso de elemento de diseño. También puedes definir un recurso de elemento de diseño del ícono mediante el atributo android:roundIcon. Solo deberás usar el atributo android:roundIcon si necesitas un elemento de ícono diferente para máscaras circulares (por ejemplo, si la marca de tu 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, deberás crear recursos de elemento de diseño alternativos en tu app para usarlos con Android 8.0 (con una API de nivel 26) en res/mipmap-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 dos 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 como tales.

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, usa el método createWithAdaptiveBitmap() durante la creación.

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 del diseñador y desarrollador de Google, Nick Butcher: