Vector Drawable: ce este, formatul XML și cum funcționează

Ce este Vector Drawable?

Vector Drawable este o resursă Android ce reprezintă o imagine vectorială în format XML, bazată pe specificația SVG (Scalable Vector Graphics). Google a introdus acest format în Android 5.0 (API 21) ca alternativă la imaginile raster pentru pictograme, ilustrații și alte elemente grafice ale interfeței.

Spre deosebire de PNG, unde imaginea este stocată ca o matrice de pixeli de dimensiune fixă, Vector Drawable descrie formele matematic — prin coordonatele punctelor, curbe Bezier, umpluturi și contururi. Aceasta înseamnă că o singură imagine vectorială poate înlocui până la șase fișiere PNG pentru diferite densități ale ecranului (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), ceea ce simplifică radical întreținerea resurselor grafice.

Formatul suportă nu doar imagini statice, ci și animație prin AnimatedVectorDrawable, precum și adaptarea la tema întunecată și culori personalizate prin atributele temei. Începând cu Android 7.0 (API 24), Vector Drawable suportă și umpluturi gradient și operații complexe de decupare (clipPath), ceea ce extinde posibilitățile de design.

Componentele principale ale Vector Drawable

Fiecare Vector Drawable conține elementul rădăcină vector cu parametrii de lățime, înălțime și viewport — un sistem de coordonate virtual în care sunt desenate formele. În interior se află grupuri (group) și căi (path), unde path definește geometria printr-o secvență de comenzi: M (moveTo), L (lineTo), C (cubicTo), Z (close) și altele. Fiecare path poate avea propria umplutură (fillColor) și contur (strokeColor), care pot face referire la resursele temei.

Elemente suplimentare includ clip-path pentru decupare, gradient pentru tranziții gradient și atribute de adaptare la tema întunecată prin atributul android:theme. Toate culorile din Vector Drawable pot fi definite ca referințe la atributele temei (de exemplu, ?attr/colorPrimary), ceea ce modifică aspectul pictogramelor la schimbarea temei fără duplicarea resurselor.

Formatul Vector Drawable: structura XML

Fișierul XML Vector Drawable se plasează în directorul res/drawable/ și are elementul rădăcină <vector>. În interior pot fi <group> imbricate pentru organizarea ierarhiei și <path> pentru descrierea contururilor. Fiecare path conține atributul pathData — un șir de comenzi de desenare în formatul căii SVG.

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

În exemplu este descris un cerc cu raza de 10 unități în viewport 24×24. Parametrul fillColor face referire la o resursă de culoare, iar strokeWidth și strokeColor definesc conturul. Dimensiunile width și height se indică în dp — aceasta asigură scalarea corectă pe ecrane cu densitate diferită de pixeli fără transformări suplimentare.

Gruparea și transformările

Elementul group permite gruparea mai multor path-uri și aplicarea de transformări comune: rotație (rotation), deplasare (translateX, translateY) și scalare (scaleX, scaleY). Grupurile pot fi imbricate, ceea ce permite crearea unei ierarhii complexe din sute de elemente fără pierdere de performanță.

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

Gruparea cu atributul pivotX/pivotY este utilizată pentru animație: se poate roti sau scala o parte a imaginii independent de celelalte elemente, ceea ce este deosebit de util pentru crearea pictogramelor de stare animate (de exemplu, încărcare → succes).

Vector Drawable vs grafica raster

Alegerea între grafica vectorială și cea raster depinde de scenariul de utilizare. Vector Drawable este ideal pentru pictograme, ilustrații și elemente de interfață cu puține detalii, în timp ce fotografiile și imaginile complexe cu mii de culori rămân în formate raster.

Conform Android Performance Patterns (Google I/O 2016), înlocuirea pictogramelor PNG cu Vector Drawable reduce dimensiunea APK cu 40–60% pentru aplicațiile cu multe resurse grafice. Totuși, la randarea vectorilor complecși cu sute de path-uri, încărcarea CPU crește, de aceea pentru animații și redesenări frecvente se recomandă utilizarea rasterelor stocate în cache.

Când să alegeți Vector Drawable

Vector Drawable este optim pentru pictograme de interfață (bara de instrumente, navigare, stări), logo-uri, ilustrații simple și elemente animate. Formatul este deosebit de avantajos la suportarea mai multor ecrane: în loc să generați PNG pentru șase densități, un singur fișier XML este suficient. Aceasta simplifică întreținerea designului și elimină erorile de nepotrivire a dimensiunilor. Pentru fotografii și imagini cu gradiente fotorealiste se utilizează în continuare formate raster cu compresie WebP.

Animația Vector Drawable

Android suportă animația Vector Drawable prin două mecanisme: AnimatedVectorDrawable (disponibil de la API 21) și AnimatedStateListDrawable. Primul permite animarea atributelor path — rotație, deplasare, schimbare de culoare și formă. Al doilea comută între diferite stări (apăsare, selectare) cu tranziție lină.

AnimatedVectorDrawable utilizează trei fișiere XML: Vector Drawable propriu-zis, ObjectAnimator cu descrierea animației și AnimatedVectorDrawable de legătură care conectează target (numele grupului sau căii) cu animatorul. Animația poate modifica fillColor, strokeColor, rotation, translateX/Y, scaleX/Y și chiar pathData — adică poate transforma lin o formă în alta (morphing).

Exemplu de animație morphing

Să considerăm o animație în care pictograma „plus” se transformă în „cruce”. Limitarea principală: numărul de comenzi pathData trebuie să coincidă în starea inițială și finală, altfel animația nu va funcționa.

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

Animația ObjectAnimator plus_to_close modifică proprietatea pathData de la forma inițială „plus” la forma „cruce” în 300 de milisecunde. Sistemul interpolează automat coordonatele între cele două seturi de comenzi ale căilor SVG. O astfel de animație este utilizată pe scară largă în Material Design pentru tranziții line ale stărilor butoanelor și pictogramelor.

Exemple de cod Vector Drawable

Să analizăm un exemplu complet de vector XML pentru pictograma săgeată înapoi cu suport pentru tema întunecată. Culoarea este definită prin referință la un atribut al temei, ceea ce schimbă automat culoarea pictogramei la comutarea între tema deschisă și cea întunecată fără duplicarea resurselor.

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

Parametrul android:tint cu valoarea ?attr/colorControlNormal aplică automat culoarea sistemică a elementului de control — pe tema deschisă este gri închis, pe cea întunecată — alb. Grupul numit arrow permite animarea acestei pictograme prin AnimatedVectorDrawable.

Încărcarea Vector Drawable din cod

Pentru încărcarea programatică a Vector Drawable în Android se utilizează clasa AppCompatResources.getDrawable() sau metoda ContextCompat.getDrawable(). În proiectele moderne pe Jetpack Compose, Drawable-urile raster și vectoriale se încași prin painterResource, care detectează automat formatul resursei.

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
)

La utilizarea AppCompatResources.getDrawable(), biblioteca AppCompat selectează singură versiunea corectă de drawable în funcție de nivelul API: pe dispozitivele mai vechi de Android 5.0 (API 21) poate fi utilizată o versiune raster de rezervă (fallback), pe cele mai noi — Vector Drawable. În Jetpack Compose, painterResource gestionează această compatibilitate automat.