Dynamic color is an important part of your mobile app especially when your app is full of images. With the release of android lollipop there is a support library using which you can change your application background and text colors according to your images and that is new Palette Support Library. Using the support library you can access a Bitmap image and extract colors from it. The library provides you Vibrant and muted tones of the image. It also provides you the foreground colors for readablity of your text.
Firstly add the dependency to build.gradle file
|
1 2 3 |
dependencies{ compile 'com.android.support:palette-v7:23.1.1' } |
Now take a Bitmap object of your image and generate a palette object. Be sure thst the Bitmap is not null or Recycled because if it is then it will throw a IllegalArgumentException.
|
1 2 3 4 5 6 7 8 9 10 11 |
ImageView image= (ImageView) findViewById(R.id.imageView); BitmapDrawable d = (BitmapDrawable)image.getBackground(); Bitmap bitmap = d.getBitmap(); //Or if your drawable is static use Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_image); //Generate palette object from bitmap if (myBitmap != null && !myBitmap.isRecycled()) { Palette palette = Palette.from(myBitmap).generate(); } |
You can have six colors profiles and you can get them from there getter methods. Developers generally use vibrant colors but usage is strictly based on users choice. These methods returns their corresponding int rgb color.
- Vibrant – getVibrantColor()
- Vibrant Light – getLightVibrantColor()
- Vibrant Dark – getDarkVibrantColor()
- Muted – getMutedColor()
- Muted Light – getLightMutedColor()
- Muted dark – getDarkMutedColor()
Palette Swatch:
Represents a color swatch generated from an image’s palette. The corresponding (int) rgb can be retrieved from getRgb(). The Palette.Swatch class gives you the vibrated and muted tones of image but also give the text color that can be uded on that Swatch by getBodyTextColor(). It also includes the number of pixels of that color in the image.
|
1 2 3 4 5 6 7 8 9 10 |
Palette.Swatch swatch = palette.getVibrantSwatch(); // Gets the number of pixels represented by this swatch int pixelCount = swatch.getPopulation(); // Gets an appropriate title text color int titleTextColor = swatch.getTitleTextColor(); // Gets an appropriate body text color int bodyTextColor = swatch.getBodyTextColor(); |
You can get all the six colors using the built-in getter methods as
|
1 2 3 4 5 6 7 8 |
Palette palette = Palette.from(bitmap).generate(); Palette.Swatch vibrantSwatch = palette.getVibrantSwatch(); Palette.Swatch vibrantLightSwatch = palette.getLightVibrantSwatch(); Palette.Swatch vibrantDarkSwatch = palette.getDarkVibrantSwatch(); Palette.Swatch mutedSwatch = palette.getMutedSwatch(); Palette.Swatch mutedLightSwatch = palette.getLightMutedSwatch(); Palette.Swatch mutedDarkSwatch = palette.getDarkMutedSwatch(); |
Here are the background an example when backgroung of layout is changed corresponding to image using getDarkVibrantSwatch().
