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 bit 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 of the movie. Meanwhile, android views on the detail screen (second screen) will take on the dominant color of that movie poster. This means colors of android views of different poster 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.

What is Glide?

Glide supports fetching, decoding, and displaying video stills, images, and animated GIFs. Glide includes a flexible API that allows developers to plug in to almost any network stack. By default Glide uses a custom HttpUrlConnection based stack, but also includes utility libraries plug in to Google's Volley project or Square's OkHttp library instead.

Glide’s primary focus is on making scrolling any kind of a list of images as smooth and fast as possible, but Glide is also effective for almost any case where you need to fetch, resize, and display a remote image.

What is Palette?

Selecting Colors with the Palette API | Android Developers

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 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 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 different way of obtaining bitmap resource.

• Glide Version 3

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

bumptech/glide

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:

implementation 'com.github.bumptech.glide:glide:4.7.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1'

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:

vsay01/PopularMovie

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