Applying a mask to a single overlay view without masking the entire activity

Question

I have a simple activity with a green background and I am trying to provide a red overlay with a transparent circular area. Here is the effect I am trying to accomplish:

Expected Image

With the code I have found on the internet, this is what I see:

Result of code

What appears to be happening is PorterDuff applies itself to all views in the activity instead of the one that I distinctly tell it to. Many of the posts on Stack have been about masking a bitmap with another bitmap and I am trying to mask an part of a view with a programmatically created circular shape. Here is the code I am attempting to use:

public class ClippingTestActivity extends Activity {
    private Paint mPaint;
    ClippingView ddd;
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.test);
        View v = new View(this.getBaseContext());
        v.setBackgroundColor(Color.GREEN);
        this.addContentView(v, new  LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));

         ClippingView r = new ClippingView(this.getBaseContext());
        r.setBackgroundColor(Color.RED);   
        this.addContentView(r, new   LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));
    }

}

    public class ClippingView extends View {
    Paint paint = new Paint();
        Path path = new Path();
        public ClippingView(Context context) {
    super(context);
    }
    @Override
    public void onDraw(Canvas canvas) {
    super.onDraw( canvas );

        paint.setColor(Color.TRANSPARENT);
        paint.setStyle(Style.FILL);

        paint.setXfermode( new PorterDuffXfermode( Mode.CLEAR ) );
        int cx = 200;
        int cy = 200;
        int radius = 50;
        canvas.drawCircle( cx, cy, radius, paint );
    }
}

with the layout xml file being as such

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res/com.appspot.scruffapp" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent"         
 android:layout_centerHorizontal="true"
 android:background="#ff0000"> 
 </RelativeLayout> 

Does anyone know how to accomplish the effect?

Answer 1

Okay. With the help of a friend I figured it out. Turns out I needed to create a new canvas that was empty and pass that around from function to function and draw the canvas on a new view which gets added later. This is the code that worked for me:

Bitmap circle = DrawView.makeCircle(drawable);
Bitmap overlayBg = DrawView.makeOverlayBg(canvas.getWidth(),canvas.getHeight());

Bitmap finalImage = Bitmap.createBitmap(canvas.getWidth(),canvas.getHeight(), Bitmap.Config.ARGB_8888);

final android.graphics.Canvas tmpCanvas = new android.graphics.Canvas(finalImage);
tmpCanvas.drawBitmap(overlayBg, 0, 0, null);

final android.graphics.Paint paint = new android.graphics.Paint();
paint.setXfermode(new android.graphics.PorterDuffXfermode(Mode.DST_OUT));
tmpCanvas.drawBitmap(circle, cx - radius, cy - radius, paint);

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