Page Indicator with Jetpack Compose using Canvas and animations

Result Page Indicator

When using a view pager, To indicate the currently selected page we use a page indicator.

For use cases like onboarding page, a simple page indicator with few dots and noticeable selected page dot works.

Here we are going to create a simple dot page indicator with animation using canvas in Jetpack Compose.

Let’s begin from the bottom. First, we will create a view for a single dot followed by a page indicator combining the dots and then a sample to see how to use them.

PageIndicatorView

• Using animateDpAsState and animateColorAsState for the animations and drawRoundRect to draw on the Canvas.

PageIndicator

• Using Arrangement.spaceBy() to place the dots.

PageIndicator Usage

Note: The LaunchedEffect here is just for demonstration. In the actual use case, we have to link it to the view pager pages and selection state.

Please comment with your valuable feedback. It would help me to improvise.

Kindly 👏👏👏 if this was useful.

Please follow if you would like to see more content related to Android Jetpack Compose.