How do you create an Android View Pager with a dots indicator?

All we need are: ViewPager, TabLayout and 2 drawables for selected and default dots.

Firstly, we have to add TabLayout to our screen layout, and connect it with ViewPager. We can do this in two ways:

Nested TabLayout in ViewPager

<androidx.viewpager.widget.ViewPager    android:id="@+id/photos_viewpager"    android:layout_width="match_parent"    android:layout_height="match_parent">    <com.google.android.material.tabs.TabLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"/></androidx.viewpager.widget.ViewPager>

In this case TabLayout will be automatically connected with ViewPager, but TabLayout will be next to ViewPager, not over it.

Separate TabLayout

<androidx.viewpager.widget.ViewPager    android:id="@+id/photos_viewpager"    android:layout_width="match_parent"    android:layout_height="match_parent"/><com.google.android.material.tabs.TabLayout    android:id="@+id/tab_layout"    android:layout_width="match_parent"    android:layout_height="wrap_content"/>

In this case, we can put TabLayout anywhere, but we have to connect TabLayout with ViewPager programmatically

ViewPager pager = (ViewPager) view.findViewById(R.id.photos_viewpager);PagerAdapter adapter = new PhotosAdapter(getChildFragmentManager(), photosUrl);pager.setAdapter(adapter);TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);tabLayout.setupWithViewPager(pager, true);

Once we created our layout, we have to prepare our dots. So we create three files: selected_dot.xml, default_dot.xml and tab_selector.xml.

selected_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="8dp"            android:useLevel="false">            <solid android:color="@color/colorAccent"/>        </shape>        </item></layer-list>

default_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="8dp"            android:useLevel="false">            <solid android:color="@android:color/darker_gray"/>        </shape>        </item></layer-list>

tab_selector.xml

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

Now we need to add only 3 lines of code to TabLayout in our XML layout.

app:tabBackground="@drawable/tab_selector"app:tabGravity="center"app:tabIndicatorHeight="0dp"

For ViewPager2 read this article:

ViewPager(2) with dots indicator at medium.com

Up-votes are welcome ;-)

First Create a layout, in that give one LinerLayout for Dots which show over your View Pager

<RelativeLayout    android:layout_width="match_parent"    android:layout_height="wrap_content">    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="wrap_content"/>    <LinearLayout        android:id="@+id/pager_dots"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_marginBottom="10dp"        android:background="@android:color/transparent"        android:gravity="center_horizontal"        android:orientation="horizontal">    </LinearLayout></RelativeLayout>

After that create 2 drawables

1. Unselected Drawable

<?xml version="1.0" encoding="utf-8"?><shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="@android:color/transparent"/>    <size android:width="12dp" android:height="12dp"/>    <stroke android:width="1dp" android:color="#ffffff"/></shape>

2. Selected Drawable

<?xml version="1.0" encoding="utf-8"?><shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="@android:color/transparent"/>    <size android:width="12dp" android:height="12dp"/>    <stroke android:width="1dp" android:color="#000000"/></shape>

After that set adapter

private LinearLayout llPagerDots;private ViewPager viewPager;private ArrayList<String> eventImagesUrl;private HomeViewPagerAdapter homeViewPagerAdapter;private ImageView[] ivArrayDotsPager;public void setUpViewPager() {    viewPager = (ViewPager) findViewById(R.id.view_pager);    llPagerDots = (LinearLayout) findViewById(R.id.pager_dots);    homeViewPagerAdapter = new HomeViewPagerAdapter(mContext, eventImagesUrl);    viewPager.setAdapter(homeViewPagerAdapter);    setupPagerIndidcatorDots();    ivArrayDotsPager[0].setImageResource(R.drawable.page_indicator_selected);    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }        @Override        public void onPageSelected(int position) {            for (int i = 0; i < ivArrayDotsPager.length; i++) {                ivArrayDotsPager[i].setImageResource(R.drawable.page_indicator_unselected);            }            ivArrayDotsPager[position].setImageResource(R.drawable.page_indicator_selected);        }        @Override        public void onPageScrollStateChanged(int state) {        }    });}

Create a method setupPagerIndidcatorDots() :

private void setupPagerIndidcatorDots() {    ivArrayDotsPager = new ImageView[eventImagesUrl.size()];    for (int i = 0; i < ivArrayDotsPager.length; i++) {        ivArrayDotsPager[i] = new ImageView(getActivity());        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);        params.setMargins(5, 0, 5, 0);        ivArrayDotsPager[i].setLayoutParams(params);        ivArrayDotsPager[i].setImageResource(R.drawable.page_indicator_unselected);        //ivArrayDotsPager[i].setAlpha(0.4f);        ivArrayDotsPager[i].setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                view.setAlpha(1);            }        });        llPagerDots.addView(ivArrayDotsPager[i]);        llPagerDots.bringToFront();    }

You can check out my library to handle your request : https://github.com/tommybuonomo/dotsindicator

In your XML layout

  <com.tbuonomo.viewpagerdotsindicator.DotsIndicator      android:id="@+id/dots_indicator"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:layout_centerHorizontal="true"      app:dotsColor="@color/colorPrimary"      app:dotsSize="16dp"      app:dotsWidthFactor="3"      />

In your Java code

dotsIndicator = (DotsIndicator) findViewById(R.id.dots_indicator);viewPager = (ViewPager) findViewById(R.id.view_pager);adapter = new ViewPagerAdapter();viewPager.setAdapter(adapter);dotsIndicator.setViewPager(viewPager);