Panoramica dei disegnabili vettoriali

Prova la funzionalità Scrivi
Jetpack Compose è il toolkit per l'interfaccia utente consigliato per Android. Scopri come visualizzare le immagini in Scrivi.
ImageVector →

Punti chiave

  • Un elemento drawable vettoriale è un'immagine vettoriale definita in un file XML come un insieme di punti, linee e curve, insieme alle relative informazioni sul colore.
  • I file drawable vettoriali sono scalabili, ovvero possono essere ridimensionati senza compromettere la qualità del display. Questo li rende ideali per l'utilizzo nelle app per Android, in quanto possono contribuire a ridurre le dimensioni dei file APK e migliorare le prestazioni.
  • Puoi creare elementi drawable vettoriali in Android Studio facendo clic con il tasto destro del mouse sulla cartella drawable nel progetto e selezionando Nuovo > Asset vettoriale. Puoi anche importare file SVG in Android Studio come drawable vettoriali.
Riepilogo generato da Google Bard il 24 luglio 2023

Introduzione

Un VectorDrawable è un'immagine vettoriale definita in un file XML come un insieme di punti, linee e curve, insieme alle informazioni sul colore associate. Il vantaggio principale dell'utilizzo di un elemento grafico vettoriale è la scalabilità dell'immagine. Può essere scalato senza perdita di qualità di visualizzazione, il che significa che lo stesso file viene ridimensionato per densità dello schermo diverse senza perdita di qualità dell'immagine. Ciò si traduce in file APK più piccoli e in una minore manutenzione da parte degli sviluppatori. Puoi anche utilizzare immagini vettoriali per l'animazione utilizzando più file XML anziché più immagini per ogni risoluzione dello schermo.

Questa pagina e il video di seguito forniscono una panoramica su come creare elementi drawable vettoriali in XML. Android Studio può anche convertire i file SVG nel formato drawable vettoriale, come descritto nell'articolo sull'aggiunta di grafica vettoriale a più densità.

Android 5.0 (livello API 21) è stata la prima versione a supportare ufficialmente gli elementi drawable vettoriali con VectorDrawable e AnimatedVectorDrawable, ma puoi supportare le versioni precedenti con la libreria di supporto Android, che fornisce le classi VectorDrawableCompat e AnimatedVectorDrawableCompat.

Informazioni sulla classe VectorDrawable

VectorDrawable definisce un oggetto drawable statico. Come nel formato SVG, ogni grafica vettoriale è definita come una gerarchia ad albero composta da oggetti path e group. Ogni path contiene la geometria del contorno dell'oggetto e group contiene i dettagli per la trasformazione. Tutti i percorsi vengono tracciati nello stesso ordine in cui appaiono nel file XML.

Figura 1. Gerarchia di esempio di un asset drawable vettoriale

Lo strumento Vector Asset Studio offre un modo semplice per aggiungere una grafica vettoriale al progetto come file XML.

XML di esempio

Ecco un file XML VectorDrawable di esempio che mostra un'immagine di una batteria in modalità di ricarica. 

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

Questo XML genera l'immagine seguente:

Informazioni sulla classe AnimatedVectorDrawable

AnimatedVectorDrawable aggiunge l'animazione alle proprietà di un grafico vettoriale. Puoi definire un'animazione vettoriale come tre file di risorse distinti o come un singolo file XML che definisce l'intero elemento drawable. Per comprendere meglio, esaminiamo entrambi gli approcci: Più file XML e Singolo file XML.

Più file XML

Con questo approccio, puoi definire tre file XML separati:

Esempio di più file XML

I seguenti file XML mostrano l'animazione di un'immagine vettoriale.

  • File XML di 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>
  • File XML di AnimatedVectorDrawable: 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>
  • File XML di Animator utilizzati nel file XML di AnimatedVectorDrawable: rotation.xml e 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>

Singolo file XML

Con questo approccio, puoi unire i file XML correlati in un unico file XML tramite il formato del pacchetto XML. Al momento della creazione dell'app, il tag aapt crea risorse separate e le fa riferimento nel vettore animato. Questo approccio richiede Build Tools 24 o versioni successive e l'output è compatibile con le versioni precedenti.

Esempio di un singolo file XML 

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

Soluzione di compatibilità con le versioni precedenti degli elementi drawable vettoriali

Per supportare gli elementi drawable vettoriali e gli elementi drawable vettoriali animati sui dispositivi con versioni della piattaforma precedenti ad Android 5.0 (livello API 21) o per utilizzare le funzionalità fillColor, fillType e strokeColor al di sotto di Android 7.0 (livello API 24), VectorDrawableCompat e AnimatedVectorDrawableCompat sono disponibili tramite due librerie di supporto: support-vector-drawable e animated-vector-drawable, rispettivamente.

Android Studio 1.4 ha introdotto un supporto di compatibilità limitato per gli elementi drawable vettoriali generando file PNG in fase di compilazione. Tuttavia, le librerie di supporto drawable vettoriali e animate offrono flessibilità e ampia compatibilità: si tratta di una libreria di supporto che ti consente di utilizzarla con tutte le versioni della piattaforma Android fino ad Android 2.1 (livello API 7 o versioni successive). Per configurare la tua app per l'utilizzo di librerie di supporto vettoriale, aggiungi l'elemento vectorDrawables al file build.gradle nel modulo dell'app.

Utilizza il seguente snippet di codice per configurare l'elemento vectorDrawables:

Groovy

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

Kotlin

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

Groovy

// 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")
    }
}

Puoi utilizzare VectorDrawableCompat e AnimatedVectorDrawableCompat su tutti i dispositivi con Android 4.0 (livello API 14) e versioni successive. Il modo in cui Android carica gli elementi drawable, non tutti i punti che accettano un ID drawable, ad esempio in un file XML, supportano il caricamento di elementi drawable vettoriali. Il pacchetto android.support.v7.appcompat ha aggiunto una serie di funzionalità per semplificare l'utilizzo degli elementi grafici vettoriali. In primo luogo, quando utilizzi il pacchetto android.support.v7.appcompat con ImageView o con le sottoclassi come ImageButton e FloatingActionButton, puoi utilizzare il nuovo attributo app:srcCompat per fare riferimento agli elementi drawable vettoriali, nonché a qualsiasi altro drawable disponibile per android:src: 

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

Per modificare gli elementi Drawable in fase di esecuzione, puoi utilizzare il metodo setImageResource() come prima. L'utilizzo di AppCompat e app:srcCompat è il metodo più infallibile per integrare gli elementi drawable vettoriali nella tua app.

La libreria di supporto 25.4.0 e versioni successive supporta le seguenti funzionalità:

  • Morphing del percorso (valutatore del PathType) Utilizzato per morphing un percorso in un altro percorso.
  • Interpolazione percorso utilizzata per definire un interpolatore flessibile (rappresentato come percorso) anziché gli interpolatori definiti dal sistema come LinearInterpolator.

La libreria di supporto 26.0.0-beta1 e versioni successive supporta le seguenti funzionalità:

  • Spostamento lungo un percorso L'oggetto geometria può muoversi lungo un percorso arbitrario nell'ambito di un'animazione.

Esempio di più file XML che utilizzano la libreria di supporto

I seguenti file XML mostrano l'approccio di utilizzo di più file XML per animare una grafica vettoriale.

  • File XML di 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>
  • File XML di AnimatedVectorDrawable: 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>
  • File XML dell'animatore utilizzato nel file XML di AnimatedVectorDrawable: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

Singolo file XML

Il seguente file XML mostra l'approccio di utilizzo di un singolo file XML per animare una grafica vettoriale. Al momento della creazione dell'app, il tag aapt crea risorse separate e fa riferimento a queste nel vettore animato. Questo approccio richiede Build Tools 24 o versioni successive e l'output è compatibile con le versioni precedenti.

Esempio di un singolo file XML che utilizza la libreria di supporto 

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