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:

What I want:

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.

Answer

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:

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:

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: