Palette is a new API for Android that allows you to extract and make use of colors in an image. It also has a support library in order for older versions of Android to make use of Palette.

Google has made theming based on the colors in an image incredibly easy. All you need is an image bitmap and the Palette library, and you’re good to go. Google wants Android apps to have more colors in order to follow the Material Design guidelines, and Palette provides developers with a way to grab colors that will work well with images in our apps.

Palette gives you the ability to extract specific types of colors from your image or simply extract a variable number of basic colors. The specific types of colors include Vibrant, Vibrant Dark, Vibrant Muted, Muted, Muted Dark, and Muted Light. We also get two different text colors that will work nicely with each of the extracted colors.

To get started, add the Palette dependency to your build.gradle file if your targeted version of Android is lower than 21.

compile 'com.android.support:palette-v7:21.0.+'

There are two ways to actually create a Palette and extract the colors from an image:

  • Synchronously
  • Asynchronously

Synchronous methods:

public Palette generate(Bitmap image)

Pass only the image you want to extract the colors from as a parameter. This uses a default number of 15 colors, which should be enough to generate colors that correspond to the special set.

public Palette generate(Bitmap image, int numberOfColors)

Pass the image and specify the number of colors you want to generate from the image.

Asynchronous methods:

public AsyncTask<Bitmap, Void, Palette> generateAsync (Bitmap image, Palette.PaletteAsyncListener listener)

Takes in the image to extract the colors from, and a listener for a callback when the asynchronous task finishes. This also uses a default of 15 colors.

public AsyncTask<Bitmap, Void, Palette> generateAsync (Bitmap image, int numberOfColors, Palette.PaletteAsyncListener listener)

Like the synchronous second method, this allows you to specify the number of colors generated from the image.

Specifying the number of colors:

If the number of colors is not specified, then 15 colors are generated. To be clear, Palette doesn’t generate the set of specific types of colors mentioned before, what it does is generate a number of colors and then it picks the colors that match those descriptions. If colors that do not match those descriptions are not generated, then there is no Swatch returned or a default color that is specified is used.

Swatches and Generated Colors:

When the synchronous method returns or the async task finishes, it creates a Palette object to give you access to the colors. The synchronous method specifically returns the Palette object, and the Palette Listener has a public void onGenerated(final Palette palette) callback method that gives you a Palette object to work with. The Palette object has a very simple API for interacting with the colors:

public Palette.Swatch getDarkMutedSwatch()

Get a Swatch object that matches one of the specified color types. Be sure to include null checks because if no color matches the type of swatch specified, then this will return null!

public int getDarkVibrantColor(int defaultColor)

Grab the color that matches the specified type if we would like instead of getting the entire swatch. In order to do this we have to provide an RGB integer representation of a color and if no color matches that type, then the default color is returned instead.

public List<Palette.Swatch> getSwatches()

Access the list of all of the generated swatches.

Swatches have the following methods:

public int getRgb()

Return the integer representation of the RGB of the color corresponding to this swatch.

public float[] getHsl()

Return HSL information for the color corresponding to this swatch.

public int getBodyTextColor()

Get a corresponding text color for body text over a background of this swatch’s color.

public int getTitleTextColor()

Get a corresponding text color for title text over a background of this swatch’s color.

public int getPopulation()

Return the number of pixels represented by this swatch. blog-palette-img2-224x350@2x

This example of it all pulled together has randomly selected swatches from the list of swatches on the left, and the list of specific color swatches on the right. The text color chosen for each swatch is the body text color.

Using these tools provided by Palette we can easily style our applications based on an image. We can do things like the new Google Contacts in Lollipop where it styles the actionbar and the icon colors on the user’s page based on their contact picture. Palette opens the door for infinite possibilities when it comes to colors and themeing and the like. Be sure to take advantage of this tool when materializing your applications!