Palette – how to make colorful Android applications

At Google I/O 2014, Google announced the new Android 5.0 Lollipop and a whole new look for all Android applications, called Material Design. This is the second complex UI solution from Google – the first was Holo, announced with Android 4.0 (Ice Cream Sandwich), but now we have a whole new level of quality. Every single UI component is polished, gorgeous, and accompanied by a new set of design guidelines representing the new trends in mobile application design: flat, and colorful. 

image_1.jpeg

If there’s one word that characterizes the new Android UI, it’s colors: colored actionBar, colored backgrounds, colored titles, etc. It is easy to set defined colors in resources but sometimes we have dynamically changed bitmaps. So how do we dynamically change bitmaps? Google has presented their new support library:

What is Palette?

Palette is the helper to extract prominent colors from an image. We can extract colors as follows:

  • Vibrant
  • Vibrant Dark – mix dark and vibrant colors
  • Vibrant Light – mix light and vibrant colors
  • Muted
  • Muted Dark – mix dark and muted colors
  • Muted Light – mix light and muted colors

As an example, I have created two tests with two different logos, which you can see in the screenshots below:

image_2.jpeg

Vibrant colors work well as backgrounds for all buttons, bars and frames. Muted colors are better for text and are easier on the eyes.

How to use it?

If you are using AndroidStudio you can paste one line into your Gradle file:

compile “com.android.support:palette-v7:21.0.+”

Next you can simply generate Palette objects by four static methods:

* generate (Bitmap bitmap)

* generate (Bitmap bitmap, int numColors)

* generateAsync (Bitmap bitmap, Palette.PaletteAsyncListener listener)

* generateAsync (Bitmap bitmap, int numColors, Palette.PaletteAsyncListener listener)

They can create Palette objects synchronized or we can do it on a background thread thanks to AsyncTasks. We can also decide how many colors should be used to generate Palette by providing the numColors parameter.

Good values for numColors depend on the source image type. For landscapes, a good values are in the range 12-16. For images which are largely made up of people’s faces then this value should be increased to 24-32.

Use this properly, and you will receive a Palette with all generated colors.

Enjoy using this powerful new feature to make beautiful Android applications!