Pager (especially for ViewPager) indicator in two styles: circle & fraction.
| circle | fraction |
|---|---|
 |
 |
implementation 'me.liangfei:pagerindicator:0.0.2'Two attributes are provided:
app:indicator_type= [fraction | circle].app:indicator_spacingworks 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.