Importieren Sie Materialdesign-Symbole in ein Android-Projekt

143

Gibt es eine einfache Möglichkeit, alle Symbole des Material Design-Symbol-Repositorys in ein Android-Projekt zu importieren, ohne dass die Gefahr besteht, dass dies manuell erfolgt?

icons material-design Ivan Aranibar
quelle

Antworten:

357

Schauen Sie sich Vector Asset Studio an

Führen Sie die folgenden Schritte aus, um Vector Asset Studio zu starten:

  • Öffnen Sie in Android Studio ein Android-App-Projekt.
  • Wählen Sie im Projektfenster die Android-Ansicht aus.
  • Klicken Sie mit der rechten Maustaste auf den Ordner res und wählen Sie Neu> Vektor-Asset.

Nachdem Sie Vector Asset Studio geöffnet haben, können Sie ein Materialsymbol wie folgt hinzufügen:

  • Wählen Sie "Material Icon" (durch Klicken auf die ClipArt: ICON)
  • Klicken Sie auf Auswählen
  • Wählen Sie ein Materialsymbol
mpkuth
quelle
24
Diese Antwort ist fantastisch! Sie können nicht nur das Materialdesign-Symbol auswählen, das bereits in Android Studio enthalten ist (ohne zusätzliche Plugins), sondern Sie erhalten auch VectorDrawable und (warten Sie ...): "Wenn Ihre Mindest-API-Stufe auf eine dieser APIs festgelegt ist Vector Asset Studio weist Gradle außerdem an, Rasterbilder des Vektors zu erstellen, die aus Gründen der Abwärtskompatibilität
gezeichnet werden können
5
Sie können sogar die Farbe in der XML-Datei ändern und neue PNGs werden während des Builds generiert (in app / build / generate / res / pngs / debug ). Gefällt mir! :-)
lenrok258
2
Upvote für diese Antwort! Falls Ihr Symbol nicht in der Auswahl "Materialsymbol" angezeigt wird, können Sie es von den Materialsymbolen herunterladen. Wenn Sie das SVG-Format auswählen, wählen Sie Lokale SVG-Datei in Vector Asset und generieren Sie die XML-Datei für das Symbol. Wenn Sie das PNG-Format wählen, klicken Sie mit der rechten Maustaste auf res-> new Image Asset-> wählen Sie Image-> in Path: Wählen Sie das große Bild (xxxhdpi) und generieren Sie das PNG für jede Dichte.
Noe
11
Ab Android Studio 2.2 Preview 5 gibt es im Vector Asset Studio keine Schaltfläche "Auswählen" mehr, sondern Sie müssen auf die kleine Darstellung des Symbols (unter dem Namen) klicken. Ich habe eine Weile
gebraucht
2
Das aktuelle Vektor-Asset-Studio hat einen ClipArt-Typ anstelle eines Material-Symbols. Klicken Sie dort auf das Android-Symbol, um Ihr Symbol auszuwählen.
Gigarthan
23

Sie können dieses neue Plugin für Android Studio Android Material Design Icon Generator Plugin verwenden , um mit diesen von Google bereitgestellten Materialsymbolen zu arbeiten : Google Material-Design-Symbole

Ouss StinGray
quelle
1
Ich habe es installiert, aber wie verwende ich es?
Gldraphael
1
@gldraphael - Nach der Installation wählen Sie "Datei" - "Neu" - "Materialdesign-Symbol". Wählen Sie eine Größe von 48 dp, um sicherzustellen, dass jede der generierten Dateien die Standardhöhe / -breite von 48, 72, 96, 144 und 192 Pixel hat. Natürlich wählen Sie bei Bedarf eine kleinere dp-Größe.
Martyn Davis
2
@ MartinDavis danke. Ich habe es aber gefunden. Was mir am besten gefällt, ist die Tatsache, dass ich auch die Farbe wählen kann.
Gldraphael
15

Auf Ordner drawable> right click> new> vector assetund klicken Sie auf das Symbol:

Screenshots von Android Studio zeigen nicht offensichtliche Stellen, an denen geklickt werden muss

Tal
quelle
6

Hier ist ein Skript, das das Github-Repository der Materialdesign-Symbole unter klont

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

und erstellt einen Index aller Dateien. Außerdem werden die SVG-Dateien nach Kategorien in Unterverzeichnisse kopiert. Sie können dies als Grundlage verwenden, um die Dateien, an denen Sie interessiert sind, in Ihr Projekt zu kopieren. Ändern Sie einfach die Anweisung find und cp copy nach Ihren Wünschen. Wenn Sie beispielsweise die PNGs in einer bestimmten Größe benötigen, befinden sie sich in benachbarten Verzeichnissen, und Sie müssen den Befehl zum Suchen und Kopieren entsprechend ändern.

Geben Sie hier die Bildbeschreibung ein

#!/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
quelle
1
Süßes Drehbuch. Da dies eine Art Wegwerf-Anwendungsfall für dieses Repo ist, schlagen Sie vor, zu git clone --depth = 1 zu wechseln, um einen flachen Klon zu erhalten. Downloads etwas schneller.
mbac32768
1

Ich fand diesen Link hilfreich für mich.

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

Gradle-Implementierung ist verfügbar

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

Nach dem Hinzufügen der Gradle-Abhängigkeit können Sie auf diese Weise ein Menüelement erstellen.

<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
quelle