In today’s lesson, we will create a view which has a transparent section(s). This view can be used in many ways, you can use it as an overlay to other views or in any other way. The idea for this demo is to create a view, which has transparent areas which are in different shapes. By combining many areas together you can give a beautiful look to a view.

For e.g. you can see the following image.

In the above image, you can see the background has a beautiful photo of coconut trees & above that we have a layer of custom view. BTW I captured that beautiful photo from my phone. In the custom view, I have used rectangles & circles. One rectangle & one circle set as transparent so it can get the above look it has. You can create your own shapes for transparent areas. You can see the full source code at Github repo TrasparentSectionCard.

Now let’s see the code for the same custom view.

For this custom view I have extended View class & in its onDraw() method I am creating my own Bitmap & setting it on view’s canvas. The bitmap is created in bitmapDraw() method, which actually has all the important drawing part. To draw the view we need the parameters like width & height of the view, center & radius of the circle to be created, top margin, color etc. For this demo, I have calculated all these parameters in method defaultAttributes(). Which actually takes the parent’s width & height as a base & then calculate other parameters accordingly. For these parameters, I have also created custom attributes. You can use these attributes to pass the values in layout XML or can set dynamically as well. For creating custom attributes one has to create attrs.xml, following is mine.

You can use these attributes in layout XML like below.

These attribute’s values are extracted in method init(). You can check that, but for this demo, I have used defaultAttributes() method.
Now, let’s look at the important drawing part, which is bitmapDraw()method.

It creates a Bitmap by provided width & height values (for this demo the values are calculated in defaultAttributes() method). It occupies a rectangular area with a specified width & height. Next, the important one is to set the erase color to the created bitmap, which actually fills the bitmap’s pixels with the specified color. Then the bitmap object is used for creating a Canvas. This canvas will be used for drawing actual shapes. First, we are filling it with color & then a paint object is created, which is actually used for drawing shapes. In shapes, first, we are drawing a circle on the canvas, which is set as transparent by using.

Then we draw a transparent rectangle using the same paint object. Now, in the same paint object, we are setting color, stroke & Xfermode to draw solid circle shape. Once the bitmap canvas is drawn, we return the created Bitmap object. This bitmap object is used in onDraw() method & drawn on the main View’s canvas. I have also created an interface, which tells when the view’s layout is done. Its callback method notifies the user (Activity) when the view is actually drawn. You can use this for your own use cases, in my cases I needed width & height of the custom view, so the onLayout() method notifies me then I get width & height values.

This tutorial gives you an idea to create a view with transparent sections. You can create any shape with any size for such views. You can tell your ideas & implementations in the comments.

I hope you learned something useful from here. You can check the full source code at Github repo TrasparentSectionCard.

Happy Coding