Extract Prominent Colors For Android Apps With Palette

In Android Lollipop, a new defining features of material design is the use of color.
You can get more infomation in here: Material Design Color
In this article, I will show you how to extract prominent colors from a bitmap for customizing UI. I also have a sample for you which use Palette object to get color profile of bitmap.

[![android_palette_coloom/content/images/2015/07/android_palette_color.png)In the sample, I get vibrant color from a bitmap then change background color for ActionBar with this.

Import the Palette

To get started, you need import the palatte support library into your project.

compile 'com.android.support:palette-v7:22.2.0'

Add to the project’s build.gradle file and run gradle sync. With Palette, you can get different color profiles from the image.

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

Instances are created with a Palette.Builder which supports several options to tweak the generated Palette.

Generation should always be completed on a background thread, ideally the one in which you load your image on. Palette.Builder supports both synchronous and asynchronous generation:

// Synchronous
Palette p = Palette.from(bitmap).generate(); // Asynchronous
Palette.from(bitmap).generate(new PaletteAsyncListener() {
   public void onGenerated(Palette p) { // Use generated instance } });

Swatches

Swatch objects represents a color swatch generated from an image’s palette. The RGB color can be retrieved by calling getRgb().

Each Palette has a set of six predefined color profiles, I use six TextViews to show this.

mVibrantTextView = (TextView) findViewById(R.id.vibrant);
mLightVibrantTextView = (TextView) findViewById(R.id.light_vibrant);
mDarkVibrantTextView = (TextView) findViewById(R.id.dark_vibrant);
mMutedTextView = (TextView) findViewById(R.id.muted);
mLightMutedTextView = (TextView) findViewById(R.id.light_muted);
mDarkMutedTextView = (TextView) findViewById(R.id.dark_muted);

Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
 @Override public void onGenerated(Palette palette) {
  mActionBar.setBackgroundDrawable(newColorDrawable(palette.getVibrantSwatch().getRgb()));
  setViewSwatch(mVibrantTextView, palette.getVibrantSwatch());
  setViewSwatch(mLightVibrantTextView, palette.getLightVibrantSwatch());
  setViewSwatch(mDarkVibrantTextView, palette.getDarkVibrantSwatch());
  setViewSwatch(mMutedTextView, palette.getMutedSwatch());
  setViewSwatch(mLightMutedTextView, palette.getLightMutedSwatch());
  setViewSwatch(mDarkMutedTextView, palette.getDarkMutedSwatch());
 }
});

private void setViewSwatch(TextView view, Palette.Swatch swatch) {
 if (swatch != null) {
  view.setTextColor(swatch.getTitleTextColor());
  view.setBackgroundColor(swatch.getRgb());
  view.setVisibility(View.VISIBLE);
 } else {
  view.setVisibility(View.GONE);
 }
}

In additional to the standard profile Swatch objects, each Palette contains a list of general Swatch objects generated from the bitmap. These can retrieved from the Palette as a List by using the getSwatches() method.

for (Palette.Swatch swatch : palette.getSwatches()) {
  //do sth with swatch
}

Conclusion

In this article, you have learned about the Palette and how to extract swatches of color from bitmap. You can get complete source code in here: Android Palette (module: androidpalette)