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 digging it a lot and would like to share what I learned.
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 ( see the README to know what I mean by highlighting here)
2) showing a content box that tells user what the highlighted view is about.
Here's how it does this :
The library adds a direct view child (this class) in the window decor view, so that it's drawn on top of your activity's view (here). 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 the 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 a content box which has the title and description of our active view (can be set using this and this method) and a button to dismiss the showcase. This is the xml file that's used to inflate that view. For showing this 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 our highlighted view, the content view and our window. This is the function that does this.
There are some other things such as handling the touch behaviour on the view which has been handled by overriding the `onTouch` callback here.
IMO, this is the basic information that you need to know to get started with using, rather modifying this library according to your needs.
I've added some more functionalities to this library in my fork github, which I'll explaining in next post.
Feel free to comment/mail me in case you need any help with using this library.
Cheers !
I used this library sometime back for my work and had to modify it to fit my needs. In this process, I ended up digging it a lot and would like to share what I learned.
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 ( see the README to know what I mean by highlighting here)
2) showing a content box that tells user what the highlighted view is about.
Here's how it does this :
The library adds a direct view child (this class) in the window decor view, so that it's drawn on top of your activity's view (here). 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 the 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 a content box which has the title and description of our active view (can be set using this and this method) and a button to dismiss the showcase. This is the xml file that's used to inflate that view. For showing this 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 our highlighted view, the content view and our window. This is the function that does this.
There are some other things such as handling the touch behaviour on the view which has been handled by overriding the `onTouch` callback here.
IMO, this is the basic information that you need to know to get started with using, rather modifying this library according to your needs.
I've added some more functionalities to this library in my fork github, which I'll explaining in next post.
Feel free to comment/mail me in case you need any help with using this library.
Cheers !
Comments
Post a Comment