logo
logo
Sign in

Intro showcase view in Jetpack Compose — Android

avatar
Canopas
Intro showcase view in Jetpack Compose — Android

Want to make it easy for your new users to understand all the features of your app?


Here's how you can do it using jetpack compose in android.


This implementation is inspired by the TapTargetView which is useful for legacy views.


Full source code is available on GitHub as Intro Showcase View and you can also add this as a gradle dependency in your project.




Once you follow the 10 steps in this article, your final implementation will look like this.


Step 1: Add a feature and draw circles on Canvas


Step 2: Find LayoutCoordinates of a fab button and recenter circle.


Step 3: Blend the overlapped circle to set transparency


Step: 4 Add circle reveals animation to highlight the target


Step 5: Add texts to describe the feature


Step 6: Set offset of Texts


Step 7: Calculate outer circle radius


Step 8: change the offset of our outer circle


Step 9: Fix the outer circle center point for the Top and Bottom bar.


Step 10: Add circle reveals animation to our outer circle.


Check out the full article on canopas blog.

collect
0
avatar
Canopas
guide
Zupyak is the world’s largest content marketing community, with over 400 000 members and 3 million articles. Explore and get your content discovered.
Read more