La classe VectorDrawable, introdotta nelle API 21, permette di introdurre immagini basate su grafica vettoriale nelle proprie app Android. Queste risultano di uno stile essenziale, in linea con i canoni estetici del Material Design e proprio per questo nelle app attuali se ne fa un grande uso.

Ve ne sono molte disponibili nel SDK Android, già pronte per essere utilizzate nei nostri progetti: vediamo come importarle.

Innanzitutto, per poterle avere a disposizione anche nelle versioni più datate di Android, si deve integrare la seguente direttiva nel file build.gradle relativo al nostro modulo applicativo (occorre un plugin Gradle di versione 2 o successiva):

android {
    ...
    defaultConfig {
      ...
      vectorDrawables.useSupportLibrary = true
    }
    
}

Facciamo click con il pulsante destro del mouse all’interno del progetto e seguiamo le voci di menu New > “Vector Asset”

Si apre una finestra di  dialogo dalla quale è possibile configurare l’icona selezionata attualmente (di default, quella che raffigura la sagoma del logo di Android):

oppure se ne può scegliere un’altra in un ricco catalogo di alternative suddiviso in categorie:

Le risorse così ottenute figureranno tra quelle a disposizione del nostro progetto e potremo inserirle nei layout come i pulsanti in stile borderless che vediamo qui di seguito:

 <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="16dp"
        app:srcCompat="@drawable/ic_local_cafe_black_24dp"
        style="?android:attr/borderlessButtonStyle"
        android:tint="#CCDDCC" />
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="16dp"
        app:srcCompat="@drawable/ic_save_black_24dp"
        style="?android:attr/borderlessButtonStyle"
        android:tint="#CCCC00"/>
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="16dp"
        app:srcCompat="@drawable/ic_signal_wifi_4_bar_black_24dp"
        style="?android:attr/borderlessButtonStyle"
        android:tint="#00FF00"/>

Questo sarà come appariranno nell’interfaccia utente:

Questo genere di icone, si abbina molto meglio con lo stile attuale promosso da Android  e fornisce, oltre tutto, un ottimo apporto comunicativo visto che richiama alla mente dell’utente simbologie cui egli è già abituato.

E voi che aspetto date ai vostri pulsanti? Usate questo tipo di icone? Commentate e fateci sapere!