Palette: estrarre colori da una bitmap

Posted by on Mar 18, 2015 in Tutte | 0 comments

Lollipop e il Material Design hanno introdotto un numero considerevole di animazioni, effetti e soprattutto molto colore. Un confronto tra l’ interfaccia di Android 2.0 o 2.2 e Android 5.0 ci mostra l’ enorme differenza di tonalità. Ho introdotto l’ argomento colore perchè oggi vi parlo di una nuova API di Lollipop (presente anche nelle librerie support): Palette.
Questa API permette di estrarre da una bitmap i colori più rilevanti cosi da adattare la UI della nostra app ad un’ immagine.
Un’ effetto molto bello è cambiare il colore della toolbar a seconda dell’ immagine caricata ma potremmo per esempio cambiare lo sfondo di una galleria prendendo i colori dall’ immagine in primo piano.

ezgif.com-optimize

(ps: per gif migliori…mi sto attrezzando :)) 

Per prima cosa importiamo le dipendenze.

Nel file build.gradle del nostro modulo app:

Esistono due metodi per creare la Palette ed estrarre i colori: sincrono e asincrono.
Sincrono non dovrebbe essere chiamato in un main thread ma alla fine del caricamento di un’ immagine in un thread in background.
Nel mio esempio su Github che allego l’ho usato nel main thread perchè su un Nexus 5 il metodo sincrono  ha tempi di creazione molto rapidi circa 20-30 millesimi di secondi.

Oltre al parametro bitmap il metodo generate accetta anche  un int che rappresenta il size della palette cioè il numero di colori presi in considerazioni. Il default è 15 ma è possibile passare sia un numero inferiore sia  superiore. Se la bitmap è grande e con tanti colori passare un size superiore al 15 potrebbe far aumentare i tempi di creazione della Palette.

Non esiste un size perfetto ma è consigliato:

  • Immagini grandi, landscape : 8-16
  • Immagini di contatti/avatart: 24-32

Il valore di default è un buon compromesso e funziona in quasi tutte le situazioni.

Metodo asincrono:

Dall’ instanza della Palette otteniamo sei colori:

  • Vibrant
  • Vibrant Dark
  • Vibrant Light
  • Muted
  • Muted Dark
  • Muted Light

I colori che ci interessano o che potremmo usare nella nostra app sono: Vibrant e Vibrant Dark.

 Palette Swatches

La classe Palette ci mette a disposizione anche un interessante oggetto: Swatch.

Swatch permette di ottenere altre informazioni sul colore.

  • getPopulation():  numero di pixel totali di quel colore
  • getRgb(): colore RGB
  • getHsl(): colore HSL
  • getBodyTextColor(): restituisce un colore che può essere usato nel testo  sopra il colore garantendo un constratto sufficiente per la leggibilità.
  • getTitleTextColor(): restituisce un colore che può essere usato come titolo sopra il colore garantendo un constratto sufficiente per la leggibilità.

Ecco i sorgenti del progetto  Palettexample

 

 

 

Leave a Reply

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *