Vektor-Drawables – Übersicht

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Einfügen von Grafiken in Compose
ImageVector →

Wichtige Fakten

  • Ein Vektor-Drawable ist eine Vektorgrafik, die in einer XML-Datei als Satz von Punkten, Linien und Kurven mit 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 Objektumrisses 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 zeichenbaren Vektor-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 ist eine Beispiel-VectorDrawable-XML-Datei, die ein 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-Datei 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 beide 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

So können Sie die zugehörigen XML-Dateien über das XML-Bundle-Format in einer einzigen XML-Datei zusammenführen. 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 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.

In Android Studio 1.4 wurde eine eingeschränkte Kompatibilitätsunterstützung für Vektorgrafiken eingeführt, indem beim Build-Vorgang PNG-Dateien 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 build.gradle-Datei im App-Modul das Element vectorDrawables hinzu.

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

Groovy

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

Kotlin

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

Groovy

// 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")
    }
}

Sie können 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 nicht an jeder Stelle, an der eine Drawable-ID akzeptiert wird, z. B. in einer XML-Datei, das Laden von Vektor-Drawables möglich. Das Paket android.support.v7.appcompat bietet eine Reihe von Funktionen, die die Verwendung von Vektorgrafiken erleichtern. Wenn Sie das android.support.v7.appcompat-Paket mit ImageView oder mit Unterklassen wie ImageButton und FloatingActionButton verwenden, können Sie mit dem neuen app:srcCompat-Attribut auf Vektorgrafiken und andere Drawables 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" />

Wenn Sie Drawables zur Laufzeit ändern möchten, können Sie wie bisher die Methode setImageResource() verwenden. Die Verwendung von AppCompat und app:srcCompat ist die sicherste Methode, Vektorgrafiken in Ihre App einzubinden.

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 des 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 der Ansatz veranschaulicht, mit dem 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 für eine einzelne XML-Datei mit der Supportbibliothek 

<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>