1. Einführung
Zuletzt aktualisiert: 08.04.22
Ab Android 13 können Nutzer das Design ihrer adaptiven Launcher-Symbole anpassen. Mit dieser Funktion werden App-Symbole in unterstützten Android-Launchern so eingefärbt, dass sie die Farben des vom Nutzer ausgewählten Hintergrundbilds und anderer Designs übernehmen.
Erstellen Sie ganz einfach alle System-Assets, die für Ihre Android-App erforderlich sind, einschließlich der neuen adaptiven Farbsymbole.
Lerninhalte
- Grundkenntnisse zu den verschiedenen Arten von App-Symbolen und Tipps für das Design.
- So verwenden Sie die Figma-Vorlage für den Android-Launcher.
- Asset-Generator in Android Studio verwenden
- So sehen Sie sich eine Vorschau Ihres App-Symbols mit dem Android Studio-Emulator an.
Vorbereitung
- Grundlegende Kenntnisse von Figma
- Optional: App-Symbolgrafiken (Vordergrund, Hintergrund und monochrom)
Voraussetzungen
- Ein Figma-Konto
- A Figma Designlab-Datei
- Optional: Ein PC mit installiertem Android Studio
2. Jetzt starten
Einrichtung
Als Erstes müssen Sie auf die Figma-Datei für das Android-App-Symbol zugreifen.
Melden Sie sich zuerst in Figma an oder erstellen Sie ein Konto.
Duplikat aus der Figma-Community
Rufen Sie die Datei Android Launcher-Vorlage auf oder suchen Sie in der Figma Community nach „Migrating to Variable fonts“ (Auf variable Schriftarten umstellen). Klicken Sie rechts oben auf Kopie erstellen, um die Datei in Ihre Dateien zu kopieren.
Vorlage verwenden
Die Android-Symbolvorlage besteht aus zwei Seiten:
- Auf der Titelseite werden relevante Konzepte und die Verwendung der Vorlage kurz erläutert.
- Die Vorlagenseite enthält alles, was Sie zum Erstellen der erforderlichen Assets benötigen, unterteilt in drei Frames („Farbe“, „Form“, „Play Store“).
Hinweis:Im linken Ebenenbereich sind die meisten Ebenen und Gruppen gesperrt. Diese sollten gesperrt bleiben. Sie können dann Grafiken in den entsperrten Grafikgruppen platzieren.
Bevor wir mit der Erstellung von Assets beginnen, sehen wir uns an, was wir erstellen werden.
3. Android-Systemsymbole
Launcher-Symbole
Launcher-Symbole oder App-Symbole sind ein wichtiger Bestandteil des Starts Ihrer App. Sie werden auf dem Startbildschirm als Einstiegspunkt in Ihre App angezeigt.
Automatische Formanpassung
Ein adaptives Symbol AdaptiveIconDrawable kann je nach den Funktionen des jeweiligen Geräts und dem vom Nutzer gewählten Design unterschiedlich dargestellt werden. Adaptive Symbole werden hauptsächlich vom Launcher auf dem Startbildschirm verwendet, können aber auch in Verknüpfungen, in der App „Einstellungen“, in Dialogfeldern zum Teilen und auf dem Übersichtsbildschirm genutzt werden.
Ein adaptives Symbol kann auf verschiedenen Gerätemodellen in unterschiedlichen Formen dargestellt werden. Beispielsweise lässt sich ein adaptives Launcher-Symbol je nach OEM-Gerät entweder als Kreis oder als abgerundetes Quadrat darstellen. Jeder Geräte-OEM muss eine Maske bereitstellen, die vom System verwendet wird, um alle adaptiven Symbole mit derselben Form zu rendern.
Durch die Anpassung an die Form kann das System auch verschiedene Animationseffekte bei Nutzerinteraktionen anwenden.
Adaptive Farbe
Adaptive Symbole können jetzt dynamische Farben verwenden, um personalisierte Symboldesigns zu ermöglichen.
Wenn ein Nutzer Symboldesigns aktiviert hat (d. h. in den Systemeinstellungen den Schalter „Symboldesigns“ aktiviert hat) und der Launcher diese Funktion unterstützt, verwendet das System die Farben des vom Nutzer ausgewählten Hintergrundbilds und Designs, um die Farbgebung zu bestimmen.
Ähnlich wie bei Symbolen, die sich an die Form anpassen, bestehen adaptive Farbsymbole aus einem Vorder- und einem Hintergrund. Es muss nur ein monochromes Vordergrundsymbol-Asset bereitgestellt werden. Das System kümmert sich um den Hintergrund und die Farbe, indem es das extrahierte Farbschema verwendet.
Sie können auch dasselbe monochrome Symbol für ein Benachrichtigungssymbol verwenden.
Legacy
Legacy-Symbole sollten enthalten sein, um Geräte mit älteren Android-Versionen oder Geräte, die keine adaptiven Funktionen unterstützen (vor Version 8.0), zu unterstützen.
Sie haben keine Vorder- und Hintergrundressourcen und können eine beliebige Form haben. Wenn Sie die bereitgestellte Vorlage verwenden, wird das endgültige adaptive Symbol in den erforderlichen Größen für Ihr Legacy-Symbol exportiert.
Benachrichtigungssymbole
Eine Benachrichtigung ist eine Meldung, die Android außerhalb der Benutzeroberfläche Ihrer App anzeigt. Darin zu finden sind Erinnerungen, Nachrichten von anderen Personen oder andere aktuelle Informationen aus Ihrer App. Das System zeigt Benachrichtigungen an verschiedenen Stellen und in unterschiedlichen Formaten an, z. B. als Symbol auf der Statusleiste, als etwas detaillierterer Eintrag auf der Benachrichtigungsleiste, als Kennzeichen auf dem App-Symbol und automatisch auf gekoppelten Wearables.
Store-Artwork
Mit einer Vorstellungsgrafik, Screenshots, einer Kurzbeschreibung und Videos haben Sie die Möglichkeit, Ihre App bei Google Play und anderen Google-Werbekanälen hervorzuheben und zu bewerben.
Es ersetzt nicht das Launcher-Symbol Ihrer App, sondern sollte eine Version in besserer Qualität und mit höherer Auflösung sein.
Ähnlich wie beim Launcher-Symbol kann das Artwork den gesamten Asset-Bereich einnehmen oder Sie können Artwork-Elemente wie Logos entwerfen und im Keyline-Raster positionieren.
Sie müssen ein quadratisches App-Symbol mit einer Größe von 512 × 512 Pixeln angeben, damit Ihr Store-Eintrag veröffentlicht werden kann. Wenn Sie die Android-App-Symbolvorlage verwenden, wird sie beim Export mit der Grafik für das adaptive Symbol bereitgestellt.
4. Best Practices für das Design
Über Launcher-Symbole wird Ihre App für den Nutzer gestartet. Als Einstiegspunkt in Ihre App müssen sie erkennbar und lesbar sein. Im Folgenden finden Sie einige Best Practices, um diese Eigenschaften in Ihrem Launcher-Symbol zu gewährleisten.
Einfache Grafiken Vermeiden Sie mehrere Ebenen, viele Effekte und Text. Diese Details gehen bei kleinen Größen verloren oder sind schwer zu erkennen. 
Vermeiden Sie komplexe Formen. Dazu gehören auch Logos. Verwenden Sie nach Möglichkeit ein vereinfachtes Logo oder Symbole, die Ihre Nutzer mit Ihrer App in Verbindung bringen. Eine lesbare und unverwechselbare Form trägt dazu bei, dass Nutzer Ihre App in verschiedenen Kontexten (adaptive Farbe und Benachrichtigung) leicht erkennen können. 
Raster verwenden: Verwende ein Raster oder Keylines, damit das Vordergrundmotiv auch nach dem Zuschneiden gut aussieht. Das gilt auch für Illustrationen mit Anschnitt. 
Kontrast berücksichtigen: Achten Sie bei adaptiven und Legacy-Symbolen darauf, dass Vorder- und Hintergrund des Symbols einen gut lesbaren Kontrast aufweisen. Vermeiden Sie starke Schlagschatten, die mit dem Systemschatten verwechselt werden können. 
Artwork innerhalb der sicheren Bereiche platzieren: Vordergrund-Assets sollten eine Größe von 72 × 72 Pixel nicht überschreiten, es sei denn, Sie verwenden ein randloses Bild. Hintergründe sollten 108 × 108 Pixel groß sein. Hinweis : Der Rahmen für das Symbol-Artwork in der Vorlage ist größer als 72 × 72 px, damit Sie das Symbol-Artwork erstellen können. Die Größe der Assets wird entsprechend den Spezifikationen angepasst.
Vektorformat: Verwenden Sie möglichst Grafiken im Vektorformat (z. B. SVG-, AI-, PDF- und EPS-Dateien) anstelle von Rasterformaten (z. B. PNG-, JPG- und GIF-Dateien). So ist sichergestellt, dass Ihre Grafiken mit neueren Funktionen kompatibel und einfacher zu bearbeiten sind. 
5. Adaptive Farben und Benachrichtigungssymbole
Jetzt sind Sie an der Reihe, eigene Android-Systemsymbole zu erstellen.
- Suchen Sie nach der Figma-Datei für Android-App-Symbole.
- Suchen Sie in der Datei nach dem Frame Adaptive color (Adaptive Farbe). Suchen Sie im linken Ebenenbereich nach „Adaptive color“ > „Components“ > „art“ > „Icon artwork area“ > Themed Icon art < add your icon. Wenn Sie ein monochromatisches Symbol haben, kopieren Sie es hier, um das Beispielsymbol „Bugdroid“ zu ersetzen, und fahren Sie mit Schritt 6 fort.
- Wenn Sie kein monochromatisches Symbol haben, beginnen Sie mit einem Logo oder Symbol, das mit Ihrer App in Verbindung steht. Folgen Sie den Design-Tipps, um Ihr Symbol zu aktualisieren. Zuerst sollten Sie komplexe Formen vermeiden und die Dinge vereinfachen. Hier sehen Sie beispielsweise vereinfachte Illustrationen, die in der App verwendet werden, mit weniger komplexen Blattformen. Schatten und Liniendetails werden mit Leerräumen simuliert.
- Aktualisieren Sie nun die Größen mithilfe des Keyline-Rasters. Hier haben wir die Größenanpassung auf Skalieren festgelegt und darauf geachtet, dass sich das Artwork im sicheren Bereich für den Vordergrund befindet. Die Vorlage ist mit dem Artwork in 4-facher Größe eingerichtet und wird beim Export automatisch angepasst. So können Sie Ihre Symbole in einem größeren Maßstab entwerfen.
- Die Datei ist für die Verwendung mit dem Material Theme Builder eingerichtet, um dynamische Farben in der Vorschau anzeigen zu lassen. Verbinden Sie den Stil für die Vordergrundsymbolfarbe mit On-surface-variant.
- Wenn Sie den Material Theme Builder jetzt über das Plugin-Steuerfeld öffnen, können Sie entweder die Quellfarbe mischen oder ein Bild hinzufügen,um die Farben mit der extrahierten Quellfarbe zu aktualisieren.
- Wie sieht das bei verschiedenen Auflösungen oder auf einem Startbildschirm aus? Die Vorlage ist so eingerichtet, dass Grafiken, die in den Grafikrahmen platziert werden, in den verschiedenen Vorschaukontexten angezeigt werden.
- Das System verwendet das einfarbige Symbol als Benachrichtigung und zeigt es in den Vorschauen an.
6. Automatische Formanpassung und Legacy-Symbole
Nun erstellen wir das adaptive Symbol und die Legacy-Symbole, um eine breite Unterstützung des Symbols zu gewährleisten.
- Suchen Sie in der Datei nach dem Shape frame (Formrahmen). Suchen Sie im linken Bereich „Ebenen“ nach Symbolhintergrund < Symbol hinzufügen*. Wenn Sie ein Symbol haben, kopieren Sie es hier, um das Beispielsymbol „Bugdroid“ zu ersetzen, und fahren Sie mit Schritt 5 fort.* Wenn Sie kein Symbol haben, verwenden Sie ein Logo oder Symbol, das mit Ihrer App in Verbindung steht, oder verwenden Sie das monochrome Symbol noch einmal.
- Aktualisieren Sie das Symbol im Vordergrund und beachten Sie dabei die Best Practices für Symbole. Hier habe ich die Originalfarben der Illustration wiederhergestellt, aber die Details auf ein Minimum reduziert.
- Aktualisieren Sie nun die Größen mithilfe des Keyline-Rasters. Hier haben wir die Größenanpassung auf Skalieren festgelegt und darauf geachtet, dass sich das Artwork im sicheren Bereich für den Vordergrund befindet.
- App-Symbole mit adaptiver Form können auch einen eigenen Hintergrund haben. So können die Ebenen des Symbols sicher zugeschnitten werden und bei der Interaktion subtile Bewegungseffekte erzielen. Sie können auch einen einfarbigen Hintergrund in Android Studio verwenden und definieren.
- Die Vorschauen werden aktualisiert und zeigen, wie Vorder- und Hintergründe zusammen auf dem Startbildschirm, in verschiedenen zugeschnittenen Formen und als Legacy-Symbol aussehen.
Die Form, die zum Zuschneiden verwendet wird, kann in der Vorschau auf dem Startbildschirm aktualisiert werden. Wählen Sie dazu die Symbole aus und ändern Sie die Option für die Formvariante. 
7. Wird exportiert
Super! Sie haben die Vorlage jetzt mit Ihren App-Symbolen aktualisiert. Lass uns sie für die Implementierung exportieren.
- Achten Sie darauf, dass auf dem Canvas nichts ausgewählt ist.
- Klicken Sie auf das Figma-Menü > „Datei“ > Exportieren (Umschalt + Cmd + E).
- Bestätigen Sie den Export im Exportmenü. Dadurch werden die Assets aus der Vorlage heruntergeladen.
Was ist im Export enthalten?
Die exportierten Assets enthalten alle erforderlichen Dateien zum Implementieren Ihres App-Symbols:
- Figma exportiert das monochrome Vordergrundsymbol für adaptive Farben als SVG-Datei sowie Vorder- und Hintergrund für Symbole mit adaptiver Form.
- Figma bietet auch Legacy-Symbole in verschiedenen Mipmap-Verzeichnissen, die nach Auflösung organisiert sind.
Geschafft! Dein Symbol kann jetzt an das Entwicklungsteam gesendet werden.
Wenn Sie eine Vorschau Ihrer Symbole in Android Studio aufrufen und die SVG-Dateien in das endgültige Asset-Format konvertieren möchten, fahren Sie mit dem nächsten Schritt fort.
8. Image Asset Studio verwenden
Erste Schritte mit Android Studio
- Laden Sie Android Studio herunter und installieren Sie es.
- Starten Sie Android Studio.
Android Studio bietet Ihnen Optionen zum Starten eines neuen Projekts oder zum Auswählen vorhandener Projekte.
- Wählen Sie vorerst ein neues Projekt aus. Auf den folgenden Bildschirmen werden Sie durch die Einrichtung Ihres neuen Projekts geführt.
- Wählen Sie eine beliebige Vorlage aus den Startvorlagen aus, da wir uns nur die Startsymbole ansehen.
- Geben Sie dann einen Namen für Ihr neues Projekt ein und wählen Sie Fertigstellen aus. Das Erstellen des neuen Projekts dauert einige Momente.
Image Asset Studio verwenden
Jetzt können wir Ihre Symbole mit dem praktischen Tool „Asset Studio“ dem Projekt hinzufügen.
- Um auf dieses Tool zuzugreifen, wählen Sie Datei > Neu > Bild-Asset aus.
- Wenn Image Asset Studio geöffnet wird, fügen Sie die Vordergrundebene hinzu, indem Sie in Pfad das Ordnersymbol auswählen. Wählen Sie die exportierte SVG-Datei als drawable-anydpi/ic_launcher.svg aus.
- Wählen Sie den Tab Background Layer (Hintergrundebene) aus und wählen Sie die exportierte Hintergrundebene aus. Alternativ können Sie „Asset-Typ: Farbe“ auswählen, um einen einfarbigen Launcher-Hintergrund zu verwenden.
- Kehren Sie zur Vordergrundebene zurück und prüfen Sie noch einmal, ob sich das Bild im sicheren Bereich befindet. Passen Sie die Größe des Symbols so an, dass es optisch am besten wirkt.
- Klicken Sie dann auf Weiter. Sie werden nun gefragt, wo die Symbole in Ihrem Projekt platziert werden sollen. Lassen Sie die Standardeinstellung bei oder wechseln Sie zu „Main“. Klicken Sie dann auf Fertigstellen. Sie finden Ihre Launcher-Assets unter res > drawable. Wenn Sie doppelt klicken, wird eine Vorschau der endgültigen Vektor-Drawables geöffnet.
- Kopieren Sie das monochrome Ebenen-Asset manuell in res/drawable oder res/drawable-v24 oder importieren Sie die monochrome Ebene manuell, indem Sie mit der rechten Maustaste auf den Ordner res klicken und Neu > Vektor-Asset auswählen.
- Fügen Sie in res/mipmap-anydpi-v26/ic_launcher.xml und res/mipmap-anydpi-v26/ic_launcher_round.xml das vorhandene android:monochrome="path/to/monochrome/asset hinzu oder ändern Sie es, damit es auf das richtige monochrome Asset verweist.
9. Vorschau und Ressourcen
Vorschau im Emulator
Wir haben das getan, um sie dem App-Projekt hinzuzufügen, damit wir eine Vorschau auf einem echten Gerät oder Emulator sehen können. Sehen wir uns an, wie unsere Symbole in der Realität aussehen.
Standardmäßig sollte ein Emulator eingerichtet sein. Falls nicht, erstellen Sie ein virtuelles Android-Gerät. Klicken Sie auf die grüne Wiedergabeschaltfläche. Dadurch wird das Projekt erstellt und der Emulator geöffnet.
Finalisierte Assets
Sie haben jetzt gesehen, wie Ihr Launcher-Symbol auf einem Gerät aussieht, und es einem App-Projekt hinzugefügt. Dadurch wurden sie in ihre endgültige Produktionsform umgewandelt. Aber wo sind sie?
Assets sind Ressourcen einer Android-App. Sie können gefunden werden, indem Sie das Ressourcen-Panel öffnen (normalerweise auf der linken Seite). Rufen Sie die App auf und suchen Sie nach dem Ordner Res. Klicken Sie mit der rechten Maustaste, um ein Menü zu öffnen, und wählen Sie Im Finder öffnen (auf dem Mac) aus. Dadurch wird ein Finder-Fenster geöffnet. Optional können Sie Entwicklungs- und QA-Zeit sparen, indem Sie die restlichen Assets Ihrer App mit einem ähnlichen Verfahren konvertieren und testen. Wenn Sie die restlichen Assets Ihrer App konvertiert haben, kann dieser Ordner für die Entwicklung freigegeben werden.
10. Glückwunsch
Sie haben die für die Entwicklung einer Android-App erforderlichen Android-Systemsymbole kennengelernt, eigene Symbole entworfen, die Symbolvorlagenressource erkundet und möglicherweise sogar Assets in Android Studio für die Produktion in der Vorschau angesehen und konvertiert.
Wenn Sie Fragen haben, können Sie uns jederzeit über @MaterialDesign auf Twitter kontaktieren.
Weitere Designinhalte und Tutorials findest du auf youtube.com/MaterialDesign.