Working with ViewPager2

2 min readApr 20, 2022

Sliding Pager with Dot Indicators — The Easiest Way (without any third-party)

Why

Simply, because we seriously need some solution where we don’t have to depend on some third party library to implement the dot indicator on page change or slide OR where we don’t have to write any complex logic to loop around the number of pages in the ViewPager and according to that update the dot in the custom dots layout. You all know the pain, right?

So without talking much, Lets deep dive into the solution we all needed from so long.

Step 1: Add ViewPager2 and TabLayout components in your XML.

Step 2: Create one new selector drawable named tab_pager_selector.xml

Step 3: Now create default dot drawable and selected dot drawable

default_dot.xml

selected_dot.xml

Step 4: Now create one layout for display single item in ViewPager component

Step 5: Now create one adapter same as RecyclerView adapter to bind and show the data to slide in ViewPager

Step 6: Final and one of the easiest step to implement for placing the cherry on the cake

Final Output:

Conclusion:

I am grateful that I got the solution after searching for it for so long. And this time it’s my time to share this solution to all who might need or who desperately need solution something like this. Bonus tip: You can also share this article to whom you think will benefitted from this solution because Sharing is Caring and who knows it better than us, developers !!!