A Dots indicator for Material View Pager which identifies the current page in relation to all available pages on the current row. Pages are represented as dots. The current page can be highlighted with a different color or size dot.

Previously i shared Creative View Pager Android Animation library which made by Tommy Buonomo and he shared their another library named View Pager Dots Indicator in post comment.
[reposcript id=”git_repo” gituser=”tommybuonomo” gitname=”dotsindicator”]
Demo of Material Dots Indicator In Kotlin
Do you know : Is LastAdapter ending RecyclerView adapter?
This library makes it possible to represent View Pager Dots Indicator with 3 different awesome styles !
Add this project in your project:
Gradle
dependencies { implementation 'com.tbuonomo.andrui:viewpagerdotsindicator:2.0.3' }
Download this project here
Three material Dots Indicators for view pagers in Android !
Dots Indicator
In your XML layout
<com.tbuonomo.viewpagerdotsindicator.DotsIndicator android:id="@+id/dots_indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" app:dotsColor="@color/material_white" app:dotsCornerRadius="8dp" app:dotsSize="16dp" app:dotsSpacing="4dp" app:dotsWidthFactor="2.5" />
You can use this : Add Tinder like SwipeView in Android
Custom Attributes
Attribute | Description |
---|---|
dotsColor |
Color of the dots |
dotsSize |
Size in dp of the dots (by default 16dp) |
dotsSpacing |
Size in dp of the space between the dots (by default 4dp) |
dotsWidthFactor |
The dots scale factor for page indication (by default 2.5) |
dotsCornerRadius |
The dots corner radius (by default the half of dotsSize for circularity) |
In your Java code
dotsIndicator = (DotsIndicator) findViewById(R.id.dots_indicator); viewPager = (ViewPager) findViewById(R.id.view_pager); adapter = new ViewPagerAdapter(); viewPager.setAdapter(adapter); dotsIndicator.setViewPager(viewPager);
In your Kotlin code
val dotsIndicator = findViewById<WormDotsIndicator>(R.id.dots_indicator) val viewPager = findViewById<ViewPager>(R.id.view_pager) val adapter = ViewPagerAdapter() viewPager.adapter = adapter dotsIndicator.setViewPager(viewPager)
Spring Dots Indicator
In your XML layout
<com.tbuonomo.viewpagerdotsindicator.SpringDotsIndicator android:id="@+id/spring_dots_indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" app:dampingRatio="0.5" app:dotsColor="@color/material_white" app:dotsCornerRadius="2dp" app:dotsSize="16dp" app:dotsSpacing="6dp" app:dotsStrokeWidth="2dp" app:stiffness="300" />
Check this once: SlidingRootNav – DrawerLayout-like ViewGroup Android Library
Custom Attributes
Attribute | Description |
---|---|
dotsColor |
Color of the dots |
dotsSize |
Size in dp of the dots (by default 16dp) |
dotsSpacing |
Size in dp of the space between the dots (by default 4dp) |
dotsCornerRadius |
The dots corner radius (by default the half of dotsSize for circularity) |
dotsStrokeWidth |
The dots stroke width (by default 2dp) |
dampingRatio |
The damping ratio of the spring force (by default 0.5) |
stiffness |
The stiffness of the spring force (by default 300) |
In your Java code
springDotsIndicator = (SpringDotsIndicator) findViewById(R.id.spring_dots_indicator); viewPager = (ViewPager) findViewById(R.id.view_pager); adapter = new ViewPagerAdapter(); viewPager.setAdapter(adapter); springDotsIndicator.setViewPager(viewPager);
In your Kotlin code
val springDotsIndicator = findViewById<WormDotsIndicator>(R.id.spring_dots_indicator) val viewPager = findViewById<ViewPager>(R.id.view_pager) val adapter = ViewPagerAdapter() viewPager.adapter = adapter springDotsIndicator.setViewPager(viewPager)
Worm Dots Indicator
In your XML layout
<com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator android:id="@+id/worm_dots_indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" app:dotsColor="@color/material_blueA200" app:dotsCornerRadius="8dp" app:dotsSize="16dp" app:dotsSpacing="4dp" app:dotsStrokeWidth="2dp" />
You’ve to check this: How Android Instant Run Works?
Custom Attributes
Attribute | Description |
---|---|
dotsColor |
Color of the dots |
dotsSize |
Size in dp of the dots (by default 16dp) |
dotsSpacing |
Size in dp of the space between the dots (by default 4dp) |
dotsCornerRadius |
The dots corner radius (by default the half of dotsSize for circularity) |
dotsStrokeWidth |
The dots stroke width (by default 2dp) |
In your Java code
wormDotsIndicator = (WormDotsIndicator) findViewById(R.id.worm_dots_indicator); viewPager = (ViewPager) findViewById(R.id.view_pager); adapter = new ViewPagerAdapter(); viewPager.setAdapter(adapter); wormDotsIndicator.setViewPager(viewPager);
In your Kotlin code
val wormDotsIndicator = findViewById<WormDotsIndicator>(R.id.worm_dots_indicator) val viewPager = findViewById<ViewPager>(R.id.view_pager) val adapter = ViewPagerAdapter() viewPager.adapter = adapter wormDotsIndicator.setViewPager(viewPager)
Don’t forget to like the project if you like it!
Share your thoughts