Draw radius corner Rect with transparent

Question

I working on QrCode Scanning using this library me.dm7.barcodescanner.

The problem is where i cant colored the background with transparent black and then the center should be transparent. i turn the center color to transparent to will disappear (of course because of transparent background).

It should be like 2nd Image where background is transparent black and the center is transparent with cornered radius Rect..

Code:

mFinderMaskPaint = new Paint();
mFinderMaskPaint.setColor(getResources().getColor(me.dm7.barcodescanner.core.R.color.viewfinder_mask));

..

public void drawViewFinderMask(Canvas canvas) {
     int width = canvas.getWidth();
     int height = canvas.getHeight();
     Rect framingRect = getFramingRect();

     RectF rectF = new RectF(framingRect.left, framingRect.top, framingRect.right, framingRect.bottom);
     canvas.drawRoundRect(rectF, 100, 100, mFinderMaskPaint);

//     canvas.drawRect(0, 0, width, framingRect.top, mFinderMaskPaint);
//     canvas.drawRect(0, framingRect.top, framingRect.left, framingRect.bottom + 1, mFinderMaskPaint);
//     canvas.drawRect(framingRect.right + 1, framingRect.top, width, framingRect.bottom + 1, mFinderMaskPaint);
//     canvas.drawRect(0, framingRect.bottom + 1, width, height, mFinderMaskPaint);
}

Soo. what is currently i achieve is :

It should be like this on design :

Answer 1

The trick here is not to FILL the inside of the round rectangle, but only the outside. You can do this by changing the FillType of the round rectangle. Now you need to use a Path for this.

RectF rectF = new RectF(framingRect.left, framingRect.top, framingRect.right, framingRect.bottom);
final Path path = new Path()
path.addRoundRect(rectF, 100f, 100f, Path.Direction.CW)
path.setFillType(Path.FillType.INVERSE_WINDING)
canvas.drawPath(path, mFinderMaskPaint);