Chi sviluppa web, o mobile utilizzando strumenti “simil-web” come Titanium e Ionic, da tempo ha imparato a utilizzare asset vettoriali o font, così da rendere impeccabile la resa sui dispositivi con risoluzioni diverse e facilitare operazioni come la modifica dinamica dei colori.
Purtroppo nel mondo dello sviluppo Android si tende ancora a utilizzare icone raster; per la scalatura nelle varie risoluzioni c’è chi fa tutto a mano, chi utilizza script di varia natura in combinazione con ImageMagick e chi si serve di strumenti online come Android Asset Studio.
Su Android l’approccio migliore al momento sembra quello delle Shape Drawables, ovvero immagini vettoriali definite in xml secondo un determinato formato, funzionalità disponibile solo dalla versione 5 di Android (Lollipop), ma abilitabile anche nelle versioni precedenti abilitando la Support Library.
Segnalo un bell’articolo che spiega benissimo come abilitare l’utilizzo degli asset vettoriali anche sulle versioni pre-lollipop e le modifiche da fare per evitare errori abbastanza str.nzi che possono far perdere qualche ora. Con i dovuti adattamenti tutto ciò vale anche per chi (come me) utilizza Xamarin.
Creazione dell’asset vettoriale da icone material e da svg
Qui sotto ci sono i passi da fare, più o meno, per crearsi con Android Studio un’icona vettoriale utilizzabile in Android. Moltissime sono già presenti tra quelle precaricate (material design), ma è possibile anche generarsele a partire dai propri svg.
Creazione di asset vettoriale da Android Studio
Selezione di una delle icone material già presenti
Definizione dei dettagli dell’icona scelta
Importazione di un’immagine raster in Inkscape
Ridimensionamento dell’immagine vettoriale
Vettorizzazione dell’icona raster
Modalità di vettorizzazione
Allineamento del tracciato vettoriale nell’immagine
Errore in fase di importazione dell’icona vettoriale in Android Studio
Correzione dell’xml
Anteprima dell’svg importato in Android Studio
Il risultato: icona vettoriale in formato xml