Dynamic Colors With Glide Library and Android Palette

Recently, I was required to style Android views in different colors for each screen according to a dominant color chosen by an image in those particular screens. This might sound a little confusing, so I have made a sample project just to show you what I mean and how I did it.

In the sample app, we have a list of different movie posters on the first screen. From there, we can choose any movie poster and the second screen will display that movie poster with some information about the movie. Meanwhile, android views on the detail screen (second screen) will take on the dominant color of that movie poster. This means the colors of android views of the different posters have different colors.

Let’s get started! To make it simple, we will only focus on three android views: Status bar, Action bar, and View. By combining Glide Library and Android Palette, we can make our app look more interesting. Below are screenshots from the sample app.

Selecting Colors with the Palette API | Android Developers

The palette library is a support library that extracts prominent colors from images to help you create visually…
developer.android.com

A Palette object gives you access to the primary colors in an image, as well as the corresponding colors for overlaid text. Use palettes to design your app’s style and to dynamically change your app’s color scheme based on a given source image.

So, we use Glide library to request images asynchronously, but also it helps to keep these images in the cache which will help the app to run more smoothly. After that, we use Android Palette to get the dominant color of the selected image.

Glide Implementation

In order to get the Android Palette image, we need to get the bitmap of the image from Glide. Glide v3 and Glide v4 are quite different in usage and have a different ways of obtaining bitmap resources.

• Glide Version 3

If you use Glide version 3, you can follow the instructions below (Glide documentation):

Glide v3 requires additional classes to get bitmap resources. The required additional classes mentioned in the document above are:

Implementation:

It’s important to notice that there are additional method calls:

• asBitmap()
• transcode(new PaletteBitmapTranscoder(mContext), PaletteBitmap.class)
• into imageViewTarget class

As can be seen, in setResource() override method, we get PaletteBitmap which is the bitmap that will be used in the Android Palette.

• Glide Version 4

In this version of Glide, we don’t have to create additional classes: PaletteBitmap, PaletteBitmapResource and PaletteBitmapTranscoder

— Import library in Gradle:

Latest: https://github.com/bumptech/glide

— Create AppGlideModule class

— Implementation

In our detail activity screen, we can get the main android palette and use it according to our needs.

Style the views

• Style Status bar and Action bar

Here, we can use manipulateColor as a method to get darker and lighter colors based on the color given (our palette color) with the provided factor.

• Style view background

Result

Access to sample project via:

I hope this article can help you understand more about Glide and Android palette. Have fun styling!