Vektor-Drawables – Übersicht

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Hier erfahren Sie, wie Sie Grafiken in „Compose“ anzeigen lassen.
ImageVector →

Wichtige Fakten

  • Ein Vektor-Drawable ist eine Vektorgrafik, die in einer XML-Datei als Gruppe von Punkten, Linien und Kurven sowie den zugehörigen Farbinformationen definiert ist.
  • Vektorgrafiken sind skalierbar, d. h., sie können ohne Qualitätsverlust in der Größe angepasst werden. Das macht sie ideal für die Verwendung in Android-Apps, da sie dazu beitragen können, die Größe Ihrer APK-Dateien zu reduzieren und die Leistung zu verbessern.
  • Sie können Vektor-Drawables in Android Studio erstellen, indem Sie in Ihrem Projekt mit der rechten Maustaste auf den Ordner „drawable“ klicken und „Neu“ > „Vektor-Asset“ auswählen. Sie können SVG-Dateien auch als Vektorgrafiken in Android Studio importieren.
Von Google Bard am 24. Juli 2023 erstellte Zusammenfassung

Einführung

Ein VectorDrawable ist eine Vektorgrafik, die in einer XML-Datei als Satz von Punkten, Linien und Kurven mit den zugehörigen Farbinformationen definiert ist. Der Hauptvorteil von Vektorgrafiken ist die Bildskalierung. Sie kann ohne Qualitätsverlust skaliert werden, d. h., die gleiche Datei wird für unterschiedliche Bildschirmdichten ohne Qualitätsverlust in der Größe angepasst. Das führt zu kleineren APK-Dateien und weniger Wartungsaufwand für Entwickler. Sie können auch Vektorbilder für die Animation verwenden, indem Sie mehrere XML-Dateien anstelle mehrerer Bilder für jede Bildschirmauflösung verwenden.

Auf dieser Seite und im Video unten finden Sie eine Übersicht dazu, wie Sie Vektorgrafiken in XML erstellen. In Android Studio können Sie SVG-Dateien auch in das Vektor-Zeichnen-Format konvertieren, wie unter Vektorgrafiken mit mehreren Dichten hinzufügen beschrieben.

Android 5.0 (API-Level 21) war die erste Version, die Vektorgrafiken mit VectorDrawable und AnimatedVectorDrawable offiziell unterstützte. Sie können jedoch ältere Versionen mit der Android-Supportbibliothek unterstützen, die die Klassen VectorDrawableCompat und AnimatedVectorDrawableCompat bereitstellt.

Klasse „VectorDrawable“

Mit VectorDrawable wird ein statisches Zeichnenobjekt definiert. Ähnlich wie beim SVG-Format wird jede Vektorgrafik als Baumhierarchie definiert, die aus path- und group-Objekten besteht. Jede path enthält die Geometrie des Umrisses des Objekts und group enthält Details zur Transformation. Alle Pfade werden in der Reihenfolge gezeichnet, in der sie in der XML-Datei erscheinen.

Abbildung 1: Beispielhierarchie eines Vektor-Drawable-Assets

Mit dem Tool Vector Asset Studio können Sie dem Projekt ganz einfach eine Vektorgrafik als XML-Datei hinzufügen.

Beispiel für XML

Hier siehst du ein Beispiel für eine VectorDrawable-XML-Datei, die das Bild eines Akkus im Lademodus rendert. 

<!-- res/drawable/battery_charging.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
   <group
         android:name="rotationGroup"
         android:pivotX="10.0"
         android:pivotY="10.0"
         android:rotation="15.0" >
      <path
        android:name="vect"
        android:fillColor="#FF000000"
        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
        android:fillAlpha=".3"/>
      <path
        android:name="draw"
        android:fillColor="#FF000000"
        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
   </group>
</vector>

Diese XML rendert das folgende Bild:

Klasse „AnimatedVectorDrawable“

Mit AnimatedVectorDrawable werden den Eigenschaften einer Vektorgrafik Animationen hinzugefügt. Sie können eine animierte Vektorgrafik als drei separate Ressourcendateien oder als einzelne XML-Datei definieren, die das gesamte drawable definiert. Sehen wir uns zum besseren Verständnis die beiden Ansätze genauer an: Mehrere XML-Dateien und Einzelne XML-Datei.

Mehrere XML-Dateien

Mit diesem Ansatz können Sie drei separate XML-Dateien definieren:

Beispiel für mehrere XML-Dateien

Die folgenden XML-Dateien veranschaulichen die Animation einer Vektorgrafik.

  • XML-Datei von VectorDrawable: vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • XML-Datei von AnimatedVectorDrawable: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
     <target
         android:name="vectorPath"
         android:animation="@anim/path_morph" />
</animated-vector>
  • Animator-XML-Dateien, die in der XML-Datei des AnimatedVectorDrawable verwendet werden: rotation.xml und path_morph.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />
     
    <set xmlns:android="http://schemas.android.com/apk/res/android">
   <objectAnimator
      android:duration="3000"
      android:propertyName="pathData"
      android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
      android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
      android:valueType="pathType"/>
</set>

Einzelne XML-Datei

Auf diese Weise kannst du die zugehörigen XML-Dateien über das XML-Bundle-Format in einer einzigen XML-Datei zusammenführen. Beim Erstellen der App werden mit dem Tag aapt separate Ressourcen erstellt und im animierten Vektor darauf verwiesen. Für diesen Ansatz sind Build Tools 24 oder höher erforderlich. Die Ausgabe ist abwärtskompatibel.

Beispiel für eine einzelne XML-Datei 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="root"
                android:strokeWidth="2"
                android:strokeLineCap="square"
                android:strokeColor="?android:colorControlNormal"
                android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
        </vector>
    </aapt:attr>
    <target android:name="root">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
                android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
                android:duration="300"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>

Lösung für die Abwärtskompatibilität von Vektor-Drawables

Wenn Sie „vektorbasierte Drawables“ und „animierte vektorbasierte Drawables“ auf Geräten mit Plattformversionen unter Android 5.0 (API-Level 21) unterstützen oder die Funktionen fillColor, fillType und strokeColor unter Android 7.0 (API-Level 24) verwenden möchten, sind VectorDrawableCompat und AnimatedVectorDrawableCompat über zwei Supportbibliotheken verfügbar: support-vector-drawable und animated-vector-drawable.

Mit Android Studio 1.4 wurde die Kompatibilitätsunterstützung für Vektor-Drawables eingeschränkt, da PNG-Dateien zum Zeitpunkt der Erstellung generiert wurden. Die Support-Bibliotheken für Vektorgrafiken und animierte Vektorgrafiken bieten jedoch sowohl Flexibilität als auch breite Kompatibilität. Da es sich um eine Support-Bibliothek handelt, können Sie sie mit allen Android-Plattformversionen ab Android 2.1 (API-Ebene 7 und höher) verwenden. Wenn Sie Ihre App so konfigurieren möchten, dass sie Vektor-Support-Bibliotheken verwendet, fügen Sie der Datei build.gradle im App-Modul das Element vectorDrawables hinzu.

Verwenden Sie das folgende Code-Snippet, um das vectorDrawables-Element zu konfigurieren:

Cool

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Cool

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities = []
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

Kotlin

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities()
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters("--no-version-vectors")
    }
}

Du kannst VectorDrawableCompat und AnimatedVectorDrawableCompat auf allen Geräten mit Android 4.0 (API-Level 14) und höher verwenden. Da Android Drawables auf unterschiedliche Weise lädt, ist das Laden von Vektor-Drawables nicht an allen Stellen möglich, an denen eine Drawable-ID akzeptiert wird, z. B. in einer XML-Datei. Das Paket android.support.v7.appcompat bietet eine Reihe von Funktionen, die die Verwendung von Vektorgrafiken erleichtern. Wenn du das Paket android.support.v7.appcompat mit ImageView oder mit Unterklassen wie ImageButton und FloatingActionButton verwendest, kannst du das neue app:srcCompat-Attribut verwenden, um auf Vektor-Drawables sowie alle anderen Drawables zu verweisen, die für android:src verfügbar sind: 

<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_add" />

Zum Ändern von Drawables zur Laufzeit können Sie wie zuvor die Methode setImageResource() verwenden. Mit AppCompat und app:srcCompat kannst du Vektor-Drawables ganz einfach in deine App einbinden.

Die Support Library 25.4.0 und höher unterstützt die folgenden Funktionen:

  • Pfad-Morphing (PathType-Bewerter): Damit wird ein Pfad in einen anderen umgewandelt.
  • Pfadinterpolation: Damit wird ein flexibler Interpolator (als Pfad dargestellt) anstelle der systemdefinierten Interpolatoren wie „LinearInterpolator“ definiert.

Die Support Library 26.0.0-beta1 und höher unterstützt die folgenden Funktionen:

  • Entlang eines Pfades bewegen: Das Geometrieobjekt kann sich im Rahmen einer Animation entlang eines beliebigen Pfades bewegen.

Beispiel für mehrere XML-Dateien mit der Supportbibliothek

Die folgenden XML-Dateien veranschaulichen die Verwendung mehrerer XML-Dateien zum Animieren einer Vektorgrafik.

  • XML-Datei von VectorDrawable: vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • XML-Datei von AnimatedVectorDrawable: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
</animated-vector>
  • Animator-XML-Datei, die in der XML-Datei des AnimatedVectorDrawable verwendet wird: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

Einzelne XML-Datei

In der folgenden XML-Datei wird gezeigt, wie eine einzelne XML-Datei zum Animieren einer Vektorgrafik verwendet wird. Beim Erstellen der App werden mit dem aapt-Tag separate Ressourcen erstellt und im animierten Vektor darauf verwiesen. Für diesen Ansatz sind Build Tools 24 oder höher erforderlich. Die Ausgabe ist abwärtskompatibel.

Beispiel einer einzelnen XML-Datei mit der Support Library 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="64dp"
            android:height="64dp"
            android:viewportWidth="600"
            android:viewportHeight="600">
            <group
                android:name="rotationGroup"
                android:pivotX="300"
                android:pivotY="300"
                android:rotation="45.0" >
                <path
                    android:name="vectorPath"
                    android:fillColor="#000000"
                    android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
            </group>
        </vector>
    </aapt:attr>
    <target android:name="rotationGroup">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:valueFrom="0"
                android:valueTo="360"
                android:duration="6000"
                android:interpolator="@android:interpolator/fast_out_slow_in" />
        </aapt:attr>
    </target>
</animated-vector>