A Comprehensive Guide to Implementing Bottom Dot Indicators for Android ViewPager

Introduction

In Android development, ViewPager is commonly used to implement swipeable pages, and bottom dot indicators provide intuitive navigation feedback. This article explores various methods to add such indicators.

Implementing Page Indicators with Jetpack Compose

Jetpack Compose offers a modern approach to UI development. To create a page indicator, you can use the PagerState and a custom Composable function.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PageIndicator(
    count: Int,
    pagerState: PagerState,
    modifier: Modifier = Modifier
) {
    Row(modifier = modifier) {
        repeat(count) { index ->
            Box(
                modifier = Modifier
                    .size(16.dp)
                    .clip(RoundedCornerShape(50))
                    .background(
                        if (pagerState.currentPage == index) selectedColour else normalColour
                    )
            )
            if (index != count) {
                Spacer(modifier = Modifier.padding(horizontal = 4.dp))
            }
        }
    }
}

This function displays dots that change color based on the current page. The selectedColour and normalColour should be defined appropriately.

Using Traditional ViewPager with TabLayout

For legacy ViewPager, the Android Support Library provides TabLayout which can be customized to act as dot indicators.

First, define the layout in XML:

<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
   <android.support.v4.view.ViewPager
       android:id="@+id/pager"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   </android.support.v4.view.ViewPager>
   <android.support.design.widget.TabLayout
       android:id="@+id/tabDots"
       android:layout_alignParentBottom="true"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabBackground="@drawable/tab_selector"
       app:tabGravity="center"
       app:tabIndicatorHeight="0dp"/>
</RelativeLayout>

In the activity or fragment, connect them:

mImageViewPager = (ViewPager) findViewById(R.id.pager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);
tabLayout.setupWithViewPager(mImageViewPager, true);

Create drawable resources for the dots, such as tab_indicator_selected.xml, tab_indicator_default.xml, and tab_selector.xml to define the appearance.

Leveraging Third-Party Libraries

For a quick solution, you can use libraries like SlidingSplashView. Add the dependency and use the custom view in your layout.

<com.chabbal.slidingdotsplash.SlidingSplashView
        android:id="@+id/splash"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:imageResources="@array/img_id_arr"/>

Define an integer array for images, and you're done.

Comparison and Recommendations

Compose is ideal for modern apps, while TabLayout suits traditional projects. Libraries offer convenience but may limit customization.

Conclusion

Implementing bottom dot indicators in Android can be achieved through multiple methods. Choose based on your project's requirements and familiarity with the tools.