Icônes adaptatives

Android 8.0 (API niveau 26) propose des icônes de lanceur adaptatives, lesquelles peuvent afficher diverses formes sur différents modèles d'appareils. Une icône de lanceur adaptative peut, par exemple, afficher une forme circulaire sur un appareil OEM et un carré avec des bords arrondis (ou squircle) sur un autre appareil. Chaque OEM fournit un masque que le système utilise ensuite pour afficher toutes les icônes adaptatives avec la même forme. Les icônes de lanceur adaptatives sont également utilisées dans les raccourcis, l'application Paramètres, les boîtes de dialogue de partage et l'écran "Aperçu".

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

Figure 1. Les icônes adaptatives sont compatibles avec divers masques qui varient d'un appareil à l'autre.

Vous pouvez contrôler l'apparence de votre icône de lanceur adaptative en définissant deux calques représentant un arrière-plan et un avant-plan. Vous devez fournir des calques d'icône sous la forme d'éléments drawable, sans masques ni ombres d'arrière-plan autour du contour de l'icône.

Isometric illustration of creating an adaptive icon

Figure 2. Les icônes adaptatives sont définies à l'aide de deux calques et d'un masque.

Dans Android 7.1 (API niveau 25) et versions antérieures, la taille des icônes de lanceur était de 48 x 48 dp. Désormais, vous devez dimensionner vos calques d'icône en suivant les consignes ci-dessous :

  • Les deux calques doivent avoir une taille de 108 x 108 dp.
  • Les 72 x 72 dp internes de l'icône apparaissent dans la fenêtre d'affichage masquée.
  • Le système réserve les 18 dp externes sur chacun des quatre côtés pour créer des effets visuels intéressants, tels qu'un parallaxe ou une pulsation.

Remarque : Les effets visuels animés sont générés par les lanceurs compatibles. Les effets visuels peuvent varier d'un lanceur à un autre.

Attention : Un OEM peut spécifier un masque pouvant inclure un rayon de seulement 33 dp le long de certains points de la forme.

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

Figure 3. Les icônes adaptatives acceptent de nombreux effets visuels.

Attention : Si vous ne mettez pas à jour votre icône de lanceur avec les calques nécessaires, son apparence ne sera pas conforme à celle des autres icônes affichées par l'interface utilisateur du système et les effets visuels ne seront pas acceptés.

Pour savoir comment créer des icônes adaptatives à l'aide d'Android Studio, consultez l'article Créer des icônes d'application avec Image Asset Studio.

Créer des icônes adaptatives au format XML

Pour ajouter une icône adaptative à une application à l'aide de XML, commencez par mettre à jour l'attribut android:icon dans le manifeste de votre application pour spécifier une ressource drawable. Vous pouvez également définir une ressource drawable d'icône à l'aide de l'attribut android:roundIcon. Vous ne devez utiliser l'attribut android:roundIcon que si vous avez besoin d'un élément d'icône différent pour les masques circulaires ; par exemple, si la forme circulaire est la marque distinctive de votre logo. L'extrait de code suivant illustre ces deux attributs :

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

Ensuite, vous devez créer d'autres ressources drawable dans votre application en vue de les utiliser avec Android 8.0 (API niveau 26) dans res/mipmap-v26/ic_launcher.xml. Vous pouvez alors utiliser l'élément <adaptive-icon> pour définir les ressources drawable de calques d'avant-plan et d'arrière-plan pour vos icônes. Les éléments internes <foreground> et <background> acceptent l'attribut 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>
    

Vous pouvez également définir les ressources drawable d'avant-plan et d'arrière-plan en tant qu'éléments en les plaçant entre les balises <foreground> et <background>.

Si vous souhaitez appliquer à vos raccourcis le même masque et le même effet visuel que les icônes de lanceur adaptatives classiques, utilisez l'une des techniques suivantes :

  • Pour les raccourcis statiques, utilisez l'élément <adaptive-icon>.
  • Pour les raccourcis dynamiques, appelez la méthode createWithAdaptiveBitmap() lorsque vous les créez.

Pour plus d'informations sur les raccourcis, consultez l'article Raccourcis d'application.

Ressources supplémentaires

Pour plus d'informations sur la conception et la mise en œuvre d'icônes adaptatives, lisez cette série d'articles (en anglais) rédigés par Nick Butcher, concepteur et développeur chez Google :