Cómo implementar íconos adaptables

Los íconos adaptables mantienen una forma coherente dentro del dispositivo, pero varían de un dispositivo a otro con solo un elemento de ícono proporcionado por el desarrollador. Además, los íconos admiten dos capas (primer plano y segundo plano) que se pueden usar para generar movimiento que proporcione interés visual.

Los implementadores de dispositivos proporcionan una máscara de dispositivo que decidirá la forma de todos los íconos de un dispositivo. Este ícono se usará en cualquier plataforma de la IU del sistema que use íconos de selector (p.ej., selector, descripción general, configuración y hoja compartida).

Ejemplos y fuente

Ejemplos de código:

  • platform/development/samples/AdaptiveIconSample/

Documentación para desarrolladores:

Código de origen:

  • platform/frameworks/base/graphics/java/android/graphics/drawable/AdaptiveIconDrawable.java

Implementación

Para cambiar la forma del ícono en una plataforma, superpone una cadena en framework/base/core/res/res/values/config.xml, de la siguiente manera: 

<!-- Specifies the path that is used by AdaptiveIconDrawable class to crop launcher icons. -->
    <string name="config_icon_mask" translatable="false">"M50,0L100,0 100,100 0,100 0,0z"</string>

El formato y la sintaxis de la cadena siguen el estándar SVG de W3 para la definición de rutas. Este formato de PathData también es compatible con los elementos de diseño vectoriales de Android.

Esta ruta debe ser convexa y debe respetar la zona segura (66/71 = 91%) dentro de los límites de la vista. Esto se aplica en una de las pruebas de CTS.

Si decides usar un círculo como máscara de la plataforma, asegúrate de superponer también config_useRoundIcon = true. De lo contrario, establece este valor de configuración como falso o no lo especifiques.

API de Adaptive Icon

A continuación, se muestra la API de la clase AdaptiveIconDrawable: 

package  android.graphics.drawable;
    public class AdaptiveIconDrawable extends Drawable implements Drawable.Callback {
    method public Drawable getBackground();
    method public Drawable getForeground();
    method public Path getIconMask();
    method public Region getSafeZone();
    method public float getExtraInsetFraction();
    method public int getOpacity();
    method public void invalidateDrawable(Drawable);
    method public void scheduleDrawable(Drawable, Runnable, long);
    method public void setAlpha(int);
    method public void setColorFilter(ColorFilter);
    method public void setOpacity(int);
    method public void unscheduleDrawable(android.graphics.drawable.Drawable, java.lang.Runnable);
    }
 
public class Icon extends Parceleable {
    method public Bitmap createWithAdaptiveBitmap();
    }

Implementación de referencia

No es necesario hacer nada para renderizar los íconos adaptables estáticos en ninguna de las plataformas de la IU del sistema. Cuando PackageManager devuelve un elemento de diseño, simplemente vincúlalo a un ImageView. Así es como ya se renderizan los íconos en las plataformas anteriores a O.

En cuanto a la renderización del efecto de movimiento dinámico, Launcher3 (platform/packages/apps/Launcher3) tendrá una implementación de referencia que mostrará cómo lograr el efecto en O-MR1.

Validación

Para validar la implementación, después de anular la máscara que prefieran, comprueba si los íconos se renderizan correctamente en Launcher3, Configuración, Descripción general y Configuración. También puedes ejecutar AdaptiveIconDrawableTest.java y AdaptiveIconMaskTest.java dentro de la prueba de casos de CTS de gráficos para probar la implementación.

Puedes encontrar un caso de prueba manual recomendado en: platform/development/samples/AdaptiveIconSample/.

Problemas conocidos

Entre los problemas conocidos, se incluyen los siguientes:

  • Íconos desenfocados, según cómo se defina la ruta de la máscara.
  • Íconos de acceso directo ampliados si los desarrolladores de apps no usan el método Icon.createWithAdaptiveBitmap() o no lo usan correctamente. Para que este método funcione correctamente, el Bitmap pasado debe tener un padding del 25% en los cuatro lados.

Estos problemas se pueden abordar de la siguiente manera:

  • La máscara debe definirse en el sistema de coordenadas [0, 100] × [0, 100].
  • Asegúrate de que las imágenes que se usan para los íconos adaptables (íconos de selector , atajos) tengan un padding suficiente (25%) en los cuatro lados.