2014-10-20

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:

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.

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:

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.

Show more