Android lavora con SVG / Vector Drawables

Durante lo sviluppo di applicazioni Android, supportare risoluzioni multiple è a volte un incubo per gli sviluppatori. Includere più immagini per diverse risoluzioni aumenta anche la dimensione del progetto. La soluzione è usare la grafica vettoriale come le immagini SVG.

Cos’è un Vector Drawable?

Un VectorDrawableè una grafica vettoriale definita in un file XML come un insieme di punti, linee e curve insieme alle informazioni sui colori associati. Il vantaggio principale dell’uso di un disegnabile vettoriale è la scalabilità dell’immagine. Ora non c’è bisogno di creare immagini di dimensioni diverse per mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi ecc. Vector drawable può essere scalato senza perdita di qualità di visualizzazione, il che significa che lo stesso file viene ridimensionato per diverse densità dello schermo senza perdita di qualità dell’immagine. Questo si traduce in file APK più piccoli e meno manutenzione da parte dello sviluppatore.

Creazione di un progetto Android

1. Creare un nuovo progetto in Android Studio da File ⇒ Nuovo Progetto e inserire i dettagli del progetto.

2. Aprire build.gradle e aggiungere la seguente linea all’interno del blocco defaultConfig.

vectorDrawables.useSupportLibrary = true

Se si utilizza una versione di gradle inferiore a 2.0 allora usa il seguente

aaptOptions {
additionalParameters " — no-version-vectors"
}

Creazione di VectorDrawable

Ci sono 2 modi per creare VectorDrawable usando Android Studio Vector asset tool.

I) Material Icons

Si inizia creando VectorDrawable da Material Icons. Queste icone sono il set di icone ufficiali di Google che sono progettate sotto le linee guida del Material Design.

1. Nel progetto cliccate con il tasto destro del mouse sulla directory del drawable
2. Andate su New ⇒ Vector Asset
3. Cliccate sull’icona del launcher per sfogliare Material Icons.
4. Selezionate un’icona e cliccate su OK.
5. Rivedete il nome del file e cliccate su next.
6. Ora Vector Asset Studio mostrerà la posizione in cui il file viene salvato, rivedetelo e cliccate su finish.
7. La cartella drawable sarà ora composta da un file appena creato.

II) File SVG o PSD

Ora abbiamo creato vectorDrawable da Material Icon, cosa succede se vogliamo un’icona separata? Possiamo crearla da SVG o PSD, di seguito la procedura

1. Nel progetto clicchiamo con il tasto destro del mouse sulla directory drawable
2. Vai su New ⇒ Vector Asset
3. Seleziona l’opzione Local File (SVG, PSD)
4. Clicca sull’icona browse e naviga fino al tuo file SVG o PSD per selezionarlo e clicca su OK.
5. Verifica l’immagine nell’anteprima e clicca su Next ⇒ Finish.

Using VectorDrawable

Abbiamo aggiunto con successo i VectorDrawable al progetto, ora è il momento di usarli. Aprite il file di layout dell’attività principale (activity_main.xml) e aggiungete il seguente xml. Questo layout contiene mostra come usare VectorDrawable con ImageView e altre viste (come sfondo)

Per usare VectorDrawable da java o per usarlo come sfondo (anche in xml) è necessario intimare AppCompatDelegate per abilitare il vettore compat dalla risorsa. Qui sotto c’è il codice per questo.