Vektor-Drawables – Übersicht

Funktion „Schreiben“ 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 zusammen mit den zugehörigen Farbinformationen definiert ist.
  • Vektor-Drawables sind skalierbar, d. h. ihre Größe kann ohne Verlust der Anzeigequalität angepasst werden. Das macht sie ideal für die Verwendung in Android-Apps, da du so die Größe deiner APK-Dateien verringern und die Leistung verbessern kannst.
  • Du kannst in Android Studio Vektor-Drawables erstellen, indem du in deinem Projekt mit der rechten Maustaste auf den Drawable-Ordner klickst und „Neu“ > „Vektor-Asset“ auswählst. Du kannst SVG-Dateien auch als Vektor-Drawables in Android Studio importieren.
Zusammenfassung erstellt von Google Bard am 24. Juli 2023

Einführung

Ein VectorDrawable ist eine Vektorgrafik, die in einer XML-Datei als eine Reihe von Punkten, Linien und Kurven mit den zugehörigen Farbinformationen definiert wird. Der Hauptvorteil der Verwendung eines Vektor-Drawable ist die Skalierbarkeit der Bilder. Sie kann ohne Verlust der Anzeigequalität skaliert werden. Das bedeutet, dass die Größe derselben Datei an verschiedene Bildschirmdichten ohne Verlust der Bildqualität angepasst wird. Dies führt zu kleineren APK-Dateien und einem geringeren Wartungsaufwand durch den Entwickler. Sie können auch Vektorbilder für die Animation nutzen. Dazu verwenden Sie mehrere XML-Dateien anstelle mehrerer Bilder für jede Bildschirmauflösung.

Diese Seite und das folgende Video bieten einen Überblick über die Erstellung von Vektor-Drawables in XML. In Android Studio kannst du auch SVG-Dateien in das Vektor-Drawable-Format konvertieren, wie unter Vektorgrafiken mit mehreren Dichten hinzufügen beschrieben.

Android 5.0 (API-Level 21) war die erste Version, die Vektor-Drawables mit VectorDrawable und AnimatedVectorDrawable offiziell unterstützt hat. Ältere Versionen können jedoch mit der Android-Supportbibliothek unterstützt werden, die die Klassen VectorDrawableCompat und AnimatedVectorDrawableCompat enthält.

Informationen zur Klasse „VectorDrawable“

VectorDrawable definiert ein statisches Drawable-Objekt. Ähnlich wie im SVG-Format wird jede Vektorgrafik als Baumhierarchie definiert, die aus path- und group-Objekten besteht. Jedes path enthält die Geometrie des Umrisses des Objekts und group enthält Details für die Transformation. Alle Pfade werden in der gleichen Reihenfolge gezeichnet, in der sie in der XML-Datei aufgeführt sind.

Abbildung 1: Beispielhierarchie eines Vektor-Drawable-Assets

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

Beispiel-XML

Hier ist eine VectorDrawable-Beispiel-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-Datei rendert das folgende Bild:

Über die Klasse AnimierteVectorDrawable

Mit AnimatedVectorDrawable werden die Eigenschaften einer Vektorgrafik animiert. Du kannst 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 beide Ansätze 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 zeigen 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 AnimierteVectorDrawable: 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 von AnimierteVectorDrawable 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

Mit diesem Ansatz 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 auf sie 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>

Abwärtskompatibilitätslösung für Vektor-Drawables

Um Vektor-Drawable- und animierte Vektor-Drawables auf Geräten zu unterstützen, auf denen unter Android 5.0 (API-Level 21) ausgeführt wird, oder wenn Funktionen von fillColor, fillType und strokeColor unter Android 7.0 (API-Level 24) verwendet werden, sind VectorDrawableCompat und AnimatedVectorDrawableCompat über zwei Supportbibliotheken verfügbar: support-vector-drawable und animated-vector-drawable.

Mit Android Studio 1.4 wurde eine eingeschränkte Unterstützung der Kompatibilität für Vektor-Drawables eingeführt, indem bei der Build-Erstellung PNG-Dateien generiert wurden. Die Unterstützungsbibliotheken für Vektor-Drawable und animierte Vektoren bieten sowohl Flexibilität als auch umfassende Kompatibilität. Sie sind eine Supportbibliothek, die du mit allen Versionen der Android-Plattform bis Android 2.1 (API-Level 7 und höher) verwenden kannst. Wenn du deine App für die Verwendung von Vektor-Unterstützungsbibliotheken konfigurieren möchtest, füge deiner build.gradle-Datei im App-Modul das vectorDrawables-Element hinzu.

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

Groovig

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

Kotlin

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

Groovig

// 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. Die Art und Weise, wie Android Drawables lädt, unterstützt nicht an jedem Ort, an dem eine Drawable-ID akzeptiert wird, z. B. in einer XML-Datei, das Laden von Vektor-Drawables. Das android.support.v7.appcompat-Paket hat einige Elemente hinzugefügt, um die Verwendung von Vektor-Drawables zu erleichtern. Wenn du das android.support.v7.appcompat-Paket mit ImageView oder mit Unterklassen wie ImageButton und FloatingActionButton verwendest, kannst du mit dem neuen Attribut app:srcCompat auf Vektor-Drawables sowie auf alle anderen Drawables verweisen, die android:src zur Verfügung stehen: 

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

Wenn du Drawables zur Laufzeit ändern möchtest, kannst du wie zuvor die Methode setImageResource() verwenden. AppCompat und app:srcCompat sind die sicherste Methode, um Vektor-Drawables in deine App zu integrieren.

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

  • Path Morphing (PathType-Evaluator): Wird verwendet, um einen Pfad in einen anderen Pfad umzuwandeln.
  • Pfadinterpolation: Wird verwendet, um anstelle der systemdefinierten Interpolatoren wie LinearInterpolator einen flexiblen Interpolator (dargestellt als Pfad) zu definieren.

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

  • Entlang des Pfads bewegen Das Geometrieobjekt kann sich im Rahmen einer Animation entlang eines beliebigen Pfads bewegen.

Beispiel für mehrere XML-Dateien unter Verwendung der Supportbibliothek

Die folgenden XML-Dateien zeigen den Ansatz, bei dem mehrere XML-Dateien zum Animieren einer Vektorgrafik verwendet werden.

  • 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 AnimierteVectorDrawable: 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 von AnimierteVectorDrawable verwendet wird: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

Einzelne XML-Datei

Die folgende XML-Datei zeigt den Ansatz, bei 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 auf sie 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>