Posted on

Android change colors with Palette


Android Color Palette

Do you feel bored of the same color scheme across the app? It has been like this since the very beginning and you have no other choice but stick with it. Because it’s a brand color, right? But currently many apps have neutral white/grey colors. Those could not be technically be brand colors, are they? Hi, my name is Ihor and today we’re going to make our app look amazing with Android Palette

There’s a real problem up there. The problem is there’s so many apps and brands that there’s not enough colors for them. Plus most choose variations of blue, because it’s safe. Just open the list of your app and tell me what colors do you see most? Blue, light blue, dark blue, white, green, red, blue. And if you apply those colors to toolbar, status bar, then all apps would have almost the same colors.

But people came up with the solution. They said: “f%$k it, just use white!”. And we see many apps with white/grey color scheme. But we’re going to make our apps change color scheme depending on content, what can be as amazing?

Android Palette

This class picks the main color the image and from there you can apply it to your toolbar/status bar. There comes the requirement – you gotta have an image. But for most apps, where everything built around images it’s a great way to go. And of course this should be the only image on the screen or it should be the biggest. Basically we wouldn’t apply it to the main feed/list of images, perfect for details view.

I modified my app from the previous post. I talked about the implementing main activity image list with translucent status/navigation bars in this post. What I added today is details activity with background fitting the image vibrant color and nav bar as well. That’s what I got

Android Palette

As you see I didn’t go completely nuts with colors, I picked dark vibrant color from images and applied it to main background and navigation bar as well. Image is drawn under the translucent status bar there. I didn’t add a toolbar because it’s unnecessary plus it looks ugly when there’s a toolbar with activity name just … because, it’s so 2012. Minimal distraction, that’s the way I like it.

Color types

There’s seven different types of colors we can extract

  • Dominant color
  • Muted color
  • Light Muted color
  • Dark Muted color
  • Vibrant color
  • Light Vibrant color
  • Dark Vibrant color

and you got according getters. Plus it has some amazing methods like getTitleTextColor where you get the best text color for this background!

Extract a color

Let’s get to actual work. Palette api is extremely simple to use and its Android 7 compatible! Just add this line into build.gradle

And we can extract colors.

I picked a dark vibrant color, just liked it more. You can clone this GitHub repo and have fun yourself. Just check what colors you like most. Uncomment methods in extractColor method in Adapter class and test yourself. That’s the whole code basically

Two lines, super simple. You just need to give it default color if it doesn’t find any, I used primary theme color.

Do in advance

The key point in here is when you extract the color. We do it in Main Activity. Why? Because by the time we open Details Activity we want to have color ready in onCreate method. Otherwise your would have to wait for bitmap to be loaded in Details activity and extract it then, most likely you would end up seeing changes of colors in run time, which is unacceptable. But Backdrops app change it in run time using circular reveal which looks cool.

An I do it the first time image is loaded in Main Activity with Glide. Since I use RecyclerView the code is inside onBindViewHolder method

The basics are simple – get a movie for position, load image and extract dark vibrant color. If color is already extracted for this movie – don’t extract. But since we need to give palette a Bitmap we create this ImageViewTarget from Glide handle setting bitmap manually by overriding setResource method. We pass GlideDrawable to extractColor method and that’s it

Now we pass this color to Details Activity via Bundle, I just made the whole Movie class Parcelable

Details Activity part

And the final part is to set colors in Details Activity. I change only two colors – text background and navigation bar. That’s the code

As you see I get the same color, but nav bar is darker in result. That’s because nav bar it’s a view under translucent nav bar. But you can easily set nav bar color directly, but it’s supported starting form Lollipop.

And might require to make some pre L optimizations with layout. Because pre L doen’t support translucent status/navigation bars.

Enjoy uniqueness

As you see it’s very simple to use Palette api and get results quickly. Basically what you get is all your screens look unique by applying different colors. That’s pretty amazing, you don’t get bored of design and most importantly you don’t get sick of it while you still developing your app. Keeps it fresh!

The resulting theme got mostly dark, but we can extract brighter colors and make text black.

 

Once again go ahead and download this GitHub repo and try it yourself. This blog post doesn’t cover the whole app. If you want to read to more about translucent status/navigation bars, drawing under them, then check out this post, it’s all about that!

Thanks for reading, if you enjoy the work I’m doing, subscribe to receive weekly posts from me! Share if you think that somebody will benefit from it as well