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 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 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:
