Android: Change background colour to match image palette

Visual design is the main aspect when it comes to designing views and layouts of any app. Android lollipop introduced Palette library that can be used to extract colors from the images. Pallette api can extract dark, light and muted colors. These colors can be used to change app color scheme like status bar, app bar, accent or background.

We will be using Glide library to asynchronously load images and also cache them. Once Glide loads the bitmap we can use Palette  api to extract the colors from the bitmap.

Glide and Palette Dependency

Palette Color Extraction

Palette library can extract six color profiles and they are:

  • Light Vibrant – getLightVibrantColor()

  • Vibrant – getVibrantColor()

  • Dark Vibrant – getDarkVibrantColor()

  • Light Muted – getLightMutedColor()

  • Muted – getMutedColor()

  • Dark Muted – getDarkMutedColor()

These color profiles are illustrated in this image. I have taken an image for reference and created all six profiles to give you an idea of these color profiles.

Android palette color profiles

Android palette color profiles

 

Let’s see now how to extract color profiles using Palette api.

Code to change background color

Create new Android Project with empty activity.

Create layouts for our activity.

activity_palette.xml

content_palette.xml

Activity Code: PaletteActivity.java

 

Leave a Reply

%d bloggers like this: