Icônes adaptatives

Une icône adaptative, ou AdaptiveIconDrawable, peut s'afficher différemment en fonction des capacités de chaque appareil et de la thématisation utilisateur. Les icônes adaptatives sont principalement utilisées par le lanceur d'applications sur l'écran d'accueil, mais elles peuvent également l'être dans les raccourcis, l'application Paramètres, les boîtes de dialogue de partage et l'écran "Vue d'ensemble".

Une icône adaptative peut s'adapter à différents cas d'utilisation:

  • Différentes formes:une icône adaptative peut afficher différentes formes sur différents modèles d'appareils. Par exemple, il peut afficher une forme circulaire sur un appareil OEM et un squircle (forme entre un carré et un cercle) sur un autre appareil. Chaque OEM doit fournir un masque que le système utilise pour afficher toutes les icônes adaptatives avec la même forme.

    GIF montrant une animation répétée du même exemple d'icône Android, montrant différentes formes en fonction du masque utilisé : un cercle, puis deux types d'écureuils différents
    Figure 1. Les icônes adaptatives sont compatibles avec divers masques, qui varient d'un appareil à l'autre.
  • Effets visuels:une icône adaptative est compatible avec divers effets visuels attrayants, qui s'affichent lorsque les utilisateurs la placent ou la déplacent sur l'écran d'accueil.

    GIF montrant deux exemples d'icônes Android en forme de cercle, animés pour montrer la réponse de l'utilisateur La première icône montre le logo Android qui bouge de gauche à droite, puis de haut en bas à l'intérieur du cercle. La deuxième icône se développe, puis se rétrécit.
    Figure 2. Exemples d'effets visuels affichés par une icône adaptative.
  • Thématisation utilisateur:à partir d'Android 13 (niveau d'API 33), les utilisateurs peuvent thématiser leurs icônes adaptatives. Si un utilisateur active les icônes d'application à thème, en activant le bouton Icônes à thème dans les paramètres système et que le lanceur d'applications prend en charge cette fonctionnalité, le système utilise la couleur du fond d'écran et du thème choisis par l'utilisateur pour déterminer la teinte.

    Image montrant des exemples de trois appareils Android, chacun affichant un thème utilisateur différent avec des teintes différentes: le premier montre un fond d'écran aux teintes sombres, le second un fond d'écran doré, et le troisième un fond d'écran gris clair avec des teintes bleutées. Dans chaque exemple, les icônes ont hérité de la teinte du papier peint et se fondent parfaitement.
    Figure 3. Icônes adaptatives qui héritent du fond d'écran et des thèmes de l'utilisateur

Dans les scénarios suivants, l'écran d'accueil n'affiche pas l'icône d'application à thème, mais l'icône d'application adaptative ou standard:

  • Si l'utilisateur n'active pas les icônes d'application à thème.
  • Votre application ne fournit pas d'icône monochrome.
  • Si le lanceur d'applications n'est pas compatible avec les icônes d'application à thème

Concevoir des icônes adaptatives

Pour que votre icône adaptative soit compatible avec différents formes, effets visuels et thématisations utilisateur, la conception doit répondre aux exigences suivantes:

  • Vous devez fournir deux calques pour la version couleur de l'icône: un pour le premier plan et un pour l'arrière-plan.

    Image montrant un exemple de calque de premier plan (image de gauche) et de calque d'arrière-plan (image de droite). Au premier plan, l'icône à 16 faces d'un exemple de logo Android est centrée dans une zone de sécurité de 66 x 66 pixels. La zone de sécurité est centrée à l'intérieur d'un conteneur de 108 x 108 pixels. L'arrière-plan affiche les mêmes dimensions mesurées pour la zone de sécurité et le conteneur, mais seulement un fond bleu et pas de logo.
    Figure 4. Des icônes adaptatives définies à l'aide de calques de premier plan et d'arrière-plan. La zone de sécurité 66 x 66 représentée est la zone qui n'est jamais rognée par un masque profilé défini par un OEM.
    Image montrant l'icône de l'image précédente superposée à un masque circulaire.
    Figure 5 : Exemple de l'apparence des couches de premier plan et d'arrière-plan avec un masque circulaire appliqué.
  • Si vous souhaitez prendre en charge la thématisation utilisateur des icônes d'application, fournissez une couche unique pour la version monochrome de l'icône.

    Image montrant un exemple de calque d'icône monochrome (image de gauche) et d'aperçus de couleurs (image de droite). La couche monochrome montre l'icône à 16 faces d'un exemple de logo Android centrée dans une zone de sécurité de 66 x 66 pixels. La zone de sécurité est centrée à l'intérieur d'un conteneur de 108 x 108 pixels. Les aperçus des couleurs montrent ce calque lorsqu'il est appliqué à des thèmes utilisateur de couleurs différentes (orange, rose, jaune et vert).
    Figure 6. Calque d'icône monochrome (à gauche) avec des exemples d'aperçus de couleurs (à droite).
  • Dimensionnez tous les calques à 108 x 108 dp.

  • Utilisez des icônes aux bords nets. Les calques ne doivent pas comporter de masques ni d'ombres d'arrière-plan autour du contour de l'icône.

  • Utilisez un logo d'au moins 48 x 48 dp. Elle ne doit pas dépasser 66 x 66 dp, car les 66 x 66 dp internes de l'icône apparaissent dans la fenêtre d'affichage masquée.

Les 18 dp externes sur chacun des quatre côtés des couches sont réservés au masquage et à la création d'effets visuels tels que le parallaxe ou la pulsation.

Pour savoir comment créer des icônes adaptatives à l'aide d'Android Studio, consultez notre modèle Figma d'icône d'application Android ou la documentation d'Android Studio sur la création d'icônes de lanceur. Consultez également l'article de blog Concevoir des icônes adaptatives.

Ajouter une icône adaptative à votre application

Pour ajouter une icône adaptative à votre application, mettez à jour l'attribut android:icon dans le fichier 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, mais uniquement si vous avez besoin d'un élément d'icône différent pour les masques circulaires (par exemple, si votre marque repose sur une forme circulaire).

L'extrait de code suivant illustre ces deux attributs, mais la plupart des applications ne spécifient que android:icon:

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

Ensuite, dans res/mipmap-anydpi-v26/ic_launcher.xml, créez d'autres ressources drawable dans votre application pour assurer la rétrocompatibilité avec Android 8.0 (niveau d'API 26). Utilisez l'élément <adaptive-icon> pour définir les drawables de calque de premier plan, d'arrière-plan et monochromes pour vos icônes. Les éléments internes <foreground>, <background> et <monochrome> sont compatibles avec l'attribut android:drawable.

L'exemple suivant montre comment définir les éléments <foreground>, <background> et <monochrome> dans <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" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

Vous pouvez également définir des drawables en tant qu'éléments en les encadrant dans les éléments <foreground>, <background> et <monochrome>. L'extrait de code suivant montre un exemple d'opération avec le drawable de premier plan.

<?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 vous souhaitez appliquer le même masque et le même effet visuel à vos raccourcis que les icônes adaptatives standards, 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 en savoir plus sur l'implémentation d'icônes adaptatives, consultez la section Implémenter des icônes adaptatives. Pour en savoir plus sur les raccourcis, consultez la section Présentation des raccourcis d'application.

Ressources supplémentaires

Consultez les ressources suivantes pour en savoir plus sur la conception et l'implémentation d'icônes adaptatives.