When open the profile page of any person or group in Whatsapp, you will find that the color of the toolbar at top uses the color from the DP of the user or group. It looks good when you use extracted colors from image in your layout. Your layout will blend with the image and other content.
So here we can extract different colors from any image(bitmap) used in our application and use those colors effectively in our app throughout.

First of all there are main 6 type of color profiles in the image that we can extract.
- Vibrant
- Vibrant Dark
- Vibrant Light
- Muted
- Muted Dark
- Muted Light
Most used profile from above are Vibrant and Vibrant Dark. The reason is, vibrant colors are pure, bright, intense, saturated and high chroma color. They stand out in the image and easy to point out. Now if we use those colors in the layout along with the image, it will give a great look. Whatsapp is the best example of it as we discussed earlier.
Every profile(swatch) gives us following information that we can use in the application.
- population of that color in image
- hue, saturation, lightness
- body text color with sufficient contrast with the main color
- title text color with sufficient contrast with the main color
Now we look at the code to get the Palette from bitmap.
Bitmap b = null; b = BitmapFactory.decodeResource(getResources(), R.drawable.img1); Palette p = Palette.from(b).generate();
Here we get the Palette from image(bitmap). Now we extract main 6 different kind of color profile(swatch) from it.
Palette.Swatch psVibrant = p.getVibrantSwatch(); Palette.Swatch psVibrantLight = p.getLightVibrantSwatch(); Palette.Swatch psVibrantDark = p.getDarkVibrantSwatch(); Palette.Swatch psMuted = p.getMutedSwatch(); Palette.Swatch psMutedLight = p.getLightMutedSwatch(); Palette.Swatch psMutedDark = p.getDarkMutedSwatch();
Now we will extract 4 different values from these swatch as described earlier in the article. Here we will take psVibrant as an example.
int color = psVibrant.getRgb(); int population = psVibrant.getPopulation(); float[] hsl = psVibrant.getHsl(); int bodyTextColor = psVibrant.getBodyTextColor(); int titleTextColor = psVibrant.getTitleTextColor();
You can also get other colors from image other than above 6 by following code snippet.
List<Palette.Swatch> pss; pss = p.getSwatches(); for(int j = 0; j < pss.size(); j++) { Palette.Swatch ps = pss.get(j); int color = ps.getRgb(); int population = ps.getPopulation(); float[] hsl = ps.getHsl(); int bodyTextColor = ps.getBodyTextColor(); int titleTextColor = ps.getTitleTextColor(); }

Do you have this full source code .. ? I want to know the android manifest and also the layout.xml ? if you can share your code … im still new in android 🙂
It is very simple, try it out yourself!
how can download this application ?
You can create new project in Android Studio and copy paste this code.
I have a doubt.
For example if any image does not contain any of the swatch. If we apply that color to our background the application unfortunately stopped. Then how to best color based that image and apply to background automatically.
yes it will crash the app, you have to give some pre-defined color in case the app crash or you can use some random color. but you probably find at least 1 or 2 swatchs
Is it possible to use if() condition to Palette for best color picked up.
How to get this hashcode like #f6c500
You can try this https://stackoverflow.com/q/5026995