Awesome
PagerIndicator
Pager (especially for ViewPager) indicator in two styles: circle & fraction.
Demo
circle | fraction |
---|---|
<img src="art/art_circular.jpeg" width="300px"> | <img src="art/art_numberic.jpeg" width="300px"> |
Dependency
implementation 'me.liangfei:pagerindicator:0.0.2'
Usage
Two attributes are provided:
app:indicator_type
= [fraction | circle].app:indicator_spacing
works only for the circle type indicator.
Step 1: add PageIndicator
to the bottom of the ViewPager.
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.viewpager.widget.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<me.liangfei.indicator.PagerIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:gravity="bottom|center_horizontal"
app:indicator_spacing="5dp"
app:indicator_type="fraction" />
</merge>
Step 2: pass the ViewPager instance to the PagerIndicator instance.
val pageIndicator = findViewById(R.id.indicator);
pageIndicator.setViewPager(pager);
You can just take PageIndicator
as a normal view to make your layout, because it extends LinearLayout
.
Check the app module for more details.