Créer des icônes d'application (Vues)

Implémentation de Jetpack Compose

Cette page fournit des informations sur la création et l'utilisation d'icônes d'application spécifiques aux mises en page basées sur des vues. Pour obtenir des informations plus complètes sur la création d'icônes d'application, consultez Créer des icônes d'application, qui couvre notre framework d'UI recommandé.

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

Utilisez Image Asset Studio pour créer des icônes de barre d'action et d'onglet pour les mises en page basées sur des vues.

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 Actions, Barre d'application - Material Design {:.external} 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 res/drawable-<density>/ répertoires.

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.

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 ci-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 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 le composant 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) > app (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 Fichiers du projet de la fenêtre Projet.

  6. Cliquez sur Terminer.

    Image Asset Studio ajoute les images aux dossiers drawable pour les différentes densités.

Faire référence à une ressource d'image dans du code

Vous pouvez normalement 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 Drawable en Java.

    Par exemple, le code XML de mise en page suivant affiche le drawable dans un 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. 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 un ImageView pour utiliser la drawable/myimage.png ressource :

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 de votre application.