Vector Drawable: wat is het, XML-formaat en hoe het werkt

Wat is Vector Drawable?

Vector Drawable is een Android-bron die een vectorafbeelding in XML-formaat weergeeft, gebaseerd op de SVG-specificatie (Scalable Vector Graphics). Google introduceerde dit formaat in Android 5.0 (API 21) als alternatief voor rasterafbeeldingen voor pictogrammen, illustraties en andere grafische interface-elementen.

In tegenstelling tot PNG, waar de afbeelding wordt opgeslagen als een array van pixels met een vaste grootte, beschrijft Vector Drawable vormen wiskundig — via coördinaten van punten, Bezier-curves, vullingen en contouren. Dit betekent dat één vectorafbeelding tot zes PNG-bestanden kan vervangen voor verschillende schermdichtheden (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), wat het beheer van grafische bronnen drastisch vereenvoudigt.

Het formaat ondersteunt niet alleen statische afbeeldingen, maar ook animatie via AnimatedVectorDrawable, evenals aanpassing aan donkere modus en aangepaste kleuren via thema-attributen. Vanaf Android 7.0 (API 24) ondersteunt Vector Drawable ook gradientvullingen en complexe knipbewerkingen (clipPath), wat de ontwerpmogelijkheden uitbreidt.

Belangrijkste componenten van Vector Drawable

Elke Vector Drawable bevat het root-element vector met parameters voor breedte, hoogte en viewport — een virtueel coördinatenstelsel waarin vormen worden getekend. Binnenin bevinden zich groepen (group) en paden (path), waarbij path de geometrie definieert via een reeks opdrachten: M (moveTo), L (lineTo), C (cubicTo), Z (close) en andere. Elk path kan zijn eigen vulling (fillColor) en omtrek (strokeColor) hebben, die naar themabronnen kunnen verwijzen.

Aanvullende elementen zijn clip-path voor bijsnijden, gradient voor gradientovergangen en aanpassingsattributen voor donkere modus via het android:theme-attribuut. Alle kleuren in Vector Drawable kunnen worden gedefinieerd als verwijzingen naar thema-attributen (bijv. ?attr/colorPrimary), waardoor het uiterlijk van pictogrammen verandert bij het wisselen van thema zonder bronnen te dupliceren.

Vector Drawable-formaat: XML-structuur

Het XML-bestand van Vector Drawable wordt in de map res/drawable/ geplaatst en heeft het root-element <vector>. Binnenin kunnen geneste <group>-elementen zijn voor hiërarchische organisatie en <path> voor het beschrijven van contouren. Elk path bevat het attribuut pathData — een tekenreeks van tekenopdrachten in SVG-padformaat.

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

In het voorbeeld wordt een cirkel beschreven met een straal van 10 eenheden in een viewport van 24×24. De parameter fillColor verwijst naar een kleurbron, terwijl strokeWidth en strokeColor de omtrek definiëren. De afmetingen width en height worden opgegeven in dp — dit zorgt voor correcte schaling op schermen met verschillende pixeldichtheden zonder extra transformaties.

Groepering en transformaties

Het group-element maakt het mogelijk meerdere paths te groeperen en gemeenschappelijke transformaties toe te passen: rotatie (rotation), verschuiving (translateX, translateY) en schaling (scaleX, scaleY). Groepen kunnen worden genest, waardoor een complexe hiërarchie van honderden elementen kan worden gecreëerd zonder prestatieverlies.

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

Groepering met het attribuut pivotX/pivotY wordt gebruikt voor animatie: een deel van de afbeelding kan onafhankelijk van andere elementen worden geroteerd of geschaald, wat vooral nuttig is voor het maken van geanimeerde statuspictogrammen (bijv. laden → succes).

Vector Drawable versus rasterafbeeldingen

De keuze tussen vector- en rasterafbeeldingen hangt af van het gebruiksscenario. Vector Drawable is ideaal voor pictogrammen, illustraties en interface-elementen met weinig details, terwijl foto’s en complexe afbeeldingen met duizenden kleuren in rasterformaten blijven.

Volgens Android Performance Patterns (Google I/O 2016) vermindert het vervangen van PNG-pictogrammen door Vector Drawable de APK-grootte met 40–60% voor apps met veel grafische bronnen. Bij het renderen van complexe vectoren met honderden paths neemt de CPU-belasting echter toe, dus voor animaties en veelvuldig hertekenen wordt het gebruik van gecachte rasters aanbevolen.

Wanneer Vector Drawable kiezen

Vector Drawable is optimaal voor interfacepictogrammen (werkbalk, navigatie, statussen), logo’s, eenvoudige illustraties en geanimeerde elementen. Het formaat is vooral voordelig bij ondersteuning van meerdere schermen: in plaats van PNG te genereren voor zes dichtheden is één XML-bestand voldoende. Dit vereenvoudigt het ontwerpbeheer en elimineert fouten door formaatinconsistenties. Voor foto’s en afbeeldingen met fotorealistische gradiënten worden nog steeds rasterformaten met WebP-compressie gebruikt.

Vector Drawable-animatie

Android ondersteunt Vector Drawable-animatie via twee mechanismen: AnimatedVectorDrawable (beschikbaar vanaf API 21) en AnimatedStateListDrawable. De eerste maakt animatie van path-attributen mogelijk — rotatie, verschuiving, kleur- en vormverandering. De tweede schakelt tussen verschillende statussen (indrukken, selecteren) met een vloeiende overgang.

AnimatedVectorDrawable gebruikt drie XML-bestanden: de Vector Drawable zelf, ObjectAnimator met de animatiebeschrijving en de verbindende AnimatedVectorDrawable die target (naam van groep of pad) met de animator verbindt. De animatie kan fillColor, strokeColor, rotation, translateX/Y, scaleX/Y en zelfs pathData wijzigen — dat wil zeggen, de ene vorm vloeiend in de andere transformeren (morphing).

Voorbeeld van morphing-animatie

Laten we een animatie bekijken waarin het pictogram „plus” verandert in een „kruis”. De belangrijkste beperking: het aantal pathData-opdrachten moet in de begin- en eindtoestand hetzelfde zijn, anders werkt de animatie niet.

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

De ObjectAnimator plus_to_close-animatie wijzigt de eigenschap pathData van de oorspronkelijke „plus”-vorm naar de „kruis”-vorm in 300 milliseconden. Het systeem interpoleert automatisch de coördinaten tussen de twee sets SVG-padopdrachten. Dergelijke animaties worden veel gebruikt in Material Design voor vloeiende overgangen van knop- en pictogramstatussen.

Voorbeelden van Vector Drawable-code

Laten we een volledig voorbeeld bekijken van een XML-vector voor het pictogram terugpijl met ondersteuning voor donkere modus. De kleur wordt gedefinieerd via een verwijzing naar een thema-attribuut, waardoor de kleur van het pictogram automatisch verandert bij het schakelen tussen lichte en donkere modus zonder bronnen te dupliceren.

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

De parameter android:tint met de waarde ?attr/colorControlNormal past automatisch de systeemkleur van het bedieningselement toe — in de lichte modus is dit donkergrijs, in de donkere modus wit. De groep met de naam arrow maakt het mogelijk dit pictogram te animeren via AnimatedVectorDrawable.

Vector Drawable laden vanuit code

Voor het programmatisch laden van Vector Drawable in Android wordt de klasse AppCompatResources.getDrawable() of de methode ContextCompat.getDrawable() gebruikt. In moderne projecten met Jetpack Compose worden raster- en vector-Drawables geladen via painterResource, die automatisch het formaat van de bron detecteert.

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
)

Bij gebruik van AppCompatResources.getDrawable() selecteert de AppCompat-bibliotheek zelf de juiste versie van de drawable op basis van het API-niveau: op apparaten ouder dan Android 5.0 (API 21) kan een rasterfallback worden gebruikt, op nieuwere apparaten Vector Drawable. In Jetpack Compose handelt painterResource deze compatibiliteit automatisch af.