Android Studio Question posted in
The official documentation can be found here.

How to set filter property in ImageView Android studio

I have a yellow sparkline png and I would like to change the filter by adding some css. Colors will change according to positive or negative number.

So, if the number is negative, the line should be:

CSS

filter: hue-rotate(300deg) saturate(210%) brightness(0.7) contrast(170%);

If positive:

filter: hue-rotate(85deg) saturate(80%) brightness(0.85);

ImageView:

       <ImageView
                android:layout_width="match_parent"
                android:layout_height="36dp"
                android:id="@+id/sparkline"
                android:layout_toRightOf="@+id/coin_icon"
                android:src="@drawable/line_24"
                android:layout_marginRight="5dp"
                />

MainActivity.Java

ImageView sparkline;

sparkline = itemView.findViewById(R.id.sparkline);

if(datum.getQuote().getUSD().getPercentChange24h() < 0.000){
  ///red
}else{
    //green

 }

EDIT:

What I have:

enter image description here

What I want:

enter image description here

EDIT:

Now I used an ImageFilterView:

 <androidx.constraintlayout.utils.widget.ImageFilterView
                android:layout_width="80dp"
                android:layout_height="50dp"
                android:id="@+id/sparkline"
                android:layout_marginRight="2dp"
                app:saturation="80"
                app:brightness="0.85"
                android:src="@drawable/btc_spike" />

But I still need to add the hue-rotate(300deg)
I couldn’t find anything yet to change the color.

enter image description here

Tags:

2

Answers


  1. 0

    please try with below moethod hope it may help you

    public static void changeImageColor(Context ctx,ImageView img, int color){
        try {
//            img.setColorFilter(color);
            img.setColorFilter(color,PorterDuff.Mode.MULTIPLY);
        }catch (Exception e){
            e.printStackTrace();
        }
    }

    public static void changeImageColorNoMode(Context ctx,ImageView img, int color){
        try {
            img.setColorFilter(color);
        }catch (Exception e){
            e.printStackTrace();
        }
    }
    Login or Signup to reply.
  2. 0

    The HSB (Hue-Saturation-Brightness) Model is also alternatively known as HSV where V stands for Value. More details about HSB colour Model with a graphical description and the Hue Wheel can be found on this Medium.

    To apply an HSV Color filter on an ImageView you can use the method:

    public static int HSVToColor (float[] hsv)

    Convert HSV components to an ARGB color. Alpha set to 0xFF.

    • hsv[0] is Hue ([0..360])
    • hsv[1] is Saturation ([0…1])
    • hsv[2] is Value ([0…1])

    If hsv values are out of range, they are pinned.

    All you need is to create this float[] array with the above ranges and apply it into ImageView like below:

    ImageView imageView = findViewById(R.id.imageView);
//hsv[0] is Hue [0 .. 360) hsv[1] is Saturation [0...1] hsv[2] is Value [0...1]
float[] hsv = new float[]{85f, 0.8f, 0.85f};
imageView.setColorFilter(Color.HSVToColor(hsv));

    Result based on your 1st (yellow image) before and after applying the color Filter (green image) will be:

    orange_line

    green_line

    If we pick a pixel sample from the attached Red/Green images the RGB colors are for Red:R(209)G(63)B(84) and for Green:R(69)G(186)B(116). Now if we convert these RGB values to HSV values using an RGB to HSV color conversion tool we get the below:

    Red

    RGB: R(209)G(63)B(84) -> HSV: H(351deg)S(69.9%)V(82%)

    In code:

    float[] hsv = new float[]{351f, 0.699f, 0.82f};
imageView.setColorFilter(Color.HSVToColor(hsv));

    Result:

    red_line

    Green

    RGB: R(69)G(186)B(116) -> HSV: H(144deg)S(62.9%)V(72.9%)

    In code:

    float[] hsv = new float[]{144f, 0.629f, 0.729f};
imageView.setColorFilter(Color.HSVToColor(hsv));

    Result:

    green_line

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search