Android – Pick Colors from Image Color Palette


Color Pallete in android is useful for creating beautiful UI and maintain the same color throughout the app. With the release of Android Lollipop, several new support libraries  have been created. One of the new libraries is for the Palette class. This new class makes it easy to extract colors from images, which is useful if you want to style other view components to match colors from your image, such as a background for the image or a text color with suitable contrast. One way I like to use this is to color the ripple drawable behind the image. It is a subtle effect, but I think it is a nice improvement over the standard gray.

Extracting colors from an image may sound a very code intensive and difficult thing to do. But believe me with Android palette library it is very simple to pick relevant colors from an image. Also this new library gives a lot of options to pick the right type of colors for your screen.

Step 1 ) Update build.gradle file

Before you can use it in your projects you need to add the following compile line to your Gradle dependencies block in your build.gradle file.

Step 2) Add wallpaper image in drawable folder  .

color-pallete

Wallpaper Image

Step 3) Update styles.xml .

Create style for TextView so that you does not need to write the properties again and again . simply use style property like style=”@style/textStyle” in TextView to use this style .

Step 4) Update strings.xml .

Step 5) Update dimens.xml .





Step 6) Create activity_main.xml .

In xml there is an ImageView to show image wallpaer.jpg and 6 TextView to set color picked via Palette from wallpaper.jpg .

Step 7) Create MainActivity.java

In This class we used palette class to pick color from Bitmap . Android Palette is a collection of swatches. Each Android Swatch represents a color. The Palette object will try to find 16 colors from the image by default, but there are six color profiles you will use most often:

Vibrant – use getVibrantColor(0) method to get vibrant color.
Vibrant dark – use getDarkVibrantColor(0) method to get vibrant dark color.
Vibrant light – use getLightVibrantColor(0) method to get vibrant light color.
Muted – use getMutedColor(0) method to get muted color.
Muted dark – use getDarkMutedColor(0) method to get muted dark color.
Muted light – use getLightMutedColor(0) method to get muted light color.

 

 
This whole sample would result a screen like this:
 

Pallete Example

Pallete Example

Enjoy Coding and Share Knowledge

Show Buttons
Hide Buttons