Android Palette – Pick colors from images

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:

Palette.from(imageBitmap).generate(new PaletteAsyncListener() {
    public void onGenerated(Palette p) {
        // Use generated palette
    }
});

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:

Palette p = Palette.from(imageBitmap).generate();

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:

• Vibrant – use Palette.getVibrantSwatch() method to get this swatch.
• Vibrant dark – use Palette.getDarkVibrantSwatch() method to get this swatch.
• Vibrant light – use Palette.getLightVibrantSwatch() method to get this swatch.
• Muted – use Palette.getMutedSwatch() method to get this swatch.
• Muted dark – use Palette.getDarkMutedSwatch() method to get this swatch.
• Muted light – use Palette.getLightMutedSwatch() method to get this swatch.

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

List<Palette.Swatch> swatches = palette.getSwatches();

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:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.1.1'
    compile 'com.android.support:palette-v7:22.1.1'
}

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

<RelativeLayout
    android:id="@+id/layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/image_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="#DD000000">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:src="@mipmap/truiton_short"/>
    </RelativeLayout>


    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/image_layout"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        android:text="Title Text"
        android:textAppearance="?android:attr/textAppearanceLarge"/>

    <TextView
        android:id="@+id/body_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dolor velit, vulputate ut justo sed, eleifend porta nisl. Ut gravida tristique blandit. Nullam elementum sapien ac sapien pellentesque blandit. Donec imperdiet ac ligula a egestas. Donec orci ante, cursus non eros vitae, ullamcorper lacinia mi. Suspendisse scelerisque tristique massa. Donec sodales dui id erat dapibus, at vestibulum neque egestas. Pellentesque bibendum tristique neque, et hendrerit lectus. Duis sed pellentesque lacus. Maecenas ac leo congue, euismod mi quis, semper purus."/>

</RelativeLayout>

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.

package com.truiton.paletteexample;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.graphics.Palette;
import android.widget.RelativeLayout;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final RelativeLayout outerLayout = (RelativeLayout) findViewById(R.id.layout);
        final TextView titleText = (TextView) findViewById(R.id.title);
        final TextView bodyText = (TextView) findViewById(R.id.body_text);

        Bitmap image = BitmapFactory.decodeResource(getResources(),
                R.mipmap.truiton_short);
        Palette.from(image).generate(new Palette.PaletteAsyncListener() {
            public void onGenerated(Palette palette) {
                Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();
                if (vibrantSwatch != null) {
                    outerLayout.setBackgroundColor(vibrantSwatch.getRgb());
                    titleText.setTextColor(vibrantSwatch.getTitleTextColor());
                    bodyText.setTextColor(vibrantSwatch.getBodyTextColor());
                }
            }
        });
    }
}

This whole sample would result a screen like this:

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.

Mohit Gupt

Born in New Delhi, India. A software engineer by profession, an android enthusiast and an evangelist. My motive here is to create a group of skilled developers, who can develop something new and good. Reason being programming is my passion, and also it feels good to make a device do something you want. In a very short span of time professionally I have worked with many tech firms. As of now too, I am employed as a senior engineer in a leading tech company. In total I may have worked on more than 20 projects professionally, and whenever I get spare time I share my thoughts here at Truiton.