How to create a 'transparent circle inside rectangle' shape in XML in Android?

Question

I\'m trying to create the following design in my app.

Design Mockup

Its an overlay on top of the main UI. Trying to create this using a layout on top o

Answer 1

You can use PorterDuffXferMode and custom view for that.

Good example of different modes provided at this picture (see A Out B): AlphaCompositing

The idea is to create custom view, with opaque black rectangle and circle over it. When you apply PorterDuffXferMode.SRC_OUT, it will "erase" the circle from rectangle, so you wil have result what you want.

In your customview you should override dispatchDraw(Canvas canvas) method, and draw resulting bitmap on your frame.

Then you can put MapView and your custom view in FrameLayout and enjoy result.