Vektor-Drawables – Übersicht

Schreiben Sie jetzt
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.
  • Vektor-Drawables sind skalierbar, d. h. ihre Größe kann ohne Qualitätsverlust angepasst werden. Dadurch eignen sie sich ideal für die Verwendung in Android-Apps, da du dadurch die Größe deiner APK-Dateien reduzieren und die Leistung verbessern kannst.
  • Du kannst Vektor-Drawables in Android Studio erstellen, indem du in deinem Projekt mit der rechten Maustaste auf den Drawable-Ordner klickst und „New“ > „Vector-Asset“ auswählst. Du kannst auch SVG-Dateien als Vektor-Drawables in Android Studio importieren.
Von Google Bard am 24. Juli 2023 erstellte Zusammenfassung

Einführung

Eine VectorDrawable ist eine Vektorgrafik, die in einer XML-Datei als Gruppe von Punkten, Linien und Kurven mit den zugehörigen Farbinformationen definiert ist. Der Hauptvorteil der Verwendung eines Vektor-Drawables ist die Skalierbarkeit des Bildes. Sie kann ohne Verlust der Anzeigequalität skaliert werden, d. h., die Größe derselben Datei wird ohne Verlust der Bildqualität an unterschiedliche Bildschirmdichten angepasst. Dadurch sind die APK-Dateien kleiner und der Wartungsaufwand für die Entwickler ist geringer. Sie können auch Vektorbilder zur Animation nutzen, indem Sie mehrere XML-Dateien anstelle mehrerer Bilder für jede Anzeigeauflösung verwenden.

Diese Seite und das Video unten bieten einen Überblick über das Erstellen von Vektor-Drawables in XML. In Android Studio können SVG-Dateien auch in das Vektor-Drawable-Format konvertiert werden. Dies wird unter Vektorgrafiken mit mehreren Dichten hinzufügen beschrieben.

Android 5.0 (API-Level 21) war die erste Version, die offiziell Vektor-Drawables mit VectorDrawable und AnimatedVectorDrawable unterstützt. Ältere Versionen kannst du jedoch über die Android-Supportbibliothek unterstützen, die die Klassen VectorDrawableCompat und AnimatedVectorDrawableCompat bereitstellt.

Informationen zur Klasse "VectorDrawable"

VectorDrawable definiert ein statisches Drawable-Objekt. Ähnlich wie beim SVG-Format ist jede Vektorgrafik als Baumhierarchie definiert, die aus den Objekten path und group 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

Das Tool Vector Asset Studio bietet eine einfache Möglichkeit, dem Projekt eine Vektorgrafik als XML-Datei hinzuzufügen.

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

Über die Klasse "animateVectorDrawable"

Mit AnimatedVectorDrawable wird den Eigenschaften einer Vektorgrafik eine Animation hinzugefügt. 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 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 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 animateVectorDrawable: 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>
  • Animations-XML-Dateien, die in der XML-Datei von animateVectorDrawable 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 und 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

Zur Unterstützung von Vektor-Drawable und animierten Vektor-Drawables auf Geräten mit Plattformversionen unter Android 5.0 (API-Level 21) oder zur Verwendung der Funktionen fillColor, fillType und strokeColor unter Android 7.0 (API-Level 24) sind VectorDrawableCompat und AnimatedVectorDrawableCompat über zwei unterstützte Bibliotheken 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 Unterstützungsbibliotheken für Vektor-Drawable und animierte Vektor-Drawables bieten jedoch sowohl Flexibilität als auch umfassende Kompatibilität – es handelt sich um eine Supportbibliothek, die Sie mit allen Android-Plattformversionen ab Android 2.1 (API-Level 7 oder höher) verwenden können. Wenn Sie Ihre App für die Verwendung von Vektor-Supportbibliotheken konfigurieren möchten, fügen Sie der Datei build.gradle im App-Modul das Element vectorDrawables hinzu.

Verwende 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. Die Art und Weise, wie Android Drawables lädt, unterstützt nicht jeder Ort, der eine Drawable-ID akzeptiert, z. B. in einer XML-Datei, das Laden von Vektor-Drawables. Das Paket android.support.v7.appcompat hat eine Reihe von Funktionen hinzugefügt, die die Verwendung von Vektor-Drawables 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 in 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-Evaluator): Wird verwendet, um einen Pfad in einen anderen Pfad zu transformieren.
  • Pfadinterpolation: Wird verwendet, um einen flexiblen Interpolator (dargestellt als Pfad) anstelle der systemdefinierten Interpolatoren wie LinearInterpolator zu definieren.

Die Support Library 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 Support Library

Die folgenden XML-Dateien veranschaulichen, wie 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 animateVectorDrawable: 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 animateVectorDrawable 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, wie eine einzelne XML-Datei zum Animieren einer Vektorgrafik verwendet wird. 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 und 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>