Android Palette – Pick colors from images


Photo Credit: Rageforst ├Žsthir - Android Palette

When Android 5.0 (Lollipop) version was released, support library v7 was also updated with a new library called Android Palette library. This new library can help you to pick colors from an image dynamically. For example if you are building an image intensive app, where user experience is of prime importance you can use this Android Palette library to extract colors from the image on screen. Further these colors could be used at prominent spaces on your screen to blend the image into your app screen. Now days a lot of effort is being spent on building a good user experience for android apps. This Palette library is something completely new which could revolutionize the user experience in Android apps.

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.

Android Palette Library Basics

As I mentioned it is very simple to use Android Palette library. But before jumping directly to an example lets understand the basics of this library first. Palette library is available through the support repository of Android, which makes this library ready to use for Android API 7 and above.

How to generate an Android Palette

Asynchronously

I believe this is the best way one can generate a palette in Android. As when generating a palette asynchronously you don’t need to wait until you have a palette with you. In case of asynchronous android palette generation, if a palette is generated it will replace the default colors on the screen. Which would be a good programming practice. Please keep in mind when generating a palette asynchronously or synchronously, there can be a situation where palette is returned as null. Therefore don’t forget to perform a null check. Have a look at the code snippet below to do so:

 

Synchronously

Although there might be a situation, where you may decide to write some custom piece of code where it is required to wait until a palette is generated. In such a case this synchronous Android palette generation technique could be used. Before having a look at the code snippet to do so, I would like to remind you that whether it is an asynchronous or synchronous palette generation, returned value could be null. Hence don’t forget to apply a null check:

 

Varieties of an Android Palette

As the name suggests Android Palette is a collection of swatches. Each Android Swatch represents a color. When an image is used to generate a palate we can optionally specify the number of swatches we want from that image. In case we don’t specify the number (like I have not been specifying in this example), 16 swatches would be returned. Although the most prominently used swatches are given a name:

If you wish to retrieve all the swatches, you can do it by using this piece of code:

 

How to use a Swatch

As I mentioned a swatch represents a color and by default 16 swatches are generated. Some of the important methods of the Android Swatch class are:

  • getRgb() – Returns the color in RGB value.
  • getTitleTextColor() – Returns the title color in RGB value. A color in contrast with the swatch color, safe to use on top of swatch as title text color.
  • getBodyTextColor() – Returns the body text color in RGB value. A color in contrast with the swatch color, safe to use on top of swatch as body text color.
  • getPopulation() – Returns the quantity of pixels represented by this swatch.

 

Android Palette Library Example

Here I will show an example of Android Palette Library, where we will generate a palette asynchronously. To do so first include the palette library in the dependencies section of your build.gradle file:

Next lets make a layout where an image would be displayed, with title and body text:

Please Note: Replace the truiton_short image with your desired image to make this example work.

Further lets write the Main Activity where the colors would be picked from the specified image.

This whole sample would result a screen like this:

Android Palette Example

 

In the example above you can see that, I have generated an Android Palette asynchronously. When a palette is generated, the onGenerated method of PaletteAsyncListener is called, in which a null check is performed. If the palette is not null then the colors of screen are changed in accordance with the palette. Hope this helped. Connect with us on Facebook, Google+, and Twitter for more updates.

About Mohit Gupt

An android enthusiast, and an iPhone user with a keen interest in development of innovative applications.


Leave a comment

Your email address will not be published. Required fields are marked *

2 thoughts on “Android Palette – Pick colors from images