Ihre App könnte zwar nur Text und Farbe enthalten, aber Sie können weitere visuelle Elemente hinzufügen, z. B. ein Logo oder eine Illustration. Android bietet spezielle Best Practices für das Hinzufügen von Grafiken zu deiner App sowie verschiedene Bibliotheken, mit denen du grafische Effekte oder Bewegung hinzufügen kannst.
Ein Android-Asset wird als Drawable bezeichnet. Dabei handelt es sich um einen Ressourcentyp, der auf den Bildschirm gezeichnet wird. Dazu gehören unter anderem Bitmaps, Formen und Vektoren.
Beachten Sie beim Erstellen von Bildern und Grafiken Folgendes:
- Vermeiden Sie unveränderlichen Text in Assets.
- Verwenden Sie nach Möglichkeit zuerst Vektorformate.
- Stellen Sie Assets für Auflösungsgruppen bereit.
- Achte auf ausreichend klare Linien zwischen Hintergrundbild und Text.
- Obwohl Android verschiedene Bildeffekte wie Farbverläufe, Farbverläufe und Unschärfen erzielen kann, ist die Leistung kostspieliger.
- Animierte Vektor-Drawables bieten ein skalierbares Format für kleine UI-Animationen.
Assets für Android exportieren
- Formatieren Sie Asset-Namen in Kleinbuchstaben.
- Legen Sie vereinfachte Assets für den Export als SVG fest.
- Sie können komplexe Bilder wie Fotos als WebP-, PNG- oder JPG-Datei exportieren.
- Stellen Sie die korrekte Skalierung der Auflösung ein, wie in der folgenden Tabelle gezeigt.
| Displaygröße | Skalieren |
|---|---|
mdpi |
1-mal |
HDPI |
das 1,5-Fache |
xhdpi |
2-mal |
xxhdpi |
x3 |
xxhdpi |
x4 |
Optional können Sie SVGs mit Android Studio in Vector Drawables (VD) konvertieren. Organisieren Sie die Assets in Verzeichnissen, die der Auflösung für die Übergabe entsprechen, wie in der folgenden Abbildung gezeigt. Geben Sie beispielsweise in Ordnernamen die Bildschirmgröße an.
Asset-Typen
Android unterstützt die folgenden Asset-Typen.
Vektor
Eine Vektorgrafik ist ein verlustfreies Format. Das bedeutet, dass bei der Skalierung keine visuellen Informationen verloren gehen. Vektoren bestehen aus mathematischen Punkten, die gefüllt werden, um ein Bild zu erstellen.
Vektorformate
Android unterstützt die folgenden Vektorbildformate: SVGs und Vector Drawables.
Vector Drawables sehen ähnlich aus wie SVGs, sind jedoch XML-basiert. Sie unterstützen auch verschiedene
Attribute wie Farbverläufe. Weitere Informationen dazu, was unterstützt wird, findest du unter VectorDrawable. Über Vector Asset Studio können Sie SVGs in Vector Drawables konvertieren.
Anwendungsfälle
Aufgrund ihrer geringen Größe empfiehlt es sich, Symbole im Vektorformat zu erstellen. Mit einem animierten Vektor-Drawable kann einem Symbol Bewegung hinzugefügt werden.
- Illustrationen sind Grafiken, die dazu beitragen, Nutzer zu führen, Konzepte zu erklären oder Ideen auszudrücken. Sie repräsentieren in der Regel den Markenstil.
- Hero-Illustrationen werden von den übrigen Inhalten stark betont und dienen dazu, das allgemeine Erscheinungsbild festzulegen und primäre Informationen zu erklären.
- Spot-Illustrationen sind kleiner, in der Regel inline und unterstützen den umgebenden Inhalt.
Rastern
Eine verlustbehaftete Grafik oder eine Grafik, die bei Komprimierung oder Skalierung Details verliert, besteht aus Pixeln, die das Bild bilden. Rastergrafiken werden häufig für detaillierte Bilder wie Fotos oder komplexe Farbverläufe verwendet. Da die Bilder beim Skalieren Details verlieren, sollten Sie sie in mehreren Auflösungen exportieren.
Rasterformate
Android unterstützt die folgenden Rasterbildformate: PNG, GIF, JPG und WebP.
Anwendungsfälle
Anwendungsfälle umfassen Bilder mit einer Vielzahl von Texturen, die zu einer breiten Farbpalette und Abstufung führen, oder Bilder mit einem übermäßig komplexen Satz von Bézierpunkten. Anwendungsfälle können auch sehr detaillierte Foto-Assets wie Produktfotos oder Standortdetails umfassen.
Größen
Beachten Sie beim Erstellen von Assets die folgenden Aspekte.
Lösungs-Buckets
Ihre App sollte Bitmapgrafiken basierend auf Bildschirmdichtebereichen oder Buckets bereitstellen. Das Betriebssystem zeigt mithilfe dieser Buckets automatisch die richtige Grafik auf dem betreffenden Gerät an. Stellen Sie für jeden Bucket Assets bereit, damit High-Fidelity-Grafiken auf jedem Gerät angezeigt werden.
Padding
Symbole und ähnliche kleine Assets sollten einen integrierten (integrierten) Abstand haben, damit das Asset genügend Platz für den Berührungszielbereich hat und eine einheitliche Größe gewährleistet.
Dateinamen
Android-Assets werden kleingeschrieben und haben kein Auflösungssuffix.
Halten Sie eine einheitliche Namenskonvention und Struktur ein, um Ihre Dateien und Projekte zu organisieren. Wenn Sie beispielsweise Symbole mit dem Präfix „ic_...“ benennen, können Sie alle Symbole in Ihrem Projekt organisieren und Symbole während der Entwicklung schnell identifizieren.
Andere App-Assets
App-Symbole
Launcher-Symbole befinden sich auf dem Startbildschirm. Auf der System-UI finden Sie einfarbige Symbole, darunter einfarbige Benachrichtigungen, Statusleiste und Widgets.
Formatiere App-Symbole als Vektor-Drawables für adaptive Symbole und PNG für ältere Symbole. Weitere Informationen zum Erstellen und Anzeigen von App-Symbolen finden Sie unter App-Symbole entwerfen und in der Vorschau ansehen.
Ladebildschirme
Ab Android 12 kann in Ihrer App beim Öffnen ein animierter Ladebildschirm mit dem App-Symbol angezeigt werden.
Placement
Bilder sollten auf dem Bildschirm skaliert und positioniert werden. Um die Skalierung eines Bildes festzulegen, stehen die Optionen Fit, Zuschneiden, Füllhöhe, FillWidth, FillBounds, Inside und Keine zur Verfügung.
Sie können Bilder auch auf eine Form zuschneiden, um zusätzliche Effekte zu erzeugen.
Responsives Zuschneiden
Wenn Sie möchten, dass Bilder responsiv angezeigt werden, legen Sie fest, wie ein Bild in verschiedenen Haltepunkten zugeschnitten werden soll. In verschiedenen Haltepunktbereichen kann das Zuschneiden:
- Verwenden Sie ein festes Verhältnis.
- Verschiedene Seitenverhältnisse anpassen
- Verwenden Sie eine feste Bildhöhe.
Ein Verhältnis beibehalten
Die Bildgröße kann über alle Haltepunktbereiche hinweg ein festes Verhältnis beibehalten.
An verschiedene Seitenverhältnisse anpassen
Die Seitenverhältnisse können sich ändern, wenn sie an verschiedene Haltepunktbereiche angepasst werden. In Abbildung 9 ändert sich beispielsweise das Bildverhältnis zwischen den Haltepunkten von 1:1 zu 16:9.
Feste Bildhöhen
Durch die Anpassung der Bildgröße kann eine feste Höhe und eine flexible Breite über die Haltepunkte hinweg und innerhalb dieser Bereiche beibehalten werden. Das Bild behält eine feste Höhe bei, während die Breite zwischen den Haltepunkten fließend ist.
Effekte
Android bietet verschiedene integrierte Bildeffekte. Hier einige häufige Auswirkungen:
Farbverläufe
Zeichnen Sie unter „Schreiben“ mit dem Pinsel etwas auf dem Bildschirm. Verschiedene Pinsel können verwendet werden, um Formen mit verschiedenen Farben oder Farbverläufen zu zeichnen. Mit den integrierten Farbverlaufpinseln können Sie verschiedene Farbverlaufseffekte erzielen. Mit diesen Pinseln können Sie die Liste der Farben angeben, aus der Sie einen Farbverlauf erstellen möchten.
Für Farbverlauf-Pinsel können erweiterte Farbverläufe hinzugefügt werden, indem Farbstopps und Kacheln hinzugefügt werden, solange Sie eine Liste mit Farben und Prozentsätzen für die jeweilige Haltestelle angeben. Verwenden Sie Container oder Formen, um Farbverläufe, Füllfarben oder Bilder zuzuschneiden.
Unkenntlich machen
Wenden Sie mit der Methode Modifier.blur() Unkenntlichmachungseffekte auf Bilder an und geben Sie die Unkenntlichmachungsverhältnisse an. Sei vorsichtig, da sie sich auf die Leistung auswirken können und nur auf Geräten mit Android 12 und höher verfügbar sind. Weitere Informationen finden Sie unter Zusammensetzbare Bilder unkenntlich machen.
Mischmodi
Android ist in der Lage, Bilder durch ähnliche boolesche Operationen und Mischmodi zu ändern, die Sie in Designsoftware finden können, z. B. „Union“ oder „Multiplizieren“. Weitere Informationen finden Sie unter BlendMode.
Färbung
Mit Mischmodi und Füllungen lassen sich Assets färben. Auf diese Weise können Sie für ein einzelnes Asset verschiedene Farben verwenden, wodurch sich die Anzahl der erstellten Assets verringern kann.
Bewegung
Grafiken können programmatisch animiert werden, um animierte Grafiken zu erstellen, anstatt Bewegungsdateien hochzuladen. Dies ermöglicht mehr Flexibilität und kleinere Asset-Ressourcen.
Mit animierten Vector Drawables können Sie kleine UI-Animationen erstellen. Andernfalls erfahren Sie unter Schreiben mehr über Animationen mit Keyframes. Weitere Informationen zu Bildeffekten finden Sie unter Bild anpassen.