Vector Drawable: Was es ist, XML-Format und Funktionsweise

Was ist Vector Drawable?

Vector Drawable ist eine Android-Ressource, die ein Vektorbild im XML-Format darstellt, basierend auf der SVG-Spezifikation (Scalable Vector Graphics). Google führte dieses Format in Android 5.0 (API 21) als Alternative zu Rasterbildern für Symbole, Illustrationen und andere grafische UI-Elemente ein.

Anders als PNG, wo das Bild als Pixel-Array fester Größe gespeichert wird, beschreibt Vector Drawable Formen mathematisch — durch Punktkoordinaten, Bezierkurven, Füllungen und Konturen. Das bedeutet, dass ein einzelnes Vektorbild bis zu sechs PNG-Dateien für verschiedene Bildschirmdichten (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi) ersetzen kann, was die Wartung von Grafikressourcen drastisch vereinfacht.

Das Format unterstützt nicht nur statische Bilder, sondern auch Animationen über AnimatedVectorDrawable sowie die Anpassung an dunkle Designs und benutzerdefinierte Farben über Themenattribute. Seit Android 7.0 (API 24) unterstützt Vector Drawable auch Verlaufsfüllungen und komplexe Clip-Operationen (clipPath), was die Designmöglichkeiten erweitert.

Hauptkomponenten von Vector Drawable

Jedes Vector Drawable enthält ein root vector-Element mit Parametern für Breite, Höhe und Viewport — einem virtuellen Koordinatensystem, in dem Formen gezeichnet werden. Im Inneren befinden sich Gruppen (group) und Pfade (path), wobei path die Geometrie durch eine Folge von Befehlen definiert: M (moveTo), L (lineTo), C (cubicTo), Z (close) und andere. Jeder path kann seine eigene fillColor und strokeColor haben, die auf Themenressourcen verweisen können.

Zusätzliche Elemente umfassen clip-path zum Beschneiden, gradient für Farbverläufe und Attribute zur Anpassung an das dunkle Design über das Attribut android:theme. Alle Farben in Vector Drawable können als Verweise auf Themenattribute (z. B. ?attr/colorPrimary) angegeben werden, was das Erscheinungsbild von Symbolen beim Wechsel des Designs ohne Ressourcenduplizierung ändert.

Vector Drawable Format: XML-Struktur

Die XML-Datei von Vector Drawable wird im Verzeichnis res/drawable/ abgelegt und hat ein root -Element. Im Inneren können verschachtelte -Elemente zur Hierarchieorganisation und -Elemente zur Beschreibung von Konturen vorhanden sein. Jeder path enthält ein pathData-Attribut — eine Zeichenfolge von Zeichenbefehlen im SVG-Pfadformat.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@color/ic_launcher_background"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:strokeWidth="1"
        android:strokeColor="#333333"/>

</vector>

Im Beispiel wird ein Kreis mit einem Radius von 10 Einheiten in einem 24×24-Viewport beschrieben. Der Parameter fillColor verweist auf eine Farbressource, während strokeWidth und strokeColor den Strich definieren. Die Maße width und height werden in dp angegeben — dies gewährleistet eine korrekte Skalierung auf Bildschirmen mit unterschiedlichen Pixeldichten ohne zusätzliche Transformationen.

Gruppierung und Transformationen

Das group-Element ermöglicht das Gruppieren mehrerer Pfade und das Anwenden gemeinsamer Transformationen: Drehung (rotation), Verschiebung (translateX, translateY) und Skalierung (scaleX, scaleY). Gruppen können verschachtelt werden, was die Erstellung komplexer Hierarchien mit Hunderten von Elementen ohne Leistungseinbußen ermöglicht.

<vector ...>
    <group android:name="arrow_group"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="90">
        <path .../>
    </group>
</vector>

Die Gruppierung mit dem Attribut pivotX/pivotY wird für Animationen verwendet: Sie können einen Teil eines Bildes unabhängig von anderen Elementen drehen oder skalieren, was besonders für die Erstellung animierter Zustandssymbole (z. B. Laden → Erfolg) nützlich ist.

Vector Drawable vs Rastergrafik

Die Wahl zwischen Vektor- und Rastergrafik hängt vom Verwendungszweck ab. Vector Drawable ist ideal für Symbole, Illustrationen und UI-Elemente mit wenigen Details, während Fotos und komplexe Bilder mit Tausenden von Farben in Rasterformaten bleiben.

Laut Android Performance Patterns (Google I/O 2016) reduziert der Ersatz von PNG-Symbolen durch Vector Drawable die APK-Größe um 40–60% für Anwendungen mit einer großen Anzahl von Grafikressourcen. Beim Rendern komplexer Vektoren mit Hunderten von Pfaden steigt jedoch die CPU-Last, daher wird für Animationen und häufige Neuzeichnungen die Verwendung von vorab zwischengespeicherten Rastern empfohlen.

Wann Vector Drawable wählen

Vector Drawable ist optimal für Oberflächensymbole (Toolbar, Navigation, Status), Logos, einfache Illustrationen und animierte Elemente. Das Format ist besonders vorteilhaft bei der Unterstützung mehrerer Bildschirme: Statt PNGs für sechs Dichten zu generieren, reicht eine einzige XML-Datei aus. Dies vereinfacht die Designwartung und eliminiert Größenfehler. Für Fotos und fotorealistische Verlaufsbilder werden weiterhin Rasterformate mit WebP-Komprimierung verwendet.

Vector Drawable Animation

Android unterstützt Vector Drawable-Animationen über zwei Mechanismen: AnimatedVectorDrawable (verfügbar seit API 21) und AnimatedStateListDrawable. Ersteres ermöglicht die Animation von Pfadattributen — Drehung, Verschiebung, Farbänderung und Formumwandlung. Letzteres wechselt zwischen verschiedenen Zuständen (Drücken, Hervorheben) mit sanften Übergängen.

AnimatedVectorDrawable verwendet drei XML-Dateien: das Vector Drawable selbst, einen ObjectAnimator, der die Animation beschreibt, und ein bindendes AnimatedVectorDrawable, das das Ziel (Gruppen- oder Pfadname) mit dem Animator verbindet. Die Animation kann fillColor, strokeColor, rotation, translateX/Y, scaleX/Y und sogar pathData — das sanfte Verwandeln einer Form in eine andere (Morphing) — ändern.

Beispiel für Morphing-Animation

Betrachten wir eine Animation, bei der sich ein Plus-Symbol in ein Schließen-Symbol verwandelt. Die wesentliche Einschränkung: Die Anzahl der pathData-Befehle muss im Anfangs- und Endzustand übereinstimmen, andernfalls funktioniert die Animation nicht.

<!-- res/drawable/anim_plus_to_close.xml -->
<animated-vector xmlns:android="...">
    <target
        android:name="plus_path"
        android:animation="@anim/plus_to_close"/>
</animated-vector>

Der ObjectAnimator plus_to_close ändert die pathData-Eigenschaft von der ursprünglichen Plusform in die Schließen-Form innerhalb von 300 Millisekunden. Das System interpoliert automatisch die Koordinaten zwischen den beiden Sätzen von SVG-Pfadbefehlen. Diese Art von Animation wird in Material Design häufig für sanfte Zustandsübergänge von Schaltflächen und Symbolen verwendet.

Vector Drawable Code-Beispiele

Betrachten wir ein vollständiges XML-Vektorbeispiel für ein Zurück-Pfeil-Symbol mit Unterstützung für das dunkle Design. Die Farbe wird über einen Verweis auf ein Themenattribut gesetzt, wodurch sich die Symbolfarbe beim Wechsel zwischen hellem und dunklem Design automatisch ändert, ohne Ressourcen zu duplizieren.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">

    <group android:name="arrow">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
    </group>

</vector>

Der Parameter android:tint mit dem Wert ?attr/colorControlNormal wendet automatisch die Systemsteuerungsfarbe an — dunkelgrau bei hellem Design, weiß bei dunklem Design. Die Gruppe mit dem Namen arrow ermöglicht die Animation dieses Symbols über AnimatedVectorDrawable.

Vector Drawable aus Code laden

Zum programmatischen Laden eines Vector Drawable in Android wird die Klasse AppCompatResources.getDrawable() oder die Methode ContextCompat.getDrawable() verwendet. In modernen Jetpack Compose-Projekten werden Raster- und Vektor-Drawables über painterResource geladen, das automatisch das Ressourcenformat bestimmt.

import androidx.appcompat.content.res.AppCompatResources

val vectorDrawable = AppCompatResources.getDrawable(
    context,
    R.drawable.ic_arrow_back
)

// Jetpack Compose
Icon(
    painter = painterResource(R.drawable.ic_arrow_back),
    contentDescription = "Back",
    tint = MaterialTheme.colorScheme.onSurface
)

Bei Verwendung von AppCompatResources.getDrawable() wählt die AppCompat-Bibliothek automatisch die korrekte Drawable-Version basierend auf dem API-Level aus: auf Geräten vor Android 5.0 (API 21) kann ein Raster-Fallback verwendet werden; auf neueren Geräten wird Vector Drawable verwendet. In Jetpack Compose behandelt painterResource diese Kompatibilität automatisch.