Welchen Zweck erfüllt der „Android Material Design Icon Generator“?
Dieses Plugin ermöglicht dir auf einfache Weise viele verschiedene Material-Design-Icons zu erstellen und diese zu deinen Ressourcen (res/drawable) hinzuzufügen.
Die Verwendung des „Design Icon Generator“-Plugins bringt natürlich eine Reihe an Vorteilen mit sich. Du kannst dir z.B. sehr viel Zeit einsparen, da du nicht umständlich die Bilder in deine App importieren musst. Zudem wird jedes Icon, das du über das Plugin hinzufügst, für alle verfügbaren Pixeldichten erzeugt und in die verschiedenen „drawable“-Ordner eingefügt.
Wie im Screenshot unten beispielhaft zu sehen ist, wurde das Icon „ic_3d_rotation_black_24dp.png“ hinzugefügt und automatisch in die entsprechenden „drawable“-Ordner abgelegt.
Wie wird das Plugin installiert?
Um das Plugin in Android-Studio installieren zu können, musst du einfach nur die folgenden Schritte durchlaufen:
- File
- Settings
- Plugins
- Browse Repositories
- „Android Material Design Icon Generator“ in das Suchfeld ganz oben links eingeben oder in der Liste suchen
- Das Plugin in der Liste auswählen und im Abschnitt rechts daneben auf „Install“ klicken
- Android-Studio neustarten
Falls du mit den oben beschriebenen Schritten nicht klar kommen solltest, kannst du auch unsere ausführlichere Anleitung in diesem separaten Beitrag verwenden.
ACHTUNG: Die Installation des Plugins ist Voraussetzung für die weiteren Schritte dieser Anleitung!
Wie wird der Icon Generator verwendet?
Nachfolgend zeigen wir dir nun alle Schritte zur richtigen Verwendung des Plugins.
Schritt 1: „Material Icon Generator“ öffnen
Im ersten Schritt klickst du im Projekt-Fenster auf der linken Seite zunächst mit der rechten Maus-Taste auf "app" und fährst anschließend mit der Maus über den obersten Eintrag "New", so dass sich ein weiteres Kontext-Menü öffnet. In diesem Kontext-Menü klickst du nun auf den untersten Listeneintrag "Material design icon", um den "Material Icon Generator" zu öffnen. Info: Alternativ kannst du den "Material Icon Generator" auch mit der Tasten-Kombination "Strg", "Alt" und "M" öffnen, wobei du alle drei Tasten gleichzeitig drücken musst.
Schritt 2: Icon auswählen und konfigurieren
Sobald das Dialog-Fenster "Material Icon Generator" geöffnet wurde, kannst du für ein Icon folgende Einstellungen vornehmen:a) Ganz oben wählst du ein "Icon" aus einer Liste aus. Klicke dazu auf auf den Pfeil ganz rechts und wähle aus der Drop-Down-Liste eines der zahlreichen Icons aus. Diese Icons sind nach Kategorien (z.B. action, communication, image, navigation,..) und in alphabetisch aufsteigender Reihenfolge gelistet.
b) Direkt unterhalb der Icons-Liste kannst du dir dann eine "Farbe" für das Icon auswählen, wobei dir hier sehr viele Farben in einer Drop-Down-Liste zur Verfügung stehen. Es besteht zusätzlich auch die Möglichkeit eine benutzerdefinierte Farbe über einen hexadezimalen Wert (z.B. #000000 für schwarz oder #FFFFFF für weiß) rechts neben der Liste einzutragen.
c) Hier klickst du auf den Pfeil und wählst aus einer Drop-Down-Liste die "Größe" des Icons aus, wobei du hier an die vorgegebenen Größen gebunden bist und keine benutzerdefinierte Größe eingeben kannst. Es stehen dir folgende Größen zur Verfügung:
d) Hier legst du einen benutzerdefinierten "Namen" für das Icon fest, wobei du den vorgegebenen Namen auch einfach übernehmen kannst. e) Auf der rechten Seite des Konfigurations-Fensters wird dir eine "Vorschau" des Icons angezeigt. f) Hier kannst du den "Pfad zum Ressourcen-Ordner (res)" bestimmen oder den bereits ausgewählten Pfad belassen. g) Falls du das Icon als Bild (png) erzeugen möchtest, klickst du auf der linken Seite den Radio-Button bei "Image" an. Für ein Bild kannst du dann noch festlegen, für welche "Pixeldichten" das Icon erzeugt werden soll und setzt bei allen gewünschten Dichten einen Haken (standardmäßig sind alle ausgewählt). Der "Icon-Generator" erzeugt daraufhin das Icon in den von dir gewünschten Pixeldichten. Die von Android aktuell (Januar 2018) angebotenen Dichten sind folgende: -> ldpi (niedrig): 120dpi -> mdpi (mittel): 160dpi -> hdpi (hoch): 240dpi -> xhdpi (extra-hoch): 320dpi -> xxhdpi (extra-extra-hoch): 480dpi -> xxxhdpi (extra-extra-extra-hoch): 640dpi h) Wenn du das Icon als Vektor (xml) haben möchtest, dann klickst du den Radio-Button bei "Vector" an. Dann wird dir vom "Icon Generator" das Icon als XML-Datei mit einem Vektor-Tag angelegt (siehe Screenshot):
i) Sobald du das Icon fertig konfiguriert hast, klickst du am Ende auf den "OK"-Button, um das Icon mit deinen Einstellungen erzeugen zu lassen.
Schritt 3: Überprüfen, ob Icons erzeugt wurden
Bei diesem letzten Schritt überprüfen wir noch, ob die Icons auch erzeugt wurden. Klick dich zur Überprüfung durch den folgenden Pfad im Projekt-Fenster auf der linken Seite: app -> res -> drawable -> Doppelklick auf den "icon_name.png"-Ordner In unserem Beispiel wurde der Ordner "ic_3d_rotation_black_24dp.png" erstellt und das Icon in allen vorher festgelegten Pixeldichten erzeugt (hdpi, mdpi,...).
