Icônes adaptatives

Une icône adaptative, ou AdaptiveIconDrawable, peuvent s'afficher différemment en fonction des fonctionnalités de l'appareil et de l'utilisateur thématisation. Les icônes adaptatives sont principalement utilisées par le lanceur d'applications sur l'écran d'accueil, mais ils peuvent aussi être utilisés dans les raccourcis, l'application Paramètres, les boîtes de dialogue de partage et l'écran d'aperçu. Les icônes adaptatives sont utilisées dans tous les facteurs de forme Android.

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

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

    <ph type="x-smartling-placeholder">
    </ph> GIF montrant une animation répétée du même exemple d&#39;icône Android montrant différentes formes en fonction du masque utilisé : un cercle, puis deux types de squircles différents <ph type="x-smartling-placeholder">
    </ph> Figure 1. Les icônes adaptatives sont compatibles avec les 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 dans la maison l'écran.

    <ph type="x-smartling-placeholder">
    </ph> GIF montrant deux exemples d&#39;icônes Android en forme de cercle pour afficher la réponse de l&#39;utilisateur. La première icône représente le logo Android. oscillent de gauche à droite, puis de haut en bas à l&#39;intérieur du cercle. Le deuxième se développe, puis se réduit à nouveau. <ph type="x-smartling-placeholder">
    </ph> 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'applications à thème, en activant Activez ou désactivez les icônes à thème dans les paramètres système. Le lanceur d'applications le permet le système utilise la couleur du fond d'écran choisi par l'utilisateur pour déterminer la couleur de la teinte.

    <ph type="x-smartling-placeholder">
    </ph> Image montrant des exemples de trois appareils Android, chacun affichant un un thème utilisateur différent avec différentes teintes: le premier montre un fond d&#39;écran avec teintes sombres ; la seconde montre un fond d&#39;écran teinté doré ; le troisième affiche fond d&#39;écran avec un fond d&#39;écran gris clair avec des teintes bleues. Dans chaque exemple, le les icônes ont hérité des teintes du fond d&#39;écran et se fondent parfaitement dans le décor. <ph type="x-smartling-placeholder">
    </ph> Figure 3. Icônes adaptatives héritées du paramètre le fond d'écran et les thèmes de l'utilisateur.

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

    • Si l'utilisateur n'active pas les icônes d'application à thème.
    • Si votre application ne fournit pas d'icône d'application monochrome.
    • Si le lanceur d'applications ne prend pas en charge les icônes d'applications à thème.

Concevoir des icônes adaptatives

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

  • Vous devez fournir deux calques pour la version couleur de l'icône: un pour la au premier plan et une pour l'arrière-plan. Les calques peuvent être des vecteurs ou les bitmaps, mais il est préférable d'utiliser des vecteurs.

    <ph type="x-smartling-placeholder">
    </ph> Image montrant un exemple de calque de premier plan (image de gauche) et un calque d&#39;arrière-plan (image de droite). Le premier plan montre l&#39;icône à 16 faces d&#39;un exemple de logo Android centré dans une zone de sécurité de 66 x 66. La zone de sécurité est centré à l&#39;intérieur d&#39;un conteneur de 108 x 108. L&#39;arrière-plan montre la même des dimensions mesurées pour la zone de sécurité et le conteneur, mais seulement arrière-plan et pas de logo. <ph type="x-smartling-placeholder">
    </ph> Figure 4 : Icônes adaptatives définies à l'aide du 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é par un masque profilé défini par un OEM.
    <ph type="x-smartling-placeholder">
    </ph> Une image montrant l&#39;icône de l&#39;image précédente superposée à une à l&#39;aide d&#39;un masque circulaire. <ph type="x-smartling-placeholder">
    </ph> Figure 5 : Un exemple de la façon dont le premier plan et d'arrière-plan se complètent et un masque circulaire est appliqué.

  • Si vous souhaitez prendre en charge la thématisation utilisateur des icônes d'application, fournissez une seule couche pour la version monochrome de l'icône.

    <ph type="x-smartling-placeholder">
    </ph> Image montrant un exemple de calque d&#39;icône monochrome (image de gauche) et des aperçus de couleurs (image de droite). La couche monochrome montre la couche à 16 faces icône d&#39;un exemple de logo Android centré dans une zone de sécurité de 66 x 66. Le coffre-fort est centrée à l&#39;intérieur d&#39;un conteneur de 108 x 108. Les aperçus des couleurs s&#39;affichent ce calque s&#39;affiche lorsqu&#39;il est appliqué à des thèmes utilisateur de couleurs différentes (orange, rose, jaune et vert). <ph type="x-smartling-placeholder">
    </ph> Figure 6. Calque d'icône monochrome (à gauche) avec exemples d'aperçus de couleurs (à droite)

  • Taille de tous les calques : 108 x 108 dp.

  • Utilisez des icônes aux bords nets. Les calques ne doivent pas comporter de masques ni d'arrière-plans des ombres 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 dp interne de 66 x 66 dp de l'icône apparaît dans la partie masquée fenêtre d'affichage.

Les 18 dp externes de chacun des quatre côtés des couches sont réservés à et créer des effets visuels comme un parallaxe ou une pulsation.

Pour savoir comment créer des icônes adaptatives à l'aide d'Android Studio, consultez notre application Android icône Figma modèle ou la documentation Android Studio sur la création d'un lanceur d'applications . Par ailleurs, consultez l'article de blog Concevoir des applications Icônes pour en savoir plus.

Ajouter une icône adaptative à votre application

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

Un attribut facultatif, android:roundIcon, est utilisé par les lanceurs d'applications qui représentent applications avec des icônes circulaires, ce qui peut être utile si l'icône de votre application contient un arrière-plan circulaire est au cœur de sa conception. Ces lanceurs sont nécessaires pour générer des icônes d'application en appliquant un masque circulaire à android:roundIcon ; 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 veillant à ce qu'il soit recadré, avec un arrière-plan circulaire à fond perdu.

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

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

Enregistrez ensuite votre icône adaptative dans res/mipmap-anydpi-v26/ic_launcher.xml. Utilisez l'élément <adaptive-icon> pour définir le premier plan, l'arrière-plan des ressources de calques monochromes pour vos icônes. <foreground> Les éléments internes <background> et <monochrome> sont compatibles des images vectorielles et bitmap.

L'exemple suivant montre comment définir <foreground>, <background> et Éléments <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 incorporant à <foreground>, <background> et <monochrome>. Les éléments suivants : montre comment procéder 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 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 en savoir plus sur l'implémentation d'icônes adaptatives, consultez la section Implémentation Adaptative Icônes : Pour en savoir plus sur les raccourcis, consultez la section Raccourcis d'application présentation.

Ressources supplémentaires

Consultez les ressources suivantes pour en savoir plus sur la conception et implémenter des icônes adaptatives.