How to extend ViewPager2 with a dot indicator?

Question

I'm currently working on a instruction manual, which does have pages - and uses ViewPager2.

So far I've found dot-indicators for ViewPager, but not for ViewPager2. I'd like to provide better visual feedback, so that one can see that there's more pages, to begin with. How to extend ViewPager2 with a dot indicator, with the least effort? This is not a request for off-site resources - despite my own answer uses a library. Feel free to add a better (more light-weight) answer.

Answer 1

Package me.relex:circleindicator supports ViewPager2 and is available on mavenCentral():

dependencies {
    implementation "androidx.viewpager2:viewpager2:1.0.0"
    implementation "me.relex:circleindicator:2.1.6"
}

One has to use class CircleIndicator3 in the XML:

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/pager"
    android:layout_weight="1.00"
    android:layout_width="match_parent"
    android:layout_height="0dp"/>

<me.relex.circleindicator.CircleIndicator3
    android:id="@+id/indicator"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    app:ci_width="5dp"
    app:ci_height="5dp"
    app:ci_margin="5dp"
    app:ci_orientation="horizontal"
    app:ci_gravity="center"/>

And the code of my Fragment:

@Override
@NonNull
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

    /* Inflate the data-binding */
    this.mDataBinding = DialogManualBinding.inflate(inflater, container, false);

    /* FragmentStateAdapter */
    ManualPagerAdapter adapter = new ManualPagerAdapter(getChildFragmentManager(), getLifecycle());
    this.mDataBinding.pager.setAdapter(adapter);

    /* CircleIndicator3 */
    this.mDataBinding.indicator.setViewPager(this.mDataBinding.pager);

    /* Optional */
    adapter.registerAdapterDataObserver(this.mDataBinding.indicator.getAdapterDataObserver());

    return this.mDataBinding.getRoot();
}