Create view with transparent circle

Question

I want to create a view with rounded corners and a centered round button. At the moment i am using a rectangle shape with round borders as a view-background (green part) and a white circle shape, which contains the button (green button with android logo).

This works fine as long as the background (yellow/brown at the moment, just for better visualization) has the same color as the circle shape.

But now i want to use a gradient background: What is a smart way to achieve the same look with a transparent circle?

I wasn't able to create the same look with normal android shapes (i had the idea of round corners).

Answer 1

Solved it with a custom view. It will draw an rectangle filled with the given color. After that, an oval will be cleared out.

I will post a minimized code (without custom attributes etc.), maybe it helps someone someday:

public class InvertedCircleView extends View {

    private Paint mPaint;
    private float mCanvasCenterX;

    private float mCenterCircleWidth, mCenterCircleHeight;


    public InvertedCircleView(Context context, AttributeSet attrs) {
        super(context, attrs);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mPaint.setColor(getResources().getColor(android.R.color.holo_green_dark));
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawPaint(mPaint);

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

        mCenterCircleWidth = canvas.getWidth();        
        mCenterCircleHeight = canvas.getHeight();        

        mCanvasCenterX = canvas.getWidth() / 2;

        canvas.drawOval(mCanvasCenterX - (mCenterCircleWidth / 2),
                -mCenterCircleHeight,
                mCanvasCenterX + (mCenterCircleWidth / 2),
                mCenterCircleHeight,
                mPaint);
    }
}