Selezionare i colori con l'API Palette

Una buona progettazione visiva è essenziale per un'app di successo e le combinazioni di colori sono una componente principale del design. La libreria Palette è una libreria Jetpack che estrae colori in evidenza dalle immagini per creare app visivamente coinvolgenti.

Puoi utilizzare la raccolta Palette per progettare temi di layout e applicare colori personalizzati agli elementi visivi dell'app. Ad esempio, puoi utilizzare una tavolozza per creare un intertitolo con colori coordinati per un brano in base alla copertina dell'album oppure per regolare il colore della barra degli strumenti di un'app quando cambia l'immagine di sfondo. L'oggetto Palette ti permette di accedere ai colori di un'immagine Bitmap, fornendo al contempo sei profili di colore principali dalla bitmap per aiutarti a definire le tue scelte di progettazione.

Configura la raccolta

Per utilizzare la libreria Palette, aggiungi quanto segue a build.gradle:

Kotlin

android {
    compileSdkVersion(33)
    ...
}

dependencies {
    ...
    implementation("androidx.palette:palette:1.0.0")
}

trendy

android {
    compileSdkVersion 33
    ...
}

dependencies {
    ...
    implementation 'androidx.palette:palette:1.0.0'
}

Crea una tavolozza

Un oggetto Palette consente di accedere ai colori primari in un'immagine e ai colori corrispondenti per il testo sovrapposto. Utilizza le tavolozze per progettare lo stile della tua app e modificare dinamicamente la combinazione di colori dell'app in base a una determinata immagine di origine.

Per creare una tavolozza, devi prima creare un'istanza Palette.Builder da una Bitmap. Puoi quindi utilizzare Palette.Builder per personalizzare la tavolozza prima di generarla. Questa sezione descrive la generazione e la personalizzazione della tavolozza da un'immagine bitmap.

Genera un'istanza Palette

Genera un'istanza Palette utilizzando il relativo metodo from(Bitmap bitmap) per creare prima un Palette.Builder da un Bitmap.

Il generatore può generare la tavolozza in modo sincrono o asincrono. Utilizza la generazione sincrona della tavolozza se vuoi creare la tavolozza sullo stesso thread del metodo chiamato. Se generi la tavolozza in modo asincrono, su un thread diverso, utilizza il metodo onGenerated() per accedere alla tavolozza subito dopo la creazione.

Il seguente snippet di codice fornisce metodi di esempio per entrambi i tipi di generazione di tavolozze:

Kotlin

// Generate palette synchronously and return it.
fun createPaletteSync(bitmap: Bitmap): Palette = Palette.from(bitmap).generate()

// Generate palette asynchronously and use it on a different thread using onGenerated().
fun createPaletteAsync(bitmap: Bitmap) {
    Palette.from(bitmap).generate { palette ->
        // Use generated instance.
    }
}

Java

// Generate palette synchronously and return it.
public Palette createPaletteSync(Bitmap bitmap) {
  Palette p = Palette.from(bitmap).generate();
  return p;
}

// Generate palette asynchronously and use it on a different thread using onGenerated().
public void createPaletteAsync(Bitmap bitmap) {
  Palette.from(bitmap).generate(new PaletteAsyncListener() {
    public void onGenerated(Palette p) {
      // Use generated instance.
    }
  });
}

Se devi generare continuamente tavolozze per un elenco ordinato di immagini o oggetti, valuta la possibilità di memorizzare nella cache le istanze Palette per evitare prestazioni dell'interfaccia utente lente. Non creare le tavolozze sul thread principale.

Personalizza la tavolozza

L'elemento Palette.Builder ti consente di personalizzare la tavolozza scegliendo il numero di colori presenti nella tavolozza risultante, l'area dell'immagine utilizzata dal creatore per generare la tavolozza e quali colori includere nella tavolozza. Ad esempio, puoi filtrare il colore nero o assicurarti che il generatore utilizzi solo la metà superiore di un'immagine per generare la tavolozza.

Ottimizza le dimensioni e i colori della tavolozza con i seguenti metodi della classe Palette.Builder:

addFilter()
Questo metodo aggiunge un filtro che indica quali colori sono consentiti nella tavolozza risultante. Passa il tuo Palette.Filter e modifica il relativo metodo isAllowed() per determinare quali colori vengono filtrati dalla tavolozza.
maximumColorCount()
Questo metodo imposta il numero massimo di colori per la tavolozza. Il valore predefinito è 16 e il valore ottimale dipende dall'immagine di origine. Per i paesaggi, i valori ottimali sono compresi tra 8 e 16, mentre le immagini con volti in genere hanno valori compresi tra 24 e 32. Palette.Builder richiede più tempo per generare tavolozze con più colori.
setRegion()
Questo metodo indica quale area della bitmap viene utilizzata dal generatore durante la creazione della tavolozza. Puoi utilizzare questo metodo solo quando generi la tavolozza da una bitmap e non influisce sull'immagine originale.
addTarget()
Questo metodo ti consente di eseguire la tua corrispondenza dei colori aggiungendo un profilo di colori Target allo strumento per la creazione. Se il valore predefinito di Target non è sufficiente, gli sviluppatori avanzati possono creare i propri Target utilizzando un Target.Builder.

Estrai i profili colore

In base agli standard di Material Design, la libreria Palette estrae i profili colore comunemente utilizzati da un'immagine. Ogni profilo è definito da un Target e i colori estratti dall'immagine bitmap vengono valutati in base a ciascun profilo in base a saturazione, luminanza e popolazione (numero di pixel nella bitmap rappresentati dal colore). Per ogni profilo, il colore con il miglior punteggio definisce il profilo colore dell'immagine specificata.

Per impostazione predefinita, un oggetto Palette contiene 16 colori primari da una determinata immagine. Quando generi la tavolozza, puoi personalizzare il numero di colori utilizzando l'Palette.Builder. L'estrazione di più colori fornisce più potenziali corrispondenze per ogni profilo cromatico, ma comporta anche più tempo per la generazione della tavolozza da parte di Palette.Builder.

La libreria Palette tenta di estrarre i sei profili di colore seguenti:

  • Chiaro intenso
  • Intenso
  • Scuro vivace
  • Chiaro attenuato
  • Audio disattivato
  • Scuro con audio disattivato

Ciascuno dei metodi get<Profile>Color() in Palette restituisce il colore nella tavolozza associata al profilo specifico, dove <Profile> viene sostituito dal nome di uno dei sei profili colore. Ad esempio, il metodo per ottenere il profilo colori scura è getDarkVibrantColor(). Poiché non tutte le immagini contengono tutti i profili colore, specifica un colore predefinito da restituire.

La Figura 1 mostra una foto e i profili di colore corrispondenti dei metodi get<Profile>Color().

Un&#39;immagine che mostra un tramonto a sinistra e la tavolozza dei colori estratta a destra.
Figura 1. Un'immagine di esempio e i relativi profili di colore estratti, dato il numero massimo predefinito di colori (16) per la tavolozza.

Utilizzare i campioni per creare combinazioni di colori

La classe Palette genera anche Palette.Swatch oggetti per ogni profilo colore. Gli oggetti Palette.Swatch contengono il colore associato al profilo e la popolazione dei colori in pixel.

I campioni offrono metodi aggiuntivi per accedere a ulteriori informazioni sul profilo colore, ad esempio i valori HSL e la compilazione dei pixel. Puoi utilizzare i campioni per creare combinazioni di colori e temi dell'app più completi utilizzando i metodi getBodyTextColor() e getTitleTextColor(). Questi metodi restituiscono i colori appropriati per l'uso sopra il colore campione.

Ogni metodo get<Profile>Swatch() di Palette restituisce il campione associato al profilo specifico, dove <Profile> viene sostituito dal nome di uno dei sei profili colore. Anche se i metodi get<Profile>Swatch() della tavolozza non richiedono parametri di valori predefiniti, restituiscono null se quel determinato profilo non esiste nell'immagine. Di conseguenza, verifica che un campione non sia nullo prima di utilizzarlo. Ad esempio, il seguente codice recupera il colore del testo del titolo da una tavolozza se il campione Vivace non è null:

Kotlin

val vibrant = myPalette.vibrantSwatch
// In Kotlin, check for null before accessing properties on the vibrant swatch.
val titleColor = vibrant?.titleTextColor

Java

Palette.Swatch vibrant = myPalette.getVibrantSwatch();
if(vibrant != null){
    int titleColor = vibrant.getTitleTextColor();
    // ...
}

Per accedere a tutti i colori di una tavolozza, il metodo getSwatches() restituisce un elenco di tutti i campioni generati da un'immagine, inclusi i sei profili di colore standard.

Il seguente snippet di codice utilizza i metodi degli snippet di codice precedenti per generare in modo sincrono una tavolozza, ottenere il campione vivace e modificare i colori di una barra degli strumenti in modo che corrispondano all'immagine bitmap. La Figura 2 mostra l'immagine risultante e la barra degli strumenti.

Kotlin

// Set the background and text colors of a toolbar given a bitmap image to
// match.
fun setToolbarColor(bitmap: Bitmap) {
    // Generate the palette and get the vibrant swatch.
    val vibrantSwatch = createPaletteSync(bitmap).vibrantSwatch

    // Set the toolbar background and text colors.
    // Fall back to default colors if the vibrant swatch isn't available.
    with(findViewById<Toolbar>(R.id.toolbar)) {
        setBackgroundColor(vibrantSwatch?.rgb ?:
                ContextCompat.getColor(context, R.color.default_title_background))
        setTitleTextColor(vibrantSwatch?.titleTextColor ?:
                ContextCompat.getColor(context, R.color.default_title_color))
    }
}

Java

// Set the background and text colors of a toolbar given a bitmap image to
// match.
public void setToolbarColor(Bitmap bitmap) {
    // Generate the palette and get the vibrant swatch.
    // See the createPaletteSync() method from the preceding code snippet.
    Palette p = createPaletteSync(bitmap);
    Palette.Swatch vibrantSwatch = p.getVibrantSwatch();

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    // Load default colors.
    int backgroundColor = ContextCompat.getColor(getContext(),
        R.color.default_title_background);
    int textColor = ContextCompat.getColor(getContext(),
        R.color.default_title_color);

    // Check that the Vibrant swatch is available.
    if(vibrantSwatch != null){
        backgroundColor = vibrantSwatch.getRgb();
        textColor = vibrantSwatch.getTitleTextColor();
    }

    // Set the toolbar background and text colors.
    toolbar.setBackgroundColor(backgroundColor);
        toolbar.setTitleTextColor(textColor);
}
Un&#39;immagine che mostra un tramonto e una barra degli strumenti con TitleTextColor all&#39;interno
Figura 2. Un'immagine di esempio con la barra degli strumenti dai colori vivaci e il colore del testo del titolo corrispondente.