How to make a View with a transparent area?

Question

Android

The task is as follows: there is a background image, on top of it you need to impose a translucent background in the center of which is a completely transparent circle. In this case, the background image is a display of the map with the current coordinates. Those. the card has to live its own life. And on top of the card we get something in the form of a translucent film with a circle cut out in the center.
The following code is written:

public class CircleView extends View {

    private Paint srcPaint;
    private Paint dstPaint;

    public CircleView(Context context) {
        this(context, null, 0);
    }

    public CircleView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        float centerX = width / 2;
        float centerY = height / 2;
        float circleRadius = Math.min(width, height) / 5;

        canvas.drawRect(0, 0, width, height, dstPaint);
        canvas.drawCircle(centerX, centerY, circleRadius, srcPaint);
    }

    private void init() {
        srcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        srcPaint.setColor(Color.WHITE);
        srcPaint.setStyle(Paint.Style.FILL);
        srcPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));

        dstPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        dstPaint.setColor(Color.argb(221, 255, 217, 32));
        dstPaint.setStyle(Paint.Style.FILL);
    }
}

For some reason, instead of a transparent area, a black opaque circle is obtained. What is done wrong or what is missing?

Answer 1

As a result of a long search, we managed to find the cause of the problem and its solution. I found the solution here: stackoverflow.com/questions/18387814/drawing-on-ca... You need to create a new bitmap that supports transparency, draw on it, and only then draw this bitmap on the canvas. The resulting code looks like this:

public class CircleView extends View {

    private Paint srcPaint;

    public CircleView(Context context) {
        this(context, null, 0);
    }

    public CircleView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        float centerX = width / 2;
        float centerY = height / 2;
        float circleRadius = Math.min(width, height) / 5;

        Bitmap background = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

        Canvas layer = new Canvas(background);
        layer.drawColor(getResources().getColor(R.color.transparent_yellow));
        layer.drawCircle(centerX, centerY, circleRadius, srcPaint);

        canvas.drawBitmap(background, 0, 0, null);
    }

    private void init() {
        srcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        srcPaint.setColor(Color.WHITE);
        srcPaint.setStyle(Paint.Style.FILL);
        srcPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
    }
}

There is only one drawback: the creation of a Bitmap and Canvas each time the View is redrawn.