Palette v21

Tried the Android Lollipop SDK? You may have noticed that Palette’s API has been updated. As before, Palette allows you to extract colors from images for use in your UI.

Generating a palette

#

The first step is to generate a Palette instance from a Bitmap. We have four related ways to do this:

// Synchronous methods.
// --------------------------------
// These should be used when you have access to the underlying image loading thread.
// Picasso allows this through a Transformation. For other libraries, YMMV.

// Uses the default palette size (16).
Palette p = Palette.generate(bitmap);

// Allows you to specify the maximum palette size, in this case 24.
Palette p = Palette.generate(bitmap, 24);

// Asynchronous methods
// --------------------------------
// This is the quick and easy integration path. Internally uses an AsyncTask so 
// this may not be optimal (since you're dipping in and out of threads)

// Uses the default palette size (16).
Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
       // Here's your generated palette
    }
});

// Allows you to specify the maximum palette size, in this case 24.
Palette.generateAsync(bitmap, 24, new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
       // Here's your generated palette
    }
});

Using the palette

#

When a palette is generated, it tries to pick six swatches which match certain criteria:

• Vibrant. Palette.getVibrantSwatch()
• Vibrant dark. Palette.getDarkVibrantSwatch()
• Vibrant light. Palette.getLightVibrantSwatch()
• Muted. Palette.getMutedSwatch()
• Muted dark. Palette.getDarkMutedSwatch()
• Muted light. Palette.getLightMutedSwatch()

Which one you choose depends on your use case. Vibrant and Dark Vibrant are the ones that developers will use mostly though.

Using a swatch

#

Each Swatch contains the following methods:

• getPopulation(): the amount of pixels which this swatch represents.
• getRgb(): the RGB value of this color.
• getHsl(): the HSL value of this color.
• getBodyTextColor(): the RGB value of a text color which can be displayed on top of this color.
• getTitleTextColor(): the RGB value of a text color which can be displayed on top of this color.

The different text colors roughly match up to the material design standard styles of the same name. The title text color will be more translucent as the text is larger and thus requires less color contrast. The body text color will be more opaque as text is smaller and thus requires more contrast from color.

Palette.Swatch swatch = palette.getVibrantSwatch();
TextView titleView = ...;

if (swatch != null) {
    titleView.setBackgroundColor(swatch.getRgb());
    titleView.setTextColor(swatch.getTitleTextColor());
}

Please note that if Palette can not find a color which matches the criteria then it will return null. This is why there is a null check above.

Custom color selection

#

But what if you do not like Palette’s color selections? In this case, you can grab all of the swatches which make up the Palette as so:

List<Palette.Swatch> swatches = palette.getSwatches();

You can then iterate over them and choose whichever color you want.

Palette size

#

You may have seen above that you can specify the palette size. The higher the number, the longer it takes to generate a palette. The lower the number, the less colors we have to choose from. The best number to use depends on the image type:

• Contact images/avatars: optimal values are 24-32
• Landscapes: optimal values are 8-16

The default value is 16 which is good compromise and works well in most situations.

Done.

#

So there you go. If you have any specific questions on Palette, add a comment below.