Importer des icônes de conception matérielle dans un projet Android

143

Existe-t-il un moyen simple d'importer toutes les icônes du référentiel d'icônes Material Design dans un projet Android sans risquer de le faire manuellement?

icons material-design Ivan Aranibar
la source

Réponses:

358

Jetez un œil à Vector Asset Studio

Suivez ces étapes pour démarrer Vector Asset Studio:

  • Dans Android Studio, ouvrez un projet d'application Android.
  • Dans la fenêtre Projet, sélectionnez la vue Android.
  • Cliquez avec le bouton droit sur le dossier res et sélectionnez Nouveau> Vector Asset.

Après avoir ouvert Vector Asset Studio, vous pouvez ajouter une icône de matériau comme suit:

  • Sélectionnez "Material Icon" (en cliquant sur Clip Art: ICON)
  • Cliquez sur Choisir
  • Sélectionnez une icône de matériau
mpkuth
la source
24
Cette réponse est géniale! Non seulement vous pouvez choisir l'icône de conception matérielle qui est déjà intégrée dans Android Studio (sans aucun plug-in supplémentaire), mais vous obtiendrez également VectorDrawable et (attendez cela ...): "Si votre niveau d'API minimum est défini sur l'une de ces API niveaux, Vector Asset Studio demande également à Gradle de générer des images raster du vecteur dessinable pour une compatibilité descendante "
lenrok258
5
Vous pouvez même changer la couleur dans le fichier xml et de nouveaux png seront générés lors de la construction (dans app / build / generated / res / pngs / debug ). J'aime! :-)
lenrok258
2
Votez pour cette réponse! Dans le cas où votre icône n'apparaît pas dans sélectionnez "Icône de matériau", vous pouvez le télécharger à partir des icônes de matériau , si vous choisissez le format SVG, sélectionnez Fichier SVG local dans Vector Asset et générez le fichier xml pour l'icône. Si vous choisissez le format PNG, faites un clic droit dans res-> new Image Asset-> sélectionnez Image-> in Path: choisissez la grande image (xxxhdpi) et générez le png pour chaque densité.
noe
11
Depuis Android Studio 2.2 Preview 5, il n'y a plus de bouton "Choisir" dans Vector Asset Studio mais il faut cliquer sur la petite représentation de l'icône (sous le nom). Il m'a fallu un certain temps pour comprendre cela…
balu
2
récent vector asset studio a un type de clip art au lieu de l'icône de matériau, cliquez sur l'icône android ci-dessous pour choisir votre icône
Gigarthan
23

Vous pouvez utiliser ce nouveau plugin pour Android Studio Plugin Générateur d'icônes de conception matérielle Android pour vous aider à travailler avec ces icônes matérielles fournies par Google: Google material-design-icons

Ouss StinGray
la source
1
Je l'ai installé, mais comment l'utiliser?
gldraphael
1
@gldraphael - Une fois installé, sélectionnez "Fichier" - "Nouveau" - "Icône de conception matérielle". Sélectionnez une taille de 48dp pour vous assurer que chacun des fichiers générés a la hauteur / largeur standard de 48, 72, 96, 144 et 192 pixels. Bien sûr, sélectionnez une taille dp plus petite si nécessaire.
Martyn Davis
2
@MartynDavis merci. Je l'ai trouvé cependant. Ce que j'aime le plus, c'est le fait que je peux aussi choisir la couleur.
gldraphael
15

Le dossier drawable> right click> new> vector asset, puis cliquez sur l'icône:

Captures d'écran d'Android Studio montrant un endroit non évident où cliquer

Vallée
la source
6

Voici un script qui clone le référentiel github des icônes de conception matérielle sur

https://github.com/google/material-design-icons

et crée un index de tous les fichiers. Il copie également les fichiers svg dans des sous-répertoires par catégorie. Vous pouvez l'utiliser comme base pour copier les fichiers qui vous intéressent dans votre projet - il vous suffit de modifier l'instruction find et cp copy à votre guise. Si vous avez par exemple besoin des png à une certaine taille - ils se trouvent dans des répertoires voisins et vous devez alors modifier la commande find and copy en conséquence.

entrez la description de l'image ici

#!/bin/bash
# WF 2016-06-04
# get google material design icons
# see http://stackoverflow.com/questions/28684759/import-material-design-icons-into-an-android-project
tmp=/tmp/icons
index=$tmp/index.html
mkdir -p $tmp
cd $tmp
if [ ! -d material-design-icons ]
then
  git clone https://github.com/google/material-design-icons
fi
cat << EOF > $index
<html>
  <head>
    <head>
    <body>
      <h1>Google Material Design Icons</h1>
EOF
for icon in `find . -name *.svg | grep production | grep 48`
do
    svg=`basename $icon .svg`
    category=`echo $icon | cut -f3 -d '/'`
    echo $category $svg.svg
    mkdir -p $tmp/$category
    cp $icon $tmp/$category
    echo "    <img src='"$icon"' title='"$category $svg"' >" >> $index
done
cat << EOF >> $index
  </body>
</html>
EOF
Wolfgang Fahl
la source
1
Script doux. Comme il s'agit d'une sorte de cas d'utilisation jetable pour ce dépôt, suggérez de passer à git clone --depth = 1 pour obtenir un clone superficiel. Téléchargements un peu plus rapidement.
mbac32768
1

J'ai trouvé ce lien utile pour moi.

https://dev.materialdesignicons.com/getting-started/android

l'implémentation gradle est disponible

dependencies {
    implementation 'net.steamcrafted:materialiconlib:1.1.5'
}

Après avoir ajouté une dépendance gradle, vous pouvez créer un élément de menu de cette façon.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" <!-- important, you'll have to include this to use the custom xml attributes -->
    xmlns:tools="http://schemas.android.com/tools" >

    <!-- example of a menu item with an icon -->
    <item
        android:title="Disable Wifi"
        app:showAsAction="always"
        app:materialIcon="wifi_off" <!-- This sets the icon, HAS AUTOCOMPLETE ;) -->
        app:materialIconColor="#FE0000" <!-- Sets the icon color -->
    />

</menu>
Naveed Jamali
la source