Ihre App kann zwar nur Text und Farbe enthalten, aber Sie können auch weitere visuelle Elemente wie ein Logo oder eine Illustration hinzufügen. Für das Hinzufügen von Grafiken zu Ihrer App gibt es bestimmte Best Practices für Android sowie verschiedene Bibliotheken zum Erstellen von Grafikeffekten oder zum Hinzufügen von Bewegung.
Ein Android-Asset wird als Drawable bezeichnet, eine Art von Ressource, die auf dem Bildschirm dargestellt wird. Dazu gehören unter anderem Bitmaps, Formen und Vektoren.
Beachten Sie beim Erstellen von Bildern und Grafiken Folgendes:
- Vermeiden Sie es, unveränderlichen Text in Assets einzufügen.
- Verwenden Sie nach Möglichkeit zuerst Vektorformate.
- Stellen Sie Assets für die Auflösungs-Buckets bereit.
- Sorgen Sie für ausreichend Scrim zwischen Hintergrundbildern und Text.
- Android kann zwar verschiedene Bildeffekte wie Verläufe, Kolorierung und Unschärfe erzielen, einige sind jedoch leistungsintensiver.
- Animierte Vektordrawables bieten ein skalierbares Format für kleine UI-Animationen.
Assets für Android exportieren
- Asset-Namen sollten in Kleinbuchstaben formatiert werden.
- Einfache Assets als SVG exportieren
- Legen Sie für komplexe Bilder wie Fotos fest, dass sie als WebP, PNG oder JPG exportiert werden.
- Stellen Sie die richtige Auflösungsskalierung ein, wie in der folgenden Tabelle dargestellt.
| Displaygröße | Reichweite |
|---|---|
mdpi |
×1 |
hdpi |
1,5-fach |
xhdpi |
x2 |
xxhdpi |
x3 |
xxxhdpi |
x4 |
Optional können Sie SVGs mit Android Studio in Vector Drawables (VD) konvertieren. Organisieren Sie Assets in Verzeichnissen, die der Auflösung für die Übergabe entsprechen, wie im folgenden Bild dargestellt. Nehmen Sie beispielsweise die Bildschirmgröße in die Ordnernamen auf.
Asset-Typen
Android unterstützt die folgenden Asset-Typen.
Vektor
Eine Vektorgrafik ist ein verlustfreies Format. Das bedeutet, dass beim Skalieren 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 ähneln SVGs, basieren aber auf XML. Außerdem werden verschiedene Attribute wie Verläufe unterstützt. Weitere Informationen dazu, was unterstützt wird, finden Sie unter VectorDrawable. Mit Vector Asset Studio können Sie SVGs in Vector Drawables konvertieren.
Anwendungsfälle
Aufgrund ihrer geringen Größe sollten Symbole am besten in einem Vektorformat erstellt werden. Mit einem animierten Vektordrawable kann einem Symbol Bewegung hinzugefügt werden.
- Illustrationen sind Grafiken, die Nutzern helfen, sich zu orientieren, Konzepte zu erklären oder Ideen auszudrücken. Sie drücken in der Regel den Markenstil aus.
- Hero-Illustrationen werden im Vergleich zu den anderen Inhalten stark hervorgehoben. Sie dienen dazu, das allgemeine Erscheinungsbild festzulegen und primäre Informationen zu erläutern.
- Spot-Illustrationen sind kleiner, in der Regel inline und unterstützen den umgebenden Inhalt.
Raster
Eine verlustbehaftete Grafik, bei der durch Komprimierung oder Skalierung Details verloren gehen, besteht aus Pixeln, aus denen sich das Bild zusammensetzt. Rastergrafiken werden häufig für detaillierte Bilder wie Fotos oder komplexe Verläufe verwendet. Da sie beim Skalieren an Detail verlieren, sollten Sie diese Bilder mit mehreren Auflösungen exportieren.
Rasterformate
Android unterstützt die folgenden Rasterbildformate: PNG, GIF, JPG, WebP.
Anwendungsfälle
Anwendungsfälle sind Bilder mit einer Vielzahl von Texturen, die zu einer breiten Farbpalette und ‑abstufung führen, oder Bilder, die eine zu komplexe Menge von Bézier-Punkten hätten. Anwendungsfälle können auch sehr detaillierte Foto-Assets wie Produktfotos oder Standortdetails umfassen.
Größen
Beachten Sie beim Erstellen von Assets Folgendes.
Lösungs-Buckets
Ihre App sollte Bitmap-Grafiken basierend auf Bildschirmdichtebereichen oder ‑buckets bereitstellen. Das Betriebssystem zeigt automatisch die richtige Grafik für das jeweilige Gerät an. Wenn Sie Assets für jeden Bucket bereitstellen, werden auf jedem Gerät hochwertige Grafiken angezeigt.
Padding
Symbole und ähnliche kleine Assets sollten ein integriertes Padding enthalten, damit das Asset genügend Platz für das Touch-Ziel hat und die Größe einheitlich ist.
Dateinamen
Android-Assets sind kleingeschrieben und enthalten kein Auflösungs-Suffix.
Verwenden Sie eine einheitliche Namenskonvention und Struktur, 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 während der Entwicklung schnell identifizieren.
Andere App-Assets
App-Symbole
Launcher-Symbole befinden sich auf dem Startbildschirm. Monochrome Symbole sind in der System-UI zu finden, z. B. monochrome Benachrichtigungen, Statusleiste und Widgets.
Formatieren Sie App-Symbole als Vektordrawables für adaptive Symbole und als PNG für Legacy-Symbole. Weitere Informationen zum Erstellen und in der Vorschau ansehen von App-Symbolen finden Sie unter App-Symbole entwerfen und in der Vorschau ansehen.
Ladebildschirme
Ab Android 12 kann Ihre App beim Öffnen einen animierten Ladebildschirm mit dem App-Symbol anzeigen.
Placement
Achten Sie darauf, wie Bilder auf dem Bildschirm skaliert und positioniert werden. Die Optionen Anpassen, Zuschneiden, Höhe füllen, Breite füllen, Begrenzungen füllen, Innen und Ohne sind verfügbar, um die Skalierung eines Bildes festzulegen.
Sie können Bilder auch an eine Form anpassen, um zusätzliche Effekte zu erzielen.
Responsives Zuschneiden
Wenn Sie Bilder responsiv darstellen möchten, müssen Sie festlegen, wie ein Bild in verschiedenen Breakpoint-Bereichen zugeschnitten wird. In verschiedenen Haltepunktbereichen kann das Zuschneiden:
- Verwenden Sie ein festes Verhältnis.
- An unterschiedliche Seitenverhältnisse anpassen
- Behalten Sie die Bildhöhe bei.
Ein Verhältnis beibehalten
Die Bildgröße kann über Breakpoint-Bereiche hinweg ein festes Verhältnis haben.
An unterschiedliche Seitenverhältnisse anpassen
Bildverhältnisse können sich ändern, wenn sie an verschiedene Haltepunktbereiche angepasst werden. In Abbildung 9 ändert sich das Bildverhältnis zwischen den Breakpoints beispielsweise von 1:1 zu 16:9.
Feste Bildhöhen
Bei der Bildgrößenanpassung kann eine feste Höhe und eine flexible Breite über und innerhalb von Breakpoint-Bereichen beibehalten werden. Das Bild hat eine feste Höhe, während die Breite zwischen den Breakpoints flexibel ist.
Effekte
Android bietet verschiedene integrierte Bildeffekte. Hier einige häufige Effekte:
Farbverläufe
Verwenden Sie in „Verfassen“ einen Pinsel, um etwas auf dem Bildschirm zu zeichnen. Mit verschiedenen Pinseln lassen sich Formen in unterschiedlichen Farben oder mit Verläufen zeichnen. Mit den integrierten Verlaufs-Pinseln lassen sich verschiedene Verlaufs-Effekte erzielen. Mit diesen Pinseln können Sie die Liste der Farben angeben, aus denen Sie einen Farbverlauf erstellen möchten.
Mit Verlaufs-Pinseln lassen sich komplexere Verläufe erstellen, indem Sie Farbstopps und Kacheln hinzufügen. Dazu müssen Sie nur die Liste der Farben und Prozentsätze angeben, an denen der Stopp erfolgt. Mit Containern oder Formen können Sie Verläufe, deckende Farben oder Bilder zuschneiden.
Weichzeichnen
Mit der Methode Modifier.blur() können Sie Weichzeichner-Effekte auf Bilder anwenden. Geben Sie dazu die Weichzeichner-Verhältnisse an. Verwenden Sie Unschärfe-Effekte mit Vorsicht, 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 Composable „Bild weichzeichnen“.
Füllmethoden
Android kann Bilder mithilfe ähnlicher boolescher Operationen und Mischmodi ändern, die Sie möglicherweise in Designsoftware finden, z. B. „Vereinigen“ oder „Multiplizieren“. Weitere Informationen finden Sie unter BlendMode.
Färbung
Assets mit Füllungen und Mischmodi tönen So können Sie ein einzelnes Asset verwenden und verschiedene Farben darauf anwenden. Das kann die Anzahl der produzierten Assets verringern.
Bewegung
Grafiken können programmatisch animiert werden, um animierte Grafiken zu erstellen, anstatt Bewegungsdateien hochzuladen. Das kann zu mehr Flexibilität und kleineren Asset-Ressourcen führen.
Mit animierten Vektordrawables lassen sich kleine UI-Animationen erstellen. Andernfalls erfahren Sie hier mehr. Weitere Informationen zu Bildeffekten finden Sie unter Bild anpassen.