Icônes adaptatives

En-tête des icônes adaptatives

Une icône adaptative, ou AdaptiveIconDrawable, peut s'afficher différemment selon les capacités de l'appareil et le thème de l'utilisateur. Les icônes adaptatives sont principalement utilisées par le lanceur d'applications sur l'écran d'accueil, mais elles peuvent également être utilisées dans les raccourcis, l'application Paramètres, les boîtes de dialogue de partage et l'écran de présentation. Les icônes adaptatives sont utilisées sur tous les facteurs de forme Android.

Contrairement aux images bitmap, les icônes adaptatives peuvent s'adapter à différents cas d'utilisation :

  • Différentes formes : une icône adaptative peut prendre différentes formes sur différents modèles d'appareils. Par exemple, elle peut afficher une forme circulaire sur un appareil OEM et un squircle (une forme entre un carré et un cercle) sur un autre appareil. Chaque OEM d'appareil 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 de la même icône Android d'exemple, avec 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 différents 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 placent ou déplacent l'icône sur l'écran d'accueil.

    GIF montrant des exemples de deux icônes Android circulaires, animées pour montrer la réponse de l'utilisateur. La première icône montre le logo Android qui oscille de gauche à droite, puis de haut en bas à l'intérieur du cercle. La deuxième icône s'agrandit, puis se réduit à nouveau.
    Figure 2. Exemples d'effets visuels affichés par une icône adaptative.

  • Thèmes utilisateur : à partir d'Android 13 (niveau d'API 33), les utilisateurs peuvent appliquer un thème à leurs icônes adaptatives. Si un utilisateur active les icônes d'application à thème dans les paramètres système et que le lanceur d'applications est compatible avec cette fonctionnalité, le système utilise la couleur du fond d'écran et du thème choisis par l'utilisateur pour déterminer la couleur de teinte des icônes d'application pour les applications qui ont une couche monochrome dans leur icône adaptative. À partir d'Android 16 QPR 2, Android applique automatiquement un thème aux icônes des applications qui n'en fournissent pas.

    Exemple de trois appareils Android, chacun affichant un thème utilisateur différent avec des teintes différentes : le premier montre un fond d'écran avec une teinte sombre, le deuxième un fond d'écran avec une teinte dorée 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 fond d'écran et s'intègrent parfaitement.
    Figure 3. Icônes adaptatives héritant 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ématique, mais l'icône d'application adaptative ou standard :

    • Si l'utilisateur n'active pas les icônes d'application thématiques.
    • Si votre application ne fournit pas d'icône d'application monochrome et que l'appareil de l'utilisateur exécute une version d'Android antérieure à Android 16 QPR 2.
    • 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érentes formes, effets visuels et thèmes utilisateur, sa 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. Les calques peuvent être des vecteurs ou des bitmaps, bien que les vecteurs soient préférables.

    Exemple de calque de premier plan (à gauche) et de calque d'arrière-plan (à droite). Le premier plan montre l'icône à 16 côtés d'un exemple de logo Android centré dans une zone de sécurité de 66 x 66. La zone de sécurité est centrée dans un conteneur de 108 x 108. L'arrière-plan affiche les mêmes dimensions mesurées pour la zone de sécurité et le conteneur, mais uniquement un arrière-plan bleu et aucun logo.
    Figure 4. Icônes adaptatives définies à l'aide de calques de premier plan et d'arrière-plan. La zone de sécurité de 66 x 66 représentée est la zone qui n'est jamais coupée par un masque de forme défini par un OEM.
    Exemple montrant l'icône de la figure précédente superposée sur un masque circulaire.
    Figure 5. Exemple de calques de premier plan et d'arrière-plan avec un masque circulaire appliqué

  • Si vous souhaitez que les icônes d'application s'adaptent au thème de l'utilisateur, fournissez un seul calque pour la version monochrome de l'icône.

    Exemple de calque d'icône monochrome (à gauche) et d'aperçus de couleur (à droite). Le calque monochrome montre l'icône à 16 côtés d'un exemple de logo Android centré dans une zone de sécurité de 66 x 66. Cette zone de sécurité est centrée dans un conteneur de 108 x 108. Les aperçus de couleur montrent l'affichage de cette couche lorsqu'elle est appliquée à des thèmes utilisateur de différentes couleurs (orange, rose, jaune et vert).
    Figure 6. Calque d'icône monochrome (à gauche) avec des exemples d'aperçus de couleur (à droite).

  • Définissez la taille de tous les calques sur 108 x 108 dp.

  • Utilisez des icônes aux contours 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 la zone interne de 66 x 66 dp de l'icône apparaît dans la fenêtre d'affichage masquée.

Les 18 dp extérieurs de chacun des quatre côtés des calques sont réservés au masquage et à la création d'effets visuels tels que la parallaxe ou l'effet de pulsation.

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

Ajouter votre icône adaptative à votre application

Les icônes adaptatives, tout comme les icônes non adaptatives, sont spécifiées à l'aide de l'attribut android:icon dans le fichier manifeste de l'application.

Un attribut facultatif, android:roundIcon, est utilisé par les lanceurs d'applications qui représentent les applications avec des icônes circulaires. Il peut être utile si l'icône de votre application inclut un arrière-plan circulaire comme élément central de sa conception. Ces lanceurs d'applications doivent générer des icônes d'application en appliquant un masque circulaire à android:roundIcon. Cette garantie peut vous permettre d'optimiser l'apparence de l'icône de votre application, par exemple en agrandissant légèrement le logo et en vous assurant que l'arrière-plan circulaire est en pleine page lorsqu'il est recadré.

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, enregistrez votre icône adaptative dans res/mipmap-anydpi-v26/ic_launcher.xml. Utilisez l'élément <adaptive-icon> pour définir les ressources de calque de premier plan, d'arrière-plan et monochrome de vos icônes. Les éléments internes <foreground>, <background> et <monochrome> sont compatibles avec les images vectorielles et bitmap.

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" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

Les calques de premier plan et monochrome utilisent le même drawable. Toutefois, vous pouvez créer des drawables distincts pour chaque calque si nécessaire.

Vous pouvez également définir des drawables en tant qu'éléments en les intégrant aux éléments <foreground>, <background> et <monochrome>. L'extrait de code suivant montre comment procéder avec l'élément 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 Implémenter des icônes adaptatives. Pour en savoir plus sur les raccourcis, consultez la présentation des raccourcis d'application.

Ressources supplémentaires

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

Précédent
Appliquer les bonnes pratiques concernant les raccourcis
Suivant
Bulles