Transparent sections in a view in Android

In today’s lesson, we will create a view which has transparent section(s). This view can be used in many ways, you can use it as 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 above image you can see the background has beautiful photo of coconut trees & above that we have 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.

TransparentCardView.java

For this custom view I have extended View class & in it’s 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 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.

attrs.xml for TransparentSectionView

You can use these attributes in layout xml like below.

Usage of attributes for TransparentCardView

These attribute’s values is 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 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 a 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

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

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 main View’s canvas.

I have also created an interface, which tells when the view’s layout is done. It’s callback method notifies 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.

/**
 * Listener for notifying view layout is done.
 */
public interface OnLayoutListener {
    void onLayout();
}

This tutorial gives you idea to create 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 😍