dots
dots copied to clipboard
Dots indicator that shows the current position on a View Pager. It does all the work for you with a few customisations.
Dots
What is Dots?
Dots is a library that helps in implementing a simple yet effective dots indicator for the View Pagers used in your android code. It combines the usage of observers and state drawables to indicate the current visible page's position in a badass way.
Implementation
[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)
Documentation
XML
-
dot_drawable
: Drawable that is used to indicated the current selected page -
dot_drawable_unselected
: Drawable that is used to indicated the unselected pages -
dot_height
: Height of the Dot indicator in dp -
dot_width
: Width of the Dot indicator in dp -
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 now!
Check out this medium publication: https://medium.com/@tizisdeepan/android-dots-indicator-a093d9dc3f5f
Developed By
- Deepan Elango - [email protected]


License
This library falls under Apache v2