How to Implement ViewPager with Dotsindicator in Android?

ViewPager in Android is a class that allows the user to flip left and right through pages of data. This class provides the functionality to flip pages in-app. It is a widget found in the support library.

What are Dotsindicator?

These are dots that help us to see which view is currently opened when we have multiple views. Some of the attributes of the dots indicator are as follows-

Attribute	Description
dotsColor	Color of the dots
selectedDotColor	Color of the selected dot (by default the color of the dot)
progressMode	Lets the selected dot color to the dots behind the current one
dotsSize	Size in dp of the dots (by default 16dp)
dotsSpacing	Size in dp of the space between the dots (by default 4dp)
dotsWidthFactor	The dots scale factor for page indication (by default 2.5)
dotsCornerRadius	The dots corner radius (by default the half of dotsSize for circularity)

What we are going to build in this article?

In this article, we will see three different kinds of dots indicators which come into action when we change the images in an image view. Here is a sample video of what we are going to build in this article. Note that we going to build this application in the Java language.

Step by Step Implementation

Step 1: Create a new project

• Open a new project.
• We will be working on Empty Activity with language as Java. Leave all other options unchanged.
• You can change the name of the project at your convenience.
• There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?

Step 2. Adding required dependency

Navigate to Gradle scripts > build.gradle(module) and use the following dependency in it-

implementation 'com.tbuonomo.andrui:viewpagerdotsindicator:3.0.3'

Step 3. Working on XML files

Navigate to app > res > layout > activity_main.xml  file and use the following code in it-

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/view_pager"/>
    <com.tbuonomo.viewpagerdotsindicator.DotsIndicator
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/dot1"
        android:layout_marginTop="10dp"
        app:dotsColor="@android:color/holo_green_light"
        app:selectedDotColor="@android:color/holo_green_dark"
        app:dotsSize="15dp"
        app:dotsSpacing="5dp"
        app:progressMode="true"/>
    <com.tbuonomo.viewpagerdotsindicator.SpringDotsIndicator
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/dot2"
        android:layout_marginTop="10dp"
        app:dotsColor="@android:color/holo_orange_light"
        app:selectedDotColor="@android:color/holo_orange_dark"
        app:dotsSize="15dp"
        app:dotsSpacing="5dp"
        app:stiffness="300"/>
    <com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/dot3"
        android:layout_marginTop="10dp"
        app:dotsColor="@android:color/holo_blue_light"
        app:selectedDotColor="@android:color/holo_blue_dark"
        app:dotsSize="15dp"
        app:dotsSpacing="5dp"/>

</LinearLayout>

Navigate to app > res > layout > right-click > new > layout resource file and it as item. Use the following code in item.xml file-

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/image_view"
        android:adjustViewBounds="true"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 4. Working on Java files

Go to the MainActivity.java file and use the following code in it-

Java

package com.example.viewpagerwithdotsindicator;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

import com.tbuonomo.viewpagerdotsindicator.DotsIndicator;
import com.tbuonomo.viewpagerdotsindicator.SpringDotsIndicator;
import com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator;

public class MainActivity extends AppCompatActivity {

    ViewPager viewPager;
    DotsIndicator dot1;
    SpringDotsIndicator dot2;
    WormDotsIndicator dot3;
    ViewAdapter viewAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager=findViewById(R.id.view_pager);
        dot1=findViewById(R.id.dot1);
        dot2=findViewById(R.id.dot2);
        dot3=findViewById(R.id.dot3);

        viewAdapter=new ViewAdapter(this);
        viewPager.setAdapter(viewAdapter);
        dot1.setViewPager(viewPager);
        dot2.setViewPager(viewPager);
        dot3.setViewPager(viewPager);
    }
}

Navigate to app > right-click > new > java class and name it as ViewAdapter. Use the following code in ViewAdapter.java file-

Java

package com.example.viewpagerwithdotsindicator;

import android.content.Context;
import android.media.Image;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;

public class ViewAdapter extends PagerAdapter {

    private Context context;
    private LayoutInflater layoutInflater;
    private Integer[] images={R.drawable.one,R.drawable.two,R.drawable.three,R.drawable.four,R.drawable.five};

    public ViewAdapter(Context context)
    {
        this.context=context;
    }
    @Override
    public int getCount() {
        return images.length;
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view==object;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        layoutInflater=(LayoutInflater) context.getSystemService(
                Context.LAYOUT_INFLATER_SERVICE
        );
        View view =layoutInflater.inflate(R.layout.item,null);
        ImageView imageView=view.findViewById(R.id.image_view);
        imageView.setImageResource(images[position]);
        ViewPager viewPager=(ViewPager) container;
        viewPager.addView(view,0);
        return view;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        ViewPager viewPager=(ViewPager) container;
        View view=(View) object;
        viewPager.removeView(view);
    }
}

Here is the final output of our application.

Output: