Dots Indicator for Viewpager made easy — Android!

Implementing seamless and smooth dots indicator for your custom viewpager component in a android project is kinda tricky and time consuming. So I took the pleasure of developing a library — “Dots”, that helps you with the exact same thing but in the most effortless way that one could possibly achieve doing it. It combines the usage of observers and state drawables to indicate the current visible page’s position in a badass way. Let’s see what’s in store for us while using my library ;)

How do we do it?

(1) In your app module gradle file,

dependencies {
 implementation ‘com.github.tizisdeepan:dots:1.0.1’
}

(2) In your project level gradle file,

allprojects {
 repositories {
 maven { url ‘https://jitpack.io' }
 }
}

(3) Use DotsIndicator in your layout.xml

<com.make.dots.dotsindicator.DotsIndicator
 android:id=”@+id/dotsIndicator”
 android:layout_width=”wrap_content”
 android:layout_height=”wrap_content”
 android:layout_marginBottom=”12dp”
 android:background=”@drawable/dots_background”
 android:padding=”6dp”
app:dot_drawable=”@drawable/ic_dot_darkgrey”
 app:dot_drawable_unselected=”@drawable/ic_dot_lightgrey”
 app:dot_height=”8dp”
 app:dot_margin=”6dp”
 app:dot_width=”8dp” />

(4) Link the View Pager with the Dots Indicator in your Java / Kotlin code

dotsIndicator.setViewPager(imageViewPager)
imageViewPager.adapter?.registerDataSetObserver(dotsIndicator.dataSetObserver)

For your reference ;)

XML

1. dot_drawable: Drawable that is used to indicated the current selected page

2. dot_drawable_unselected: Drawable that is used to indicated the unselected pages

3. dot_height: Height of the Dot indicator in dp

4. dot_width: Width of the Dot indicator in dp

5. dot_margin: Marginal spaces between the Dots

Kotlin / Java

// This attaches the DotsIndicator with the ViewPager
DotsIndicator.setViewPager(ViewPager)

Voila! You have implemented a simple Dots indicator for your View Pager component now!

Github: https://github.com/tizisdeepan/dots

Profile: https://github.com/tizisdeepan

Linkedin: www.linkedin.com/in/tizisdeepan