1. Introduction
Dernière mise à jour : 08/04/2022
À partir d'Android 13, les utilisateurs peuvent utiliser un thème pour leurs icônes de lanceur adaptatives. Grâce à cette fonctionnalité, les icônes d'application dans les lanceurs d'applications Android compatibles sont teintées pour hériter de la couleur du fond d'écran choisi par l'utilisateur et d'autres thèmes.
Créez facilement tous les composants système nécessaires à votre application Android, y compris les nouvelles icônes de couleur adaptatives.
Points abordés
- Comprendre les différents types d'icônes d'application et obtenir des conseils pour les concevoir
- Découvrez comment utiliser le modèle Figma du lanceur d'applications Android.
- Utiliser le générateur d'éléments Android Studio.
- Découvrez comment prévisualiser votre icône de lanceur avec l'émulateur Android Studio.
Prérequis
- Connaissances de base de Figma
- Facultatif : Illustration de l'icône de l'application (premier plan, arrière-plan et monochrome)
Prérequis
- Un compte Figma
- Un fichier Figma Designlab
- Facultatif : un PC sur lequel est installé Android Studio
2. Premiers pas
Configuration
Pour commencer, vous devez accéder au fichier Figma de l'icône de l'application Android.
Tout d'abord, connectez-vous à Figma ou créez un compte.
Dupliquer à partir de la communauté Figma
Accédez au fichier Modèle de lanceur d'applications Android ou recherchez "Migrer vers les polices variables" dans la communauté Figma. Cliquez sur Get a Copy (Obtenir une copie) en haut à droite pour copier ce fichier dans vos dossiers.
Utiliser le modèle
Le modèle d'icône Android se compose de deux pages :
- La page de couverture présente brièvement les concepts pertinents et explique comment utiliser le modèle.
- La page de modèle inclut tout ce dont vous avez besoin pour créer les composants requis,divisés en trois cadres (Couleur, Forme, Play Store).
Remarque : Dans le panneau des calques de gauche, la plupart des calques et des groupes sont verrouillés. Ils doivent le rester. (Vous pourrez placer des illustrations dans les groupes d'illustrations déverrouillés.)
Mais avant de commencer à créer des composants, voyons ce que nous allons créer…
3. Icônes système Android
Icônes de lanceur
Les icônes de lanceur, ou icônes d'application, sont un élément essentiel de l'expérience de lancement de votre application. Elles apparaissent sur l'écran d'accueil comme point d'entrée dans votre application.
Forme adaptative
Une icône adaptative, ou AdaptiveIconDrawable, peut s'afficher différemment selon les fonctionnalité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 l'être dans les raccourcis, l'application Paramètres, les boîtes de dialogue de partage et l'écran "Aperçu".
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 carré avec des bords arrondis (ou squircle) 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.
La capacité d'adaptation à la forme permet également au système d'appliquer divers effets d'animation lors de l'interaction avec l'utilisateur.
Couleur adaptative
Les icônes adaptatives peuvent désormais utiliser des couleurs dynamiques pour permettre des icônes d'application à thème personnalisées.
Si un utilisateur a activé les icônes d'application à thème (c'est-à-dire qu'il a activé le bouton "Icônes à 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 la teinte.
Tout comme les icônes qui s'adaptent à la forme, les icônes de couleur adaptative sont composées d'un premier plan et d'un arrière-plan. Seul un élément d'icône monochrome de premier plan doit être fourni. Le système s'occupe de l'arrière-plan et de la couleur avec la palette de couleurs extraite.
Vous pouvez également utiliser la même icône monochrome pour une icône de notification.
Ancien
Les anciennes icônes doivent être incluses pour prendre en charge les appareils exécutant d'anciennes versions d'Android ou qui ne sont pas compatibles avec les fonctionnalités adaptatives (avant la version 8.0).
Elles ne disposent pas de ressources de premier plan ni d'arrière-plan, et peuvent avoir une forme libre. Si vous utilisez le modèle fourni, l'illustration finale de la forme adaptative sera exportée dans les tailles nécessaires pour votre ancienne icône.
Icônes de notification
Une notification est un message qu'Android affiche en dehors de l'UI de votre application pour transmettre à l'utilisateur des rappels, des messages transmis par d'autres utilisateurs ou d'autres informations en temps réel provenant de votre application. Le système affiche les notifications à différents endroits et sous différents formats. Par exemple, elles peuvent s'afficher automatiquement sous la forme d'une icône dans la barre d'état, d'un élément plus détaillé dans le panneau des notifications ou d'un badge sur l'icône de l'application, ainsi que sur les accessoires connectés associés.
Visuels du magasin
Vous pouvez utiliser une image de présentation, des captures d'écran, une brève description et des vidéos pour mettre en valeur votre application et la promouvoir sur Google Play, ainsi que sur d'autres canaux promotionnels de Google.
Cette icône ne remplace pas l'icône de lanceur de votre application, mais elle doit être de meilleure qualité et avoir une résolution plus élevée.
Comme pour l'icône du lanceur d'applications, l'illustration peut occuper tout l'espace de l'élément. Vous pouvez également concevoir un élément d'illustration, tel qu'un logo, et le positionner sur la grille de repère.
Pour que la fiche Play Store de votre application puisse être publiée, vous devez fournir une icône d'application carrée de 512 x 512 px. Si vous utilisez le modèle d'icône d'application Android, il est fourni lors de l'exportation à l'aide de l'illustration de forme adaptative.
4. Bonnes pratiques de conception
Les icônes de lanceur permettent à l'utilisateur de lancer votre application. En tant qu'éléments d'entrée dans votre application, ils doivent être reconnaissables et lisibles. Voici quelques bonnes pratiques à suivre pour garantir ces qualités dans l'icône de votre appli.
Simplifiez vos illustrations. Évitez les calques multiples, les nombreux effets et le texte. Ces détails seront perdus ou difficiles à voir à petite taille. 
Évitez les formes complexes. Cela inclut les logos. Si possible, utilisez un logo simplifié ou une symbologie que vos utilisateurs associent à votre application. Une forme lisible et distincte permet de créer une unité pour que les utilisateurs puissent facilement reconnaître votre application dans différents contextes (couleur adaptative et notification). 
Utilisez une grille. Utilisez une grille ou des lignes de repère pour vous assurer que l'illustration au premier plan fonctionnera une fois recadrée, y compris les illustrations en plein format. 
Tenez compte du contraste. Pour les icônes adaptatives et anciennes, assurez-vous que le premier plan et l'arrière-plan de l'icône présentent un contraste lisible. Évitez d'utiliser des ombres portées épaisses, qui peuvent être confondues avec l'ombre du système. 
Assurez-vous que les éléments graphiques se trouvent dans les zones de sécurité. Conservez les éléments de premier plan dans un espace de 72 x 72 px (sauf si vous utilisez le format à fond perdu). Les arrière-plans doivent être au format 108 x 108 px. Remarque : Le cadre du modèle d'icône est plus grand que 72 x 72 px pour vous permettre de créer des icônes. Les composants seront redimensionnés pour respecter les spécifications.
Format vectoriel Essayez d'utiliser des illustrations au format vectoriel (fichiers SVG, AI, PDF et EPS, par exemple) plutôt qu'au format raster (fichiers PNG, JPG et GIF, par exemple). Cela garantit que votre illustration est compatible avec les nouvelles fonctionnalités et qu'elle est plus facile à modifier. 
5. Couleurs adaptatives et icônes de notification
À présent, c'est à votre tour de créer vos propres icônes système Android.
- Localisez le fichier Figma des icônes d'application Android.
- Dans le fichier, recherchez le frame Adaptive color (Couleur adaptative). Dans le panneau des calques de gauche, recherchez Couleur adaptative > Composants > art > Zone de l'illustration de l'icône > Illustration de l'icône à thème < ajoutez votre icône. Si vous avez une icône monochrome prête, copiez-la ici pour remplacer l'icône Bugdroid exemple, puis passez à l'étape 6.
- Si vous n'avez pas d'icône monochrome, commencez par un logo ou une icône en rapport avec votre application. Suivez les conseils de conception pour mettre à jour votre icône. Commencez par simplifier et éviter les formes complexes. Par exemple, les illustrations utilisées dans l'application sont simplifiées avec des formes de feuilles moins complexes. Les ombres et les détails des lignes sont simulés avec des espaces blancs.
- Maintenant, mettez à jour le dimensionnement à l'aide de la grille de repères. Ici, nous avons défini la redimension sur Scale (Échelle) et nous nous sommes assurés que le visuel se trouve dans la zone de sécurité du premier plan. Le modèle est configuré avec l'illustration au format 4x et est redimensionné automatiquement pour l'exportation. Vous pouvez donc concevoir vos icônes à une plus grande échelle.
- Le fichier est configuré pour fonctionner avec Material Theme Builder afin de vous aider à prévisualiser les couleurs dynamiques. Associez le style de couleur de l'icône de premier plan à On-surface-variant.
- Désormais, lorsque vous ouvrez Material Theme Builder depuis le panneau des plug-ins,vous pouvez mélanger la couleur source ou ajouter une image pour mettre à jour les couleurs à l'aide de la couleur source extraite.
- À quoi ressemblera-t-il dans différentes résolutions ou sur un écran d'accueil ? Le modèle est configuré de sorte que les illustrations placées dans les cadres d'illustration apparaissent dans les différents contextes d'aperçu.
- Le système utilise l'icône monochrome comme notification et l'affiche ainsi dans les aperçus.
6. Icônes adaptatives et anciennes
Nous allons maintenant créer la forme adaptative et les icônes anciennes pour assurer une large compatibilité de l'icône.
- Dans le fichier, recherchez le frame de forme. Dans le panneau de calques de gauche, recherchez Arrière-plan de l'icône < ajoutez votre icône*. Si vous avez une icône prête, copiez-la ici pour remplacer l'icône Bugdroid exemple, puis passez à l'étape 5*. Si vous n'avez pas d'icône, commencez par un logo ou une icône en rapport avec votre application, ou réutilisez l'icône monochrome.
- Mettez à jour l'icône de premier plan en gardant à l'esprit les bonnes pratiques concernant les icônes. Ici, j'ai rétabli les couleurs d'origine de l'illustration, mais j'ai conservé un minimum de détails.
- Maintenant, mettez à jour le dimensionnement à l'aide de la grille de repères. Ici, nous avons défini le redimensionnement sur Échelle et nous nous sommes assurés que le visuel se trouve dans la zone de sécurité du premier plan.
- Les icônes d'application de forme adaptative peuvent également avoir un arrière-plan distinct. Cela permet de recadrer les calques de l'icône de manière sécurisée et de fournir de subtils effets de mouvement lors de l'interaction. Vous pouvez également utiliser et définir un arrière-plan de couleur unie dans Android Studio.
- Les aperçus sont mis à jour pour montrer à quoi ressemblent le premier plan et l'arrière-plan ensemble, sur l'écran d'accueil, avec différentes formes recadrées et en tant qu'ancienne icône.
Vous pouvez modifier la forme utilisée pour le recadrage dans l'aperçu de l'écran d'accueil en sélectionnant les icônes et en modifiant l'option de variante de forme. 
7. Exportation
Bravo, vous avez maintenant mis à jour le modèle avec les icônes de votre application ! Exportons-les pour l'implémentation.
- Assurez-vous que rien n'est sélectionné sur le canevas.
- Accédez au menu Figma > Fichier > Exporter (Maj+Cmd+E).
- Dans le menu d'exportation, confirmez l'exportation. Les composants du modèle seront alors téléchargés.
Quels sont les éléments inclus dans l'exportation ?
Les composants exportés contiennent tous les fichiers nécessaires à l'implémentation de l'icône de votre application, comme suit :
- Figma exporte l'icône monochrome de premier plan pour la couleur adaptative au format SVG, ainsi que le premier plan et l'arrière-plan pour les icônes de forme adaptative.
- Figma fournit également d'anciennes icônes dans différents répertoires mipmap organisés par résolution.
Et voilà ! Votre icône est prête à être envoyée à l'équipe de développement.
Si vous souhaitez prévisualiser vos icônes dans Android Studio et convertir ces fichiers SVG au format d'asset final, passez à l'étape suivante.
8. Utiliser Image Asset Studio
Premiers pas avec Android Studio
- Téléchargez et installez Android Studio.
- Lancez Android Studio.
Android Studio vous propose de démarrer un nouveau projet ou de sélectionner des projets existants.
- Sélectionnez un nouveau projet pour le moment. Les écrans suivants vous guident tout au long de la configuration de votre nouveau projet.
- Sélectionnez un modèle de démarrage, car nous n'examinerons que les icônes de lancement.
- Ensuite, attribuez un nom à votre nouveau projet, puis sélectionnez Terminer. La création du projet prend quelques instants.
Utiliser Image Asset Studio
Nous pouvons maintenant ajouter vos icônes au projet à l'aide d'un outil pratique, Asset Studio.
- Pour accéder à cet outil, sélectionnez Menu Fichier > Nouveau > Élément image.
- Lorsque Image Asset Studio s'ouvre, ajoutez le calque d'avant-plan en sélectionnant l'icône de dossier dans Chemin d'accès. Choisissez le fichier SVG exporté en tant que drawable-anydpi/ic_launcher.svg
- Sélectionnez l'onglet Calque d'arrière-plan, puis choisissez le calque d'arrière-plan qui a été exporté. Vous pouvez également choisir le type d'élément "Couleur" pour définir un arrière-plan de Lanceur d'applications de couleur unie.
- Revenez au calque de premier plan et vérifiez que l'image se trouve dans la zone de sûreté. Redimensionnez l'icône pour obtenir le meilleur rendu visuel.
- Une fois terminé, cliquez sur Next (Suivant). Vous serez alors invité à indiquer où les icônes doivent être placées dans votre projet (laissez la valeur par défaut ou passez à "Main"). Cliquez ensuite sur Terminer. Vous trouverez vos composants du lanceur d'applications sous res > drawable. Double-cliquez pour ouvrir un aperçu des drawables vectoriels finaux.
- Copiez et collez manuellement l'élément de couche monochrome dans res/drawable ou res/drawable-v24, ou importez manuellement la couche monochrome en effectuant un clic droit sur le dossier res et en sélectionnant New > Vector Asset (Nouveau > Élément vectoriel).
- Dans res/mipmap-anydpi-v26/ic_launcher.xml et res/mipmap-anydpi-v26/ic_launcher_round.xml, ajoutez ou modifiez android:monochrome="path/to/monochrome/asset pour pointer vers le bon asset monochrome.
9. Aperçu et ressources
Prévisualiser dans l'émulateur
Nous avons fait cela pour les ajouter au projet d'application, ce qui nous permet de les prévisualiser sur un appareil réel ou un émulateur. Voyons à quoi ressembleront nos icônes en réalité.
Un émulateur devrait être configuré par défaut. Si ce n'est pas le cas, créez un appareil virtuel Android. Cliquez sur le bouton de lecture vert. Le projet est compilé et l'émulateur s'ouvre.
Composants finaux
Bravo ! Vous avez pu vérifier l'apparence de l'icône de votre lanceur sur un appareil à l'aide de l'émulateur et l'avez ajoutée à un projet d'application. Vous les avez ainsi convertis dans leur forme de production finale. Mais où sont-ils ?
Les composants sont des ressources d'une application Android. Pour les trouver, ouvrez le panneau Ressources (généralement sur la gauche). Accédez à l'application, puis recherchez votre dossier Res. Effectuez un clic droit pour ouvrir un menu, puis sélectionnez Ouvrir dans le Finder (sur Mac). Une fenêtre Finder s'ouvre. Si vous le souhaitez, vous pouvez gagner du temps de développement et de contrôle qualité en convertissant et en testant le reste des composants de votre application à l'aide d'un processus similaire. Si vous avez converti le reste des ressources de votre application, vous pouvez partager ce dossier avec l'équipe de développement.
10. Félicitations
Bien joué ! Vous avez découvert les icônes du système Android nécessaires pour créer une application Android, vous avez conçu vos propres icônes, vous avez exploré la ressource de modèle d'icône et vous êtes peut-être allé plus loin en explorant Android Studio pour prévisualiser et convertir des éléments pour la production.
Si vous avez des questions, n'hésitez pas à nous contacter à tout moment en mentionnant @MaterialDesign sur X (anciennement Twitter).
Suivez-nous pour d'autres contenus et tutoriels de conception sur youtube.com/MaterialDesign.