Making Overlaid image transparent on touch in Android?

Question

I need help on making the touched areas of bitmap image transparent(seems like erasing) while I am moving my finger on that image.

I am having a PNG file with Alpha channel in it. I want to turn the touched pixels to transparent so that, the user can feel that he is actually erasing it.

For this I am using frame layout to load 2 layers. Down layer is for content and upper layer is an Imageview for erasing. I need erase the upper layer when user touch and move his finger on it.

I am not getting how to make it transparent. can anyone please help me in this. If possible please direct me to any sample code, as I am very new to this image processing.

Thanks in advance.

Answer 1

You need to set the PorterDuff mode on a Paint object:

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC)) 

and draw with Color.TRANSPARENT

Also see this thread in the Android developer group: http://groups.google.com/group/android-developers/browse_thread/thread/5b0a498664b17aa0/de4aab6fb7e97e38?lnk=gst&q=erase+transparent#

Answer 2

ImageView has a setAlpha method which takes an integer between 0 and 255. I don't know which is transparent and which is opaque but it shouldn't take a long time to try :P

Answer 3

It works but didn't Draw Path.

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BlurMaskFilter.Blur;
import android.graphics.BitmapFactory;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;

public class StartActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new TouchView(this));


}

class TouchView extends View{
    Bitmap bgr;
    Bitmap overlayDefault;
    Bitmap overlay;
    Paint pTouch;
    int X = -100;
    int Y = -100;
    Canvas c2;

    public TouchView(Context context) {
        super(context);

        bgr = BitmapFactory.decodeResource(getResources(),R.drawable.bgr);
        overlayDefault = BitmapFactory.decodeResource(getResources(),R.drawable.over);
        overlay = BitmapFactory.decodeResource(getResources(),R.drawable.over).copy(Config.ARGB_8888, true);  
        c2 = new Canvas(overlay);

        pTouch = new Paint(Paint.ANTI_ALIAS_FLAG);         
        pTouch.setXfermode(new PorterDuffXfermode(Mode.SRC_OUT)); 
        pTouch.setColor(Color.TRANSPARENT);
        pTouch.setMaskFilter(new BlurMaskFilter(15, Blur.NORMAL));


    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {

        switch (ev.getAction()) {

            case MotionEvent.ACTION_DOWN: {

                X = (int) ev.getX();
                Y = (int) ev.getY();
                invalidate();

                break;
            }

            case MotionEvent.ACTION_MOVE: {

                    X = (int) ev.getX();
                    Y = (int) ev.getY();
                    invalidate();
                    break;

            }           

            case MotionEvent.ACTION_UP:

                break;

        }
        return true;
    }


    @Override
    public void onDraw(Canvas canvas){
        super.onDraw(canvas);

        //draw background
        canvas.drawBitmap(bgr, 0, 0, null);
        //copy the default overlay into temporary overlay and punch a hole in it                          
        c2.drawBitmap(overlayDefault, 0, 0, null); //exclude this line to show all as you draw
        c2.drawCircle(X, Y, 80, pTouch);
        //draw the overlay over the background  
        canvas.drawBitmap(overlay, 0, 0, null);

    }


}


}