How to draw with finger in View without drawing in transparent parts?

Question

Let's say that I have 500 x 500 ImageView, half of ImageView are red second part is transparent. I want draw with finger only in non transparent part of ImageVIew so if I draw in transparent part it will be not visible, like this image. Is it possible ?

I tried but this code don't work correct.

public class DrawingView extends ImageView {

        private boolean isTransparent;
        private float mX, mY;
        private static final float TOUCH_TOLERANCE = 4;
        private Bitmap mBitmap;
        private Canvas mCanvas;
        private Path mPath;
        private Paint mBitmapPaint;
        Context mContext;
        private Path circlePath;

        public DrawingView(Context c) {
            super(c);
            mContext = c;
            mPath = new Path();
            mBitmapPaint = new Paint(Paint.DITHER_FLAG);
            circlePath = new Path();
        }

        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_4444);
            mCanvas = new Canvas(mBitmap);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            if (mBitmap != null && canvas != null && !isTransparent) {
                canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
                canvas.drawPath(mPath, mPaint);
            }
        }

        private void touch_start(float x, float y) {
            mPath.reset();
            mPath.moveTo(x, y);
            mX = x;
            mY = y;
        }

        private void touch_move(float x, float y) {
            float dx = Math.abs(x - mX);
            float dy = Math.abs(y - mY);
            if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
                if(mBitmap.getPixel((int)x, (int)y) == Color.TRANSPARENT || mBitmap.getPixel((int)mY, (int)mY) == Color.TRANSPARENT) {
                    isTransparent = true;
                } else {
                    isTransparent = false;
                }

                mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
                mX = x;
                mY = y;

                circlePath.reset();
                circlePath.addCircle(mX, mY, 30, Path.Direction.CW);
            }
        }

        private void touch_up() {
            mPath.lineTo(mX, mY);
            circlePath.reset();
            mCanvas.drawPath(mPath, mPaint);
            mPath.reset();
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            float x = event.getX();
            float y = event.getY();

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    touch_start(x, y);
                    invalidate();
                    break;
                case MotionEvent.ACTION_MOVE:
                    touch_move(x, y);
                    invalidate();
                    break;
                case MotionEvent.ACTION_UP:
                    touch_up();
                    invalidate();
                    break;
            }
            return true;
        }
    }

Answer 1

I don't know where mPaint gets initialized, but since mPaint is used to draw the finger trace, putting this line in should do what you want:

    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));

See this image for explanation.