Vector Drawable: cos’è, formato XML e come funziona

Cos’è Vector Drawable?

Vector Drawable è una risorsa Android che rappresenta un’immagine vettoriale in formato XML, basata sulla specifica SVG (Scalable Vector Graphics). Google ha introdotto questo formato in Android 5.0 (API 21) come alternativa alle immagini raster per icone, illustrazioni e altri elementi grafici dell’interfaccia.

A differenza del PNG, dove l’immagine è memorizzata come una matrice di pixel di dimensioni fisse, Vector Drawable descrive le forme matematicamente — attraverso coordinate di punti, curve di Bezier, riempimenti e tratti. Ciò significa che una singola immagine vettoriale può sostituire fino a sei file PNG per diverse densità dello schermo (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), semplificando drasticamente la manutenzione delle risorse grafiche.

Il formato supporta non solo immagini statiche, ma anche animazioni tramite AnimatedVectorDrawable, oltre all’adattamento al tema scuro e ai colori personalizzati attraverso attributi del tema. Da Android 7.0 (API 24), Vector Drawable supporta anche riempimenti sfumati e operazioni di ritaglio complesse (clipPath), ampliando le possibilità di progettazione.

Componenti principali di Vector Drawable

Ogni Vector Drawable contiene un elemento radice vector con parametri di larghezza, altezza e viewport — un sistema di coordinate virtuale in cui vengono disegnate le forme. All’interno ci sono gruppi (group) e tracciati (path), dove path definisce la geometria attraverso una sequenza di comandi: M (moveTo), L (lineTo), C (cubicTo), Z (close) e altri. Ogni path può avere il proprio fillColor e strokeColor, che possono fare riferimento a risorse del tema.

Elementi aggiuntivi includono clip-path per il ritaglio, gradient per le transizioni sfumate e attributi di adattamento al tema scuro tramite l’attributo android:theme. Tutti i colori in Vector Drawable possono essere specificati come riferimenti ad attributi del tema (ad esempio, ?attr/colorPrimary), che modifica l’aspetto delle icone al cambio del tema senza duplicare risorse.

Formato Vector Drawable: struttura XML

Il file XML di Vector Drawable viene inserito nella directory res/drawable/ e ha un elemento radice . All’interno possono esserci elementi annidati per l’organizzazione gerarchica ed elementi per descrivere i contorni. Ogni path contiene un attributo pathData — una stringa di comandi di disegno in formato 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>

Nell’esempio viene descritto un cerchio con raggio di 10 unità in un viewport 24×24. Il parametro fillColor fa riferimento a una risorsa colore, mentre strokeWidth e strokeColor definiscono il tratto. Le dimensioni width e height sono specificate in dp — ciò garantisce un ridimensionamento corretto su schermi con diversa densità di pixel senza trasformazioni aggiuntive.

Raggruppamento e trasformazioni

L’elemento group consente di raggruppare più path e applicare trasformazioni comuni: rotazione (rotation), traslazione (translateX, translateY) e ridimensionamento (scaleX, scaleY). I gruppi possono essere annidati, consentendo la creazione di gerarchie complesse con centinaia di elementi senza perdita di prestazioni.

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

Il raggruppamento con l’attributo pivotX/pivotY viene utilizzato per l’animazione: è possibile ruotare o ridimensionare una parte di un’immagine indipendentemente dagli altri elementi, particolarmente utile per creare icone di stato animate (ad esempio, caricamento → successo).

Vector Drawable vs grafica raster

La scelta tra grafica vettoriale e raster dipende dal caso d’uso. Vector Drawable è ideale per icone, illustrazioni ed elementi dell’interfaccia con pochi dettagli, mentre foto e immagini complesse con migliaia di colori rimangono nei formati raster.

Secondo Android Performance Patterns (Google I/O 2016), sostituire le icone PNG con Vector Drawable riduce le dimensioni dell’APK del 40–60% per le applicazioni con un gran numero di risorse grafiche. Tuttavia, durante il rendering di vettori complessi con centinaia di path, il carico della CPU aumenta, quindi per animazioni e ridisegni frequenti si consiglia di utilizzare raster precaricati nella cache.

Quando scegliere Vector Drawable

Vector Drawable è ottimale per icone dell’interfaccia (barra degli strumenti, navigazione, stati), loghi, illustrazioni semplici ed elementi animati. Il formato è particolarmente vantaggioso quando si supportano più schermi: invece di generare PNG per sei densità, è sufficiente un singolo file XML. Ciò semplifica la manutenzione del design ed elimina gli errori di disallineamento delle dimensioni. Per foto e immagini con sfumature fotorealistiche, vengono ancora utilizzati formati raster con compressione WebP.

Animazione di Vector Drawable

Android supporta l’animazione di Vector Drawable attraverso due meccanismi: AnimatedVectorDrawable (disponibile dall’API 21) e AnimatedStateListDrawable. Il primo consente di animare gli attributi del path — rotazione, traslazione, cambio di colore e trasformazione della forma. Il secondo passa da uno stato all’altro (pressione, evidenziazione) con transizioni fluide.

AnimatedVectorDrawable utilizza tre file XML: il Vector Drawable stesso, un ObjectAnimator che descrive l’animazione e un AnimatedVectorDrawable di collegamento che connette il target (nome del gruppo o del path) con l’animator. L’animazione può modificare fillColor, strokeColor, rotation, translateX/Y, scaleX/Y e persino pathData — trasformando dolcemente una forma in un’altra (morphing).

Esempio di animazione morphing

Consideriamo un’animazione in cui un’icona «più» si trasforma in una «x». Il limite principale: il numero di comandi pathData deve corrispondere nello stato iniziale e finale, altrimenti l’animazione non funzionerà.

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

L’ObjectAnimator plus_to_close modifica la proprietà pathData dalla forma originale «più» alla forma «x» in 300 millisecondi. Il sistema interpola automaticamente le coordinate tra i due set di comandi SVG. Questo tipo di animazione è ampiamente utilizzato in Material Design per transizioni fluide degli stati di pulsanti e icone.

Esempi di codice Vector Drawable

Esaminiamo un esempio completo di vettore XML per un’icona di freccia indietro con supporto del tema scuro. Il colore viene impostato tramite un riferimento a un attributo del tema, che cambia automaticamente il colore dell’icona quando si passa tra tema chiaro e scuro senza duplicare risorse.

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

Il parametro android:tint con il valore ?attr/colorControlNormal applica automaticamente il colore di controllo del sistema — grigio scuro sul tema chiaro, bianco sul tema scuro. Il gruppo chiamato arrow consente di animare questa icona tramite AnimatedVectorDrawable.

Caricamento di Vector Drawable dal codice

Per caricare programmaticamente un Vector Drawable in Android, utilizzare la classe AppCompatResources.getDrawable() o il metodo ContextCompat.getDrawable(). Nei progetti moderni con Jetpack Compose, i Drawable raster e vettoriali vengono caricati tramite painterResource, che determina automaticamente il formato della risorsa.

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
)

Quando si utilizza AppCompatResources.getDrawable(), la libreria AppCompat seleziona automaticamente la versione corretta del drawable in base al livello API: sui dispositivi precedenti ad Android 5.0 (API 21) può essere utilizzato un fallback raster; sui dispositivi più recenti viene utilizzato Vector Drawable. In Jetpack Compose, painterResource gestisce automaticamente questa compatibilità.