v7.palette to extract colors from images. now my problem is i am limited to only one swatch, and my question is how to get all the swatches allowing the palette to extract all the colors from the image and using that color .Please help
N.B: Everything is working fine,Palette is working fine but with a small collection of colors
public void updateColor(){
final Bitmap bitmap = mImageFetcher.getArtwork(Utils.getAlbumName(),
Utils.getCurrentAlbumId(), Utils.getArtistName());
Palette palette = Palette.generate(bitmap);
// Getting the different types of colors from the Image
Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();
// Adding the colors to the TextViews.
if(vibrantSwatch!=null) {
// Changing the background color of the toolbar to Vibrant Light Swatch
toolbar.setBackgroundDrawable(new ColorDrawable(vibrantSwatch.getRgb()));
if (Build.VERSION.SDK_INT >= 21) { // setStatusBarColor only works above API 21!
getWindow().setStatusBarColor(vibrantSwatch.getRgb());
}
}
}
Palettes intend is to extract the main colors not to give you a distribution of colors. You will have to look elsewhere for such a feature.
Check out Color Extractor (https://github.com/RacZo/ColorExtractor), it is a little app that I build as a proof of concept. It shows how to use the new Palette and Palette Builder classes to get colors and swatches from an image.
Palette has a method getSwatches() which will return a list of Swatches.
(maybe this method did not exist when this question was asked)
Related
Hi guys, i'm trying to make ActionBar the same as in the image above (with this "wave"), where the red color can be changed at run time. I tried to use GradientDrawable (code below), but the gradient effect was not cool and it's not what i need.
GradientDrawable gd = new GradientDrawable(
GradientDrawable.Orientation.LEFT_RIGHT,
new int[] {cor, Color.WHITE});
gd.setCornerRadius(0f);
actionBar.setBackgroundDrawable(gd);
Any idea?
I'm not completly sure, but it can be done using custom drawable.xml something like this. Even, I think that you would have mix some drawables to get the image that you're posting.
An alternative is having the image in png or jpg that you want to set to actionbar and code this. Regards!
I created the red part of the image above at https://vectr.com (.svg).
in Android Studio, i added a new shape_action_bar.xml (vector asset), from the created image.
in the activity I added the following code:
Drawable drawable = getNavigationController().getResources().getDrawable(R.drawable.shape_action_bar);
ColorFilter color = new PorterDuffColorFilter(selected_color, PorterDuff.Mode.SRC_ATOP );
drawable.setColorFilter(color);
actionBar.setBackgroundDrawable(drawable);
The shape will change color according to the desired color. Thankss
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 :
This color also applies to the detail view :
I suppose that these colors are generated from the IMAGE itself, but I don't know which library or API is using. Any hint?
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.
I make Viewpager and there is only ImageView.
that images from server. So it can be bright or dark.
and there is Layout for notice current page / totalPage like this.
Now I want to make if Image is bright, notice layout make dark.
and if Image is dark, notice layout make bright.
So. My Question is
How can I know current image is bright or dark?
And How I can make complementary color from image?
The Android Support Library r21 and above includes the Palette class, which lets you extract prominent colors from an image. To extract these colors, pass a Bitmap object to the Palette.generate() static method in the background thread where you load your images. If you can't use that thread, call the Palette.generateAsync() method and provide a listener instead.
To use the Palette class in your project, add the following Gradle dependency to your app's module:
implementation 'androidx.palette:palette:$version'
To get the color from image:
Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
public void onGenerated(Palette palette) {
// Do something with colors...
}
});
The palette library attempts to extract the following six color profiles:
Light Vibrant,
Vibrant,
Dark Vibrant,
Light Muted,
Muted and
Dark Muted.
Finding complementary color is very simple in RGB model. For any given color, for example, red (#FF0000) you need to find the color, which, after being added to red, creates white (0xFFFFFF). Naturally, all you need to do, is subtract red from white and get cyan (0xFFFFFF - 0xFF0000 = 0x00FFFF).
is there any systemical possible way (i mean in code) to make a blur background depends on the image user open, the color must be similar to the image that will open.
for example, the background on this page is grey.
You will need to get the dominant color from the image you are using then create a gradient drawable between a starting color and your dominant color. There are multiple ways to find dominant colors which you can read up on here: Finding the dominant color of an image in an Android #drawable
From there you create a drawable and set the background of your view to that drawable:
// get the drawable from the image view
// could also be pulled from resources if available
Bitmap bm=((BitmapDrawable)imageView.getDrawable()).getBitmap();
int color = getDominantColor(bm);
GradientDrawable gradient = new GradientDrawable(
GradientDrawable.Orientation.TOP_BOTTOM,
new int[] {0xFFF,color});
gradient.setCornerRadius(15f);
contentView.setBackground(gradient);
See this library to make blur image https://github.com/wasabeef/Blurry
I know that using third party library, it is possible to use SVG image in Android.
Library like: svg-android
The code to load SVG image is like below:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Create a new ImageView
ImageView imageView = new ImageView(this);
// Set the background color to white
imageView.setBackgroundColor(Color.WHITE);
// Parse the SVG file from the resource
SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.android);
// Get a drawable from the parsed SVG and set it as the drawable for the ImageView
imageView.setImageDrawable(svg.createPictureDrawable());
// Set the ImageView as the content view for the Activity
setContentView(imageView);
}
It's working fine. I'm able to see the image. But now I want to change the color for the svg image at runtime.
For that I tried the code below as mentioned in the same project description.
// 0xFF9FBF3B is the hex code for the existing Android green, 0xFF1756c9 is the new blue color
SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.android, 0xFF9FBF3B, 0xFF1756c9);
But with that I am not able to see the change in the color. So I would like to know how it is possible to change the color dynamically in Java file.
I know it's kind of late but I also had this issue and was able to fix this issue using the setColorFilter(int color, PorterDuff.Mode mode) method.
Example:
imageView.setColorFilter(getResources().getColor(android.R.color.black), PorterDuff.Mode.SRC_IN);
I got where is the problem.
The issue is with the color code i am using in svg file.
Its not exactly 0xFF9FBF3B but #9FBF3B
But during java code you have to write it with ARGB value (e.g. 0xFF9FBF3B).
I have updated it and its work fine now. I can able to change the color of svg file with same code.
Hope this will also help others to identify the actual case while changing the color of the SVG image at runtime.
Using the answer of Antlip Dev in Kotlin.
package com.example.... // Your package.
import android.graphics.PorterDuff
import android.widget.ImageView
import androidx.annotation.ColorRes
import androidx.core.content.ContextCompat
fun ImageView.setSvgColor(#ColorRes color: Int) =
setColorFilter(ContextCompat.getColor(context, color), PorterDuff.Mode.SRC_IN)
Usage:
view.your_image.setSvgColor(R.color.gray)
what #Antlip Dev said is correct, but that method is deprecated now.
This is the updated version:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
drawable.setColorFilter(new BlendModeColorFilter(color, BlendMode.SRC_ATOP));
} else {
drawable.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
}
You can use: drawableTint to change the color
This worked for me DrawableCompat.setTint(imageView.getDrawable(),ContextCompat.getColor(getApplicationContext(), R.color.colorAccent))