Créer des icônes d'application

Les icônes aident les utilisateurs à identifier votre application et les actions qu'elle propose. Vous pouvez accéder à la suite d'icônes Material et les ajouter directement à votre application avec Compose. Afin de créer des icônes personnalisées ou des icônes pour votre application avec des vues, Android Studio propose Image Asset Studio.

Ajouter des icônes dans votre application avec Compose

Avec Compose, vous pouvez importer la bibliothèque Compose Material ou la bibliothèque Material Compose 3 pour accéder à toutes les icônes Material. Utilisez ensuite le composable Icon pour ajouter des icônes à votre application. Les icônes Material sont particulièrement utiles pour les icônes de barre d'action, d'onglet ou de notification. Pour en savoir plus, consultez la section Icônes Material.

Si vous devez créer des icônes personnalisées, comme l'icône de lanceur d'applications, utilisez Image Asset Studio. Pour les icônes de lanceur, le fichier AndroidManifest.xml doit faire référence à l'emplacement mipmap/. Image Asset Studio ajoute ce code automatiquement. Le code de fichier manifeste suivant fait référence à l'icône ic_launcher dans le répertoire mipmap/ :

  <application android:name="ApplicationTitle"
            android:label="@string/app_label"
            android:icon="@mipmap/ic_launcher" >
  

À propos d'Image Asset Studio

Android Studio dispose d'un outil appelé Image Asset Studio, qui vous permet de générer vos propres icônes d'application à partir d'icônes Material, d'images personnalisées et de chaînes de texte. Il génère un ensemble d'icônes à la résolution adaptée pour chaque densité de pixels compatible avec votre application. Image Asset Studio place les icônes générées dans des dossiers spécifiques chaque densité sous le répertoire res/ de votre projet. Au moment de l'exécution, Android utilise la ressource adaptée à la densité de l'écran de l'appareil sur lequel votre application est exécutée.

Image Asset Studio vous permet de générer les types d'icônes suivants :

  • Icônes de lanceur
  • Icônes de barre d'action et d'onglet
  • Icônes de notification

Les sections suivantes décrivent les types d'icônes que vous pouvez créer et les entrées d'image et de texte que vous pouvez utiliser.

Icônes adaptatives et anciennes icônes de lanceur

Une icône de lanceur est un élément graphique qui représente votre application. Elle peut :

  • apparaître dans la liste des applications installées sur un appareil et sur l'écran d'accueil ;
  • représenter des raccourcis vers votre application (par exemple, une icône de raccourci permettant d'ouvrir les informations détaillées d'un contact) ;
  • être utilisée par les lanceurs d'applications ;
  • aider les utilisateurs à trouver votre application sur Google Play.

Les icônes de lanceur adaptatives peuvent s'afficher sous différentes formes en fonction de l'appareil. Elles sont disponibles sous Android 8.0 (niveau d'API 26) ou version ultérieure. Android Studio 3.0 permet de créer des icônes adaptatives à l'aide d'Image Asset Studio. L'outil génère des aperçus d'une icône adaptative en forme de cercle, de squircle, de carré aux bords arrondis et de carré. Vous pouvez également générer un aperçu à fond perdu de l'icône. Image Asset Studio génère également d'autres types d'aperçus de l'icône (anciennes, rondes et pour Google Play Store). Une icône de lanceur ancienne est un élément graphique qui représente votre application sur l'écran d'accueil d'un appareil et dans la fenêtre du lanceur. Ces icônes sont destinées à être utilisées sur les appareils équipés d'Android 7.1 (niveau d'API 25) ou version antérieure, qui ne sont pas compatibles avec les icônes adaptatives et ne s'affichent pas sous différentes formes en fonction de l'appareil.

Image Asset Studio place les icônes aux emplacements appropriés dans les répertoires res/mipmap-density/. L'outil crée également une image de 512 × 512 pixels adaptée à Google Play Store.

Nous vous recommandons d'utiliser le style Material Design pour les icônes de lanceur, même si vous utilisez d'anciennes versions d'Android.

Pour en savoir plus, consultez les sections Icônes de lanceur adaptatives et Icônes de produits - Material Design.

Icônes de barre d'action et d'onglet

Les icônes de barre d'action sont des éléments graphiques qui apparaissent dans une barre d'action et qui représentent des fonctionnalités individuelles. Pour en savoir plus, consultez les sections Ajouter et gérer des actions, Barre d'application - Material Design et Conception de barre d'action.

Les icônes d'onglet sont des éléments graphiques utilisés pour représenter des onglets dans une interface qui en comporte plusieurs. Chaque icône d'onglet a deux états : non sélectionnée et sélectionnée. Pour en savoir plus, consultez les sections Créer des vues par balayage avec des onglets et Onglets - Material Design.

Image Asset Studio place les icônes aux emplacements appropriés dans les répertoires res/drawable-density/.

Il est recommandé d'utiliser le style Material Design pour les icônes de barres d'action et d'onglets, même si vous utilisez d'anciennes versions d'Android. Utilisez appcompat et d'autres bibliothèques d'assistance pour appliquer votre UI Material Design sur les anciennes versions de la plate-forme.

Au lieu d'Image Asset Studio, vous pouvez utiliser Vector Asset Studio pour créer des icônes de barre d'action et d'onglet. Les drawables vectoriels sont adaptés aux icônes simples et peuvent réduire la taille de votre application.

Icônes de notification

Une notification est un message que vous pouvez présenter à l'utilisateur en dehors de l'UI normale de votre application. Image Asset Studio place les icônes de notification aux emplacements appropriés dans les répertoires res/drawable-density/ :

  • Les icônes pour Android 2.2 (niveau d'API 8) et versions antérieures sont placées dans les répertoires res/drawable-density/.
  • Les icônes pour Android 2.3 à 2.3.7 (niveau d'API 9 à 10) sont placées dans les répertoires res/drawable-density-v9/.
  • Les icônes pour Android 3 (niveau d'API 11) et versions ultérieures sont placées dans les répertoires res/drawable-density-v11/.

Si votre application est compatible avec Android 2.3 à 2.3.7 (niveau d'API 9 à 10), Image Asset Studio génère une version grise de votre icône. Les versions ultérieures d'Android utilisent l'icône blanche générée par Image Asset Studio.

Pour en savoir plus, consultez les sections Notifications, Notifications Material Design, Notifications, modifications pour Android 5.0, Notifications, Android 4.4 ou version antérieure et Icônes de barre d'état, Android 3.0 ou version antérieure.

Images clipart

Image Asset Studio facilite l'importation d'icônes Material de Google aux formats VectorDrawable et PNG : il suffit de sélectionner une icône dans une boîte de dialogue. Pour en savoir plus, consultez la section Icônes Material.

Images

Vous pouvez importer vos propres images et les ajuster en fonction du type d'icône. Image Asset Studio prend en charge les types de fichiers suivants : PNG (recommandé), JPG (acceptable) et GIF (déconseillé).

Chaînes de texte

Image Asset Studio vous permet de saisir du texte dans différentes polices et de l'intégrer à une icône. L'outil convertit l'icône textuelle en fichiers PNG pour différentes densités. Vous pouvez utiliser les polices installées sur votre ordinateur.

Lancer Image Asset Studio

Pour lancer Image Asset Studio, procédez comme suit :

  1. Dans la fenêtre Projet, sélectionnez l'affichage Android.
  2. Effectuez un clic droit sur le dossier res, puis sélectionnez Nouveau > Élément image.

    L&#39;assistant pour icône adaptative ou ancienne dans Image Asset Studio.

  3. Continuez en suivant les étapes suivantes :

Créer des icônes de lanceur adaptatives et anciennes

Après avoir ouvert Image Asset Studio, vous pouvez ajouter des icônes adaptatives et anciennes en procédant comme suit :

  1. Dans le champ Icon Type (Type d'icône), sélectionnez Launcher Icons (Adaptive and Legacy) (Icônes de lanceur (adaptatives et anciennes)).
  2. Dans l'onglet Foreground Layer (Calque de premier plan), sélectionnez un type d'élément, puis spécifiez-le dans le champ situé en dessous :
    • Sélectionnez Image pour spécifier le chemin d'accès d'un fichier image.
    • Sélectionnez Image clipart pour spécifier une image à partir de l'ensemble d'icônes Material Design.
    • Sélectionnez Texte pour spécifier une chaîne de texte, puis choisissez une police.
  3. Dans l'onglet Calque d'arrière-plan, sélectionnez un Type d'élément, puis spécifiez l'élément dans le champ situé en dessous. Vous pouvez choisir une couleur ou une image à utiliser comme calque d'arrière-plan.
  4. Dans l'onglet Legacy (Icône ancienne), vérifiez les paramètres par défaut et confirmez que vous souhaitez générer des icônes anciennes, rondes et adaptées à Google Play Store.
  5. Si vous le souhaitez, modifiez le nom et les paramètres d'affichage dans les onglets Calque de premier plan et Calque d'arrière-plan :
    • Nom : Si vous ne souhaitez pas utiliser le nom par défaut, saisissez-en un nouveau. Si ce nom de ressource existe déjà dans le projet, une erreur s'affiche en bas de l'assistant et le nom existant est écrasé. Le nom ne peut contenir que des caractères minuscules, des traits de soulignement et des chiffres.
    • Couper : Pour ajuster la marge entre l'élément graphique et la bordure de l'élément source, sélectionnez Oui. Cette opération supprime l'espace transparent tout en conservant le format. Pour n'apporter aucune modification à l'élément source, sélectionnez Non.
    • Couleur : Pour modifier la couleur d'une icône Image clipart ou Texte, cliquez sur le champ. Dans la boîte de dialogue Sélectionner une couleur, faites votre choix, puis cliquez sur Sélectionner. La nouvelle valeur apparaît dans le champ.
    • Redimensionner : Utilisez le curseur pour indiquer un facteur de scaling en pourcentage et redimensionner une icône Image, Image clipart ou Texte. Cette commande est désactivée pour le calque d'arrière-plan lorsque vous spécifiez un élément de type Couleur.
  6. Cliquez sur Suivant.
  7. Si vous le souhaitez, modifiez le répertoire de ressources en sélectionnant l'ensemble de sources auquel vous souhaitez ajouter l'élément image : src/main/res, src/debug/res, src/release/res ou un ensemble personnalisé. L'ensemble de sources principal s'applique à toutes les variantes de compilation, y compris celles de débogage et de publication. Les ensembles de sources de débogage et de publication remplacent l'ensemble de sources principal et s'appliquent à une seule version d'une compilation. L'ensemble de sources de débogage sert uniquement au débogage. Pour définir un nouvel ensemble de sources, sélectionnez Fichier > Structure du projet > Application > Types de compilation. Par exemple, vous pouvez définir un ensemble de sources bêta et créer une version d'une icône incluant le texte "BÊTA" en bas à droite. Pour en savoir plus, consultez la section Configurer des variantes de compilation.
  8. Cliquez sur Terminer. Image Asset Studio ajoute les images aux dossiers mipmap pour les différentes densités.

Pprévisualiser les icônes d'application à thème

Android Studio vous permet de prévisualiser l'icône de votre application à thème et de voir comment elle s'adapte à la couleur du fond d'écran de l'utilisateur. Pour ce faire, ouvrez le fichier launcher.xml qui définit votre icône, puis utilisez le sélecteur System UI Mode (Mode d'UI du système) dans la barre d'outils pour changer de fond d'écran et voir comment l'icône réagit.

Pour en savoir plus sur la création d'icônes d'application à thème, consultez la section Icônes adaptatives.

Sélecteur du mode d'UI du système

Prévisualisation des icônes d'applications à thème sur différents fonds d'écran

Créer une icône de barre d'action ou d'onglet

Après avoir ouvert Image Asset Studio, vous pouvez ajouter une icône de barre d'action ou d'onglet en procédant comme suit :

  1. Dans le champ Type d'icône, sélectionnez Icônes de barre d'action et d'onglet.
  2. Sélectionnez un Type d'élément, puis spécifiez l'élément dans le champ situé en dessous :
    • Dans le champ Image clipart, cliquez sur le bouton.
    • Dans la boîte de dialogue Select Icon (Sélectionner une icône), sélectionnez une icône Material, puis cliquez sur OK.

    • Dans le champ Chemin d'accès, spécifiez le chemin d'accès et le nom du fichier image. Cliquez sur pour utiliser une boîte de dialogue.
    • Dans le champ Texte, saisissez une chaîne de texte et sélectionnez une police.

    L'icône s'affiche dans la zone Élément source à droite ainsi que dans la zone d'aperçu en bas de l'assistant.

  3. Si vous le souhaitez, modifiez le nom et les options d'affichage :
    • Nom : Si vous ne souhaitez pas utiliser le nom par défaut, saisissez-en un nouveau. Si ce nom de ressource existe déjà dans le projet, une erreur s'affiche en bas de l'assistant et le nom existant est écrasé. Le nom ne peut contenir que des caractères minuscules, des traits de soulignement et des chiffres.
    • Couper : Pour ajuster la marge entre l'élément graphique et la bordure de l'élément source, sélectionnez Oui. Cette opération supprime l'espace transparent tout en conservant le format. Pour n'apporter aucune modification à l'élément source, sélectionnez Non.
    • Marge intérieure : Si vous souhaitez ajuster la marge intérieure des éléments source sur les quatre côtés, déplacez le curseur. Sélectionnez une valeur comprise entre - 10 % et 50 %. Si vous utilisez également l'option Couper, celle-ci est faite en priorité.
    • Thème : Sélectionnez HOLO_LIGHT ou HOLO_DARK. Autrement, si vous souhaitez spécifier une couleur dans la boîte de dialogue Select Color (Sélectionner une couleur), sélectionnez CUSTOM (PERSONNALISÉ), puis cliquez sur le champ Custom color (Couleur personnalisée).

    Image Asset Studio crée l'icône dans un carré transparent afin de créer une marge intérieure. La marge intérieure fournit suffisamment d'espace pour un effet d'ombre projetée standard.

  4. Cliquez sur Suivant.
  5. Vous pouvez également modifier le répertoire de ressources :
    • Répertoire de ressources : Sélectionnez l'ensemble de sources auquel vous souhaitez ajouter l'élément image : src/main/res, src/debug/res, src/release/res ou un ensemble défini par l'utilisateur. L'ensemble de sources principal s'applique à toutes les variantes de compilation, y compris celles de débogage et de publication. Les ensembles de sources de débogage et de publication remplacent l'ensemble de sources principal et s'appliquent à une seule version d'une compilation. L'ensemble de sources de débogage sert uniquement au débogage. Pour définir un nouvel ensemble de sources, sélectionnez File (Fichier) > Project Structure (Structure du projet) > appli > Build Types (Types de compilation). Par exemple, vous pouvez définir un ensemble de sources bêta et créer une version d'une icône incluant le texte "BÊTA" en bas à droite. Pour en savoir plus, consultez la section Configurer des variantes de compilation.

    La zone Répertoires de sortie affiche les images ainsi que les dossiers dans lesquels elles apparaîtront dans l'affichage des fichiers du projet de la fenêtre Projet.

  6. Cliquez sur Terminer.
  7. Image Asset Studio ajoute les images aux dossiers drawable pour les différentes densités.

Créer une icône de notification

Après avoir ouvert Image Asset Studio, vous pouvez ajouter une icône de notification en procédant comme suit :

  1. Dans le champ Type d'icône, sélectionnez Icônes de notification.
  2. Sélectionnez un Type d'élément, puis spécifiez l'élément dans le champ situé en dessous :
    • Dans le champ Image clipart, cliquez sur le bouton.
    • Dans la boîte de dialogue Select Icon (Sélectionner une icône), sélectionnez une icône Material, puis cliquez sur OK.

    • Dans le champ Chemin d'accès, spécifiez le chemin d'accès et le nom du fichier image. Cliquez sur pour utiliser une boîte de dialogue.
    • Dans le champ Texte, saisissez une chaîne de texte et sélectionnez une police.

    L'icône s'affiche dans la zone Élément source à droite ainsi que dans la zone d'aperçu en bas de l'assistant.

  3. Si vous le souhaitez, modifiez le nom et les options d'affichage :
    • Nom : Si vous ne souhaitez pas utiliser le nom par défaut, saisissez-en un nouveau. Si ce nom de ressource existe déjà dans le projet, une erreur s'affiche en bas de l'assistant et le nom existant est écrasé. Le nom ne peut contenir que des caractères minuscules, des traits de soulignement et des chiffres.
    • Couper : Pour ajuster la marge entre l'élément graphique et la bordure de l'élément source, sélectionnez Oui. Cette opération supprime l'espace transparent tout en conservant le format. Pour n'apporter aucune modification à l'élément source, sélectionnez Non.
    • Marge intérieure : Si vous souhaitez ajuster la marge intérieure des éléments source sur les quatre côtés, déplacez le curseur. Sélectionnez une valeur comprise entre -10 % et 50 %. Si vous utilisez également l'option Couper, celle-ci est faite en priorité.

    Image Asset Studio crée l'icône dans un carré transparent afin de créer une marge intérieure. La marge intérieure fournit suffisamment d'espace pour un effet d'ombre projetée standard.

  4. Cliquez sur Suivant.
  5. Vous pouvez également modifier le répertoire de ressources :
    • Répertoire de ressources : Sélectionnez l'ensemble de sources auquel vous souhaitez ajouter l'élément image : src/main/res, src/debug/res, src/release/res ou un ensemble défini par l'utilisateur. L'ensemble de sources principal s'applique à toutes les variantes de compilation, y compris celles de débogage et de publication. Les ensembles de sources de débogage et de publication remplacent l'ensemble de sources principal et s'appliquent à une seule version d'une compilation. L'ensemble de sources de débogage sert uniquement au débogage. Pour définir un nouvel ensemble de sources, sélectionnez File (Fichier) > Project Structure (Structure du projet) > appli > Build Types (Types de compilation). Par exemple, vous pouvez définir un ensemble de sources bêta et créer une version d'une icône incluant le texte "BÊTA" en bas à droite. Pour en savoir plus, consultez la section Configurer des variantes de compilation.

    La zone Répertoires de sortie affiche les images ainsi que les dossiers dans lesquels elles apparaîtront dans l'affichage des fichiers du projet de la fenêtre Projet.

  6. Cliquez sur Terminer.
  7. Image Asset Studio ajoute les images aux dossiers drawable pour les différentes densités et versions.

Faire référence à une ressource d'image dans le code avec les vues

Normalement, vous pouvez faire référence à une ressource d'image de manière générique dans votre code. Lorsque votre application s'exécute, l'image correspondante s'affiche automatiquement en fonction de l'appareil :

  • Dans la plupart des cas, vous pouvez faire référence aux ressources d'image à l'aide de @drawable en XML ou avec Drawable en Java.
  • Par exemple, le code XML de mise en page suivant affiche le drawable dans une ImageView :

    <ImageView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@drawable/myimage" />
    

    Le code Java suivant récupère l'image en tant que Drawable :

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)
    

    Java

    Resources res = getResources();
    Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());
    

    La méthode getResources() se trouve dans la classe Context, qui s'applique aux objets d'UI tels que les activités, les fragments, les mises en page, les vues, etc.

  • Si votre application utilise la bibliothèque Support, vous pouvez faire référence à une ressource d'image dans le code XML avec une instruction app:srcCompat. Par exemple :
  • <ImageView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:srcCompat="@drawable/myimage" />
    

Vous ne pouvez accéder aux ressources d'image qu'à partir du thread principal.

Une fois que vous disposez d'une ressource d'image dans le répertoire res/ de votre projet, vous pouvez y faire référence en code Java ou dans votre mise en page XML à l'aide de son ID de ressource. Le code Java suivant définit une ImageView pour utiliser la ressource drawable/myimage.png :

Kotlin

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

Java

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

Pour en savoir plus, consultez la section Accéder aux ressources.

Supprimer une icône d'un projet

Pour supprimer une icône d'un projet :

  1. Dans la fenêtre Projet, sélectionnez l'affichage Android.
  2. Développez le dossier res/mipmap pour une icône de lanceur ou res/drawable pour les autres types d'icônes.
  3. Recherchez un sous-dossier portant le nom de l'icône à supprimer.
  4. Ce dossier contient l'icône dans différentes densités.

  5. Sélectionnez le dossier et appuyez sur la touche Suppr.
  6. Vous pouvez également sélectionner Modifier > Supprimer. Il est également possible d'effectuer un clic droit sur le fichier et de sélectionner Supprimer.

    La boîte de dialogue Safe Delete (Suppression sécurisée) s'affiche.

  7. (Facultatif) Utilisez les options permettant de trouver les endroits où l'icône est utilisée dans le projet, puis cliquez sur OK.
  8. Android Studio supprime les fichiers du projet et du disque. Toutefois, si vous avez choisi de rechercher des emplacements où les fichiers sont utilisés dans le projet et que certaines utilisations sont détectées, vous pouvez les afficher et décider de les supprimer ou non. Vous devez supprimer ou remplacer ces références pour pouvoir compiler votre projet.

  9. Sélectionnez Build (Compiler) > Clean Project (Nettoyer le projet).
  10. Android Studio supprime tous les fichiers image générés correspondant à la ressource supprimée. Ils sont alors supprimés du projet et du disque.

  11. Si nécessaire, corrigez les erreurs restantes qui sont dues à des portions de code qui font référence à la ressource.
  12. Android Studio met en évidence ces erreurs dans votre code. Une fois que vous avez supprimé toutes ces références de votre code, vous pouvez recompiler votre projet.