My idea is to overlap 2 images on top of each other and upon onTouch, the top image should be made transparent on that touched radius, thus exposing the bottom image.

This is how I overlay the 2 images:

        Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), bmp1.getConfig());
        Canvas canvas = new Canvas(bmOverlay);
        canvas.drawBitmap(bmp1, new Matrix(), null);
        canvas.drawBitmap(bmp2, new Matrix(), null);

I have looked into this post and have a Paint like below to make it transparent:

        mPaint = new Paint();
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
        mPaint.setColor(Color.TRANSPARENT);
        mPaint.setAntiAlias(true); 

public void onDraw(Canvas canvas) {
            canvas.drawCircle(40, 40, 30, mPaint); //hardcode to test
}

Problem is, I think the circle straight away make the 2 images transparent on the defined radius, how can I make only the top bitmap transparent?

Edit
Report