CODEWITHSUNDEEP
androidimageviewgradient
Malfunction
Malfunction

Reputation: 1334

Imageview set color filter to gradient

I have a white image that I'd like to color with a gradient. Instead of generating a bunch of images each colored with a specific gradient, I'd like to do this in code (not xml).

To change an image's color, I use 

imageView.setColorFilter(Color.GREEN);

And this works fine. But how can I apply a gradient color instead of a solid color? LinearGradient doesn't help, because setColorFilter can't be applied to Shader objects.

EDIT: This is the image I have:

enter image description here

This is what I want:

enter image description here

And this is what I'm getting:

enter image description here

Upvotes: 30

Views: 15724

Answers (3)

LaurentY
LaurentY

Reputation: 7653

You have to get Bitmap of your ImageView and redraw same Bitmap with Shader

public void clickButton(View v){
    Bitmap myBitmap = ((BitmapDrawable)myImageView.getDrawable()).getBitmap();

    Bitmap newBitmap = addGradient(myBitmap);
    myImageView.setImageDrawable(new BitmapDrawable(getResources(), newBitmap));
}


public Bitmap addGradient(Bitmap originalBitmap) {
    int width = originalBitmap.getWidth();
    int height = originalBitmap.getHeight();
    Bitmap updatedBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(updatedBitmap);

    canvas.drawBitmap(originalBitmap, 0, 0, null);

    Paint paint = new Paint();
    LinearGradient shader = new LinearGradient(0, 0, 0, height, 0xFFF0D252, 0xFFF07305, Shader.TileMode.CLAMP);
    paint.setShader(shader);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawRect(0, 0, width, height, paint);

    return updatedBitmap;
}

UPDATE 3 I changed: colors of gradient, LinearGradient width = 0 and PorterDuffXfermode. Here a good picture to understand PorterDuffXfermode: enter image description here

Upvotes: 54

Arihant Dugar
Arihant Dugar

Reputation: 31

Create a XML file , and place it in the drawable folder .

gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:startColor="#CCb1e7fa"
    android:centerColor="#B3ffffff"
    android:endColor="#CCb1e7fa"
    android:angle="180" />
<corners android:radius="5dp" />

</shape>

Next add this as a background to your image view

    <ImageView
            android:id="@+id/umageview1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/gradient"
            android:layout_centerHorizontal="true"
            />

Upvotes: -5

Alexandre Martin
Alexandre Martin

Reputation: 1502

You could use a selector

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout         xmlns:android="http://schemas.android.com/apk/res/.    android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/main_header_selector"> 
</LinearLayout>

main_header_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector     xmlns:android="http://schemas.android.com/apk/res/.     android">
<item>
    <shape>
        <gradient
        android:angle="90"
        android:startColor="#FFFF0000"
        android:endColor="#FF00FF00"
        android:type="linear" />
    </shape>
</item>
</selector>

The same background can be applied to an ImageView.

To define and use selector dynamically, refer to this link : Dynamically defining and using selectors

Upvotes: -4

Related Questions