DevCorner620

DevCorner: coloriamo dinamicamente le risorse

Roberto Orgiu

Questa settimana, l’argomento della nostra rubrica è qualcosa di semplice, ma al tempo stesso molto appagante. E sicuramente i nostri designer ci ringrazieranno!

LEGGI ANCHE: Le icone dinamiche di Nova Launcher.

In cosa consiste quindi? Guardiamo l’animazione sottostante per farcene un’idea.

DynamicColors

In sostanza, a seconda del colore che premiamo, un diverso robottino appare. Ma è davvero un droide diverso? La risposta, in questo caso è un sonoro no! Quello che vediamo è un filtro, che modifica dinamicamente il colore dell’immagine bersaglio e la mostra poi nella ImageView.

Per prima cosa, è bene ricordare che è più semplice lavorare con immagini di partenza totalmente bianche, in modo tale da avere una base neutra da cui partire per applicare il colore. L’effetto che vediamo in figura può essere raggiunto in due brevi e simili modi, che si basano però sulla stessa istruzione di partenza (possiamo vedere i due metodi a confronto qui)

Drawable whiteDrawable = mContext.getResources().getDrawable(whiteResId);

Quello che facciamo con questa riga è molto semplice ed è semplicemente recuperare il Drawable dalle nostre risorse, ma ora le strade dei due metodi si dividono: vediamo per primo il metodo che fa uso del LightingColorFilter.

Creiamo quindi un filtro del colore che ci serve (finalColor) e impostiamo a 0 il parametro relativo al secondo colore da aggiungere (a noi ne serve soltanto uno)

final ColorFilter filter = new LightingColorFilter(finalColor, 0);

Ora non ci resta che mutare il nostro Drawable ed applicare il filtro

whiteDrawable.mutate().setColorFilter(filter);

ed il gioco è fatto!

Andando però a curiosare nelle API, ci accorgiamo che esiste una variante del metodo setColorFilter() che accetta due parametri: indicando quindi il colore che ci interessa e il tipo di blending mode (simile a quelli di Photoshop), potremmo fare a meno del filtro e colorare la nostra risorsa nella stessa maniera

whiteDrawable.mutate().setColorFilter(finalColor, PorterDuff.Mode.MULTIPLY);

Abbiamo quindi visto come possiamo colorare le nostre risorse in maniera decisamente semplice, evitando ai nostri designer di creare diverse versioni di tutte le immagini e lasciandoli concentrare su qualcosa di meno noioso che non cambiare il colore ogni volta che è necessario un ritocco.

Come di consueto, troverete sul nostro forum tutte le risorse inerenti questo episodio. Buona programmazione a tutti!

Fonte: Thomas Devaux