Create Introduction screen with ViewPager2 and Circle Indicators. No custom Library please..

2 min readDec 9, 2019

One of the common components in Android applications are introduction screens. Which gives good highlight about features or new product arrivals. We had many options to create view pagers with custom indicators including custom libraries. With updated ViewPager2 and TabLayout this has become much simpler.😇

With the help of layer-list we can achieve the below designs without including any complex libraries.🕺🥂

Here we are considering ViewPager2 with Android Navigation Component

It is very common to have material design dependency in our apps. So the below dependency will give us both ViewPager2 and TabLayoutMediator.

🛑 TabLayoutMediator is required to show the indicators.

implementation "com.google.android.material:material:material_design_version"

But if only ViewPager2 is required, the below will do the job

implementation "androidx.viewpager2:viewpager2:view_pager_version"

Below is the view pager container xml

<FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">  <androidx.viewpager2.widget.ViewPager2
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/intro_pager"
          tools:context=".ui.screens.intro.IntroViewPagerFragment"/>    <com.google.android.material.tabs.TabLayout
          android:id="@+id/into_tab_layout"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:tabBackground="@drawable/tab_pager_selector"
          app:tabGravity="center"
          app:tabIndicatorHeight="0dp"
          android:layout_gravity="bottom"/></FrameLayout>

Create tab_pager_selector.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<selector 
        xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/selected_pager_dot"
          android:state_selected="true"/>
    <item android:drawable="@drawable/default_pager_dot"/>
</selector>

default_pager_dot.xml is as follows

<?xml version="1.0" encoding="utf-8"?>
<layer-list 
xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
                android:innerRadius="0dp"
                android:shape="ring"
                android:thickness="@dimen/indicator_size"
                android:useLevel="false">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</layer-list>

and the selected_pager_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list 
xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="@dimen/indicator_size"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>
    </item>
</layer-list>

With the help of TabLayoutMediator , in onViewCreated of Fragment , we can setup the view pager indicators. That’s it!

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    val pagerAdapter = 
        ScreenSlidePagerAdapter(this,getListOfPagerContents())
    digital_pager.adapter = pagerAdapter

    TabLayoutMediator(pager_tab_layout, digital_pager) 
    { tab, position ->}.attach()
}

🧐For the complete source code, checkout Github Project.😀

Thank you for reading.🤜🤛 Cheers!🥂🕺

Create Introduction screen with ViewPager2 and Circle Indicators. No custom Library please..

Written by Sreehari Vasudevan