Android How to set dynamic background color from specific Image

user_10663685 0
Viewed 1614

I've seen some apps like DataDex that I suppose they have something like Dynamic Color for the Card Views and Background as we can see here :

enter image description here

This color also applies to the detail view :

enter image description here

I suppose that these colors are generated from the IMAGE itself, but I don't know which library or API is using. Any hint?

android-cardview android-fragments android-studio android
1 Answers

You can use Dynamic Color using Palettes. Material Design encourages the dynamic use of color, especially when you have rich images to work with. The new Palette support library lets you extract a small set of colors from an image to style your UI controls to match; creating an immersive experience.

You can implement Palettes two ways:

Synchronously:

Palette palette = Palette.from(bitmap).generate();
// OR
Palette palette = Palette.from(bitmap).maximumColorCount(numberOfColors).generate();

The passed in the bitmap is the image from which you want to extract the colors. By default, it will use a maximum palette size of 16 colors. We can then use the colors as shown below.

// Pick one of the swatches
Palette.Swatch vibrant = palette.getVibrantSwatch();
if (vibrant != null) {
    // Set the background color of a layout based on the vibrant color
    containerView.setBackgroundColor(vibrant.getRgb());
    // Update the title TextView with the proper text color
    titleView.setTextColor(vibrant.getTitleTextColor());
}

Asynchronously:

By passing in a PaletteAsyncListener to the generate method, it will now generate the palette asynchronously using an AsyncTask to gather the Palette swatch information from the bitmap:

// This is the quick and easy integration path. 
// May not be optimal (since you're dipping in and out of threads)
Palette.from(bitmap).maximumColorCount(numberOfColors).generate(new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
         // Get the "vibrant" color swatch based on the bitmap
         Palette.Swatch vibrant = palette.getVibrantSwatch();
          if (vibrant != null) {
              // Set the background color of a layout based on the vibrant color
              containerView.setBackgroundColor(vibrant.getRgb());
              // Update the title TextView with the proper text color
              titleView.setTextColor(vibrant.getTitleTextColor());
          }
    }
});

For more info, please check the documentation.

user_32699580
Related