How to make a View with a transparent area?

Question

The task is as follows: there is a background image on top of it is necessary to impose a semi-transparent background in the center of which is completely transparent circle. In this case, the background image - this shows a map with the current coordinates. Ie card should live their lives. A top of the card get something in the form of a semi-transparent film cut a circle in the center. Have the following code:

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);
    }
}

But instead of the transparent area turns opaque black circle. What has been done wrong or what is missing?

This chart will help you: http://ssp.impulsetrain.com/porterduff.html — Phantômaxx, Mar 13 '15 at 18:33
See this example: http://android-er.blogspot.it/2013/08/merge-images-with-porterduffxfermode.html — Phantômaxx, Mar 16 '15 at 09:42
This example works only if the image is in the same View. In my case, a picture and a rectangle with cut in different View. — ru_Phoenix, Mar 16 '15 at 11:42
Cut out the transparent area from the View which is **over** the other one. — Phantômaxx, Mar 16 '15 at 11:45

score 0 · Answer 1 · edited May 23 '17 at 12:12

I found the solution here:Punch a hole in a rectangle overlay with HW acceleration enabled on View. It is necessary to draw a bitmap and then place it on the Canvas. As a result, we get the following code:

public class CircleView extends View {

    private static final String TAG = "CircleView";
    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));
    }
}

http://stackoverflow.com/questions/18387814/drawing-on-canvas-porterduff-mode-clear-draws-black-why — ru_Phoenix, Mar 16 '15 at 11:52

How to make a View with a transparent area?

1 Answers1