How to put 2 imageViews, one on top of another, that will blend them both?

Question

Background

I have 2 imageViews, one on top of another, that have an animation together . I need them to blend with each other, using the "Multiply" effect, during this animation.

Something similar to this question which is about colors, yet with images (VectorDrawable in my case, but I can use PNG instead if needed).

Here's a sketch to demonstrate what I'd like to do:

Notice that the part of the images that overlap is darker than the original color of the arrows.

The problem

So far I can't find a way to do it. I know of course how to put a view on top of another, but changing the color of a part of the bitmap, based on the other, is something I can't find.

What I've found

I tried to use :

imageView.getDrawable().setColorFilter(..., PorterDuff.Mode.MULTIPLY)

for both the ImageViews, but it doesn't seem to work. What it does is actually change the entire color of the imageView, merging with the color I provide as the parameter.

It makes sense, because it's just a colorFilter, similar to tint.

I also tried alpha for each of the ImageViews, but this also mean that a part of the ImageViews (the parts that don't overlap) will have a semi-transparent color.

I could theoretically get the bitmap of each of them, and then perform the filter on the result, but this is not practical as I need to show it during animation between the two.

The question

How can I blend the 2 imageViews ?

Answer 1

Since you're using VectorDrawable, Have you considered animating the drawable rather than the view?

https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html

Answer 2

try this:

public Bitmap combineImages(Bitmap frame, Bitmap image) {

            Bitmap cs = null;
            Bitmap rs = null;

            rs = Bitmap.createScaledBitmap(frame, image.getWidth(),
                    image.getHeight(), true);

            cs = Bitmap.createBitmap(rs.getWidth(), rs.getHeight(),
                    Bitmap.Config.RGB_565);

            Canvas comboImage = new Canvas(cs);

            comboImage.drawBitmap(image, 0, 0, null);
            comboImage.drawBitmap(rs, 0, 0, null);

            if (rs != null) {
                rs.recycle();
                rs = null;
            }
            Runtime.getRuntime().gc();

            return cs;
        }

Answer 3

OK, it seems it's probably not possible using 2 views, because of the way they work on Android, so instead, I want to show how to do it with a LayerDrawable instead:

public class LD extends LayerDrawable {
    private Paint p = new Paint();

    public LD(Drawable[] layers) {
        super(layers);
        p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        int count = canvas.saveLayer(null, null, Canvas.ALL_SAVE_FLAG);

        for (int i = 0, numberOfLayers = getNumberOfLayers(); i < numberOfLayers; ++i) {
            this.getDrawable(i).draw(canvas);
            canvas.saveLayer(null, p, Canvas.ALL_SAVE_FLAG);
        }
        canvas.restoreToCount(count);

        //original code:
        //int count = canvas.saveLayer(null, null, Canvas.ALL_SAVE_FLAG);
        //this.getDrawable(0).draw(canvas);
        //canvas.saveLayer(null, p, Canvas.ALL_SAVE_FLAG);
        //this.getDrawable(1).draw(canvas);
        //canvas.restoreToCount(count);
    }
}

Usage:

    ImageView imageView = (ImageView) findViewById(R.id.imageView);
    Drawable drawable1 = AppCompatResources.getDrawable(this, R.drawable....);
    Drawable drawable2 = AppCompatResources.getDrawable(this, R.drawable....);
    Drawable drawable3 = AppCompatResources.getDrawable(this, R.drawable....);

    LD layerDrawable = new LD(new Drawable[]{
            drawable1,
            drawable2,
            drawable3
    });
    imageView.setImageDrawable(layerDrawable);