Deep Dive into Android MaterialShowcaseView Library — Part 1

In this series, I’ll be talking about a library which is used by a lot of android developers for showcasing their in-app content, MaterialShowcaseView.

I used this library sometime back for my work and had to modify it to fit my needs. In this process, I ended up deep diving and would like to share what I learned. I’ve also linked to relavant code pieces which perform the described tasks.

The original library offers a fix set of features, which are demonstrated by the screenshots in the README.

Let’s jump on the technicalities right away.

The original library offers two things :

1) Highlighting a view. Let’s call it Active View.

2) Showing a Information View that tells user what the Active View is about.

Here’s how it does this :

The MaterialShowcaseView (this class) is actually a FrameLayout.

Why FrameLayout?

As the docs clearly say:

FrameLayout is designed to block out an area on the screen to display a single item.

Child views are drawn in a stack, with the most recently added child on top

The library adds this view as a direct child in the Window DecorView, so that it’s drawn on top of your activity’s view (here).

Some background on Window and DecorView:

Window: Each activity is given a window by the WindowManager and contains the single view heirarchy that this activity has.

DecorView: The top level view in that view heirarchy.

Then, for drawing the overlay and highlighting our view, it overrides the `onDraw()` method of this view and uses android’s Canvas class. The overlay should be such that it masks the whole view except the view that we want to showcase/highlight. It achieves this by drawing the color in two iterations :

1) draw the mask color over the whole view using the default PorterDuff Mode.

2) clears that mask color over the active view using CLEAR PorterDuff Mode.

For doing the second step it needs the bounds of that highlighted view, which is maintained by this interface.

The second thing this library does is displaying the Informaton View which has three things: title, contentText and dismissText, to describe our Active View . These can be set using this, this and this method.

For this, it first inflates a Content Box, the parent layout which will host our information view. This is the xml file for that view. Now, for showing the information view, it needs to decide whether it should show this content box above or below the active view. This is decided by doing some calculations on the layout bounds of our active view, the content view and our window. This is the function that does this.

There are other things such as handling the touch behaviour. We want to make sure that if user touche any other area other than Active View and Information View, nothing should happen/showcase should dismiss, depending on the configuration. This has been taken care of by overriding the `onTouch` callback here.

This is the basic information that you need to know to get started with using, or rather modifying this library according to your needs.

I’ve added a lot of other functionalities to this library in my fork, explained in the README. I’ll try to write another post explaining all of them.

Feel free to comment/mail me in case you need any help with using this library.

Cheers !