Android viewpager with Circle indicator

ViewPager in Android allows the user to flip left and right through pages of data. In our android ViewPager application we’ll implement a ViewPager that swipes through three views with different images and texts.

Android ViewPager widget is found in the support library and it allows the user to swipe left or right to see an entirely new screen.

Today we’re implementing a ViewPager by using Views and PagerAdapter.

Go to Build.Gradle

------------------------

dependencies {

 compile 'me.relex:circleindicator:1.2.1@aar'

}

activity_main.xml

------------------------

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none">
        </android.support.v4.view.ViewPager>

        <me.relex.circleindicator.CircleIndicator
            android:id="@+id/indicator"
            android:layout_width="match_parent"
            android:layout_height="25dp"
            android:layout_gravity="center_horizontal|bottom"
            android:background="#000" />
    </FrameLayout>
</LinearLayout>

pager_list.xml

----------------------

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/large_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/araku"
         />
</RelativeLayout>

Nature.Java

--------------------

package com.sgp.anil.viewpager;

/**
 * Created by Anil on 23-08-2016.
 */
public class Nature {
    private int imageId;

    public Nature(int imageId) {
        this.imageId = imageId;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

}

CustomPageAdapter.java

------------------------------

package com.sgp.anil.viewpager;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.List;

/**
 * Created by Anil on 23-08-2016.
 */
public class CustomPageAdapter extends PagerAdapter {
    private Context context;
    private List<Nature> dataObjectList;
    private LayoutInflater layoutInflater;

    public CustomPageAdapter(Context context, List<Nature> dataObjectList) {
        this.context = context;
        this.layoutInflater = (LayoutInflater) this.context.getSystemService(this.context.LAYOUT_INFLATER_SERVICE);
        this.dataObjectList = dataObjectList;
    }

    @Override
    public int getCount() {
        return dataObjectList.size();
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = this.layoutInflater.inflate(R.layout.pager_list, container, false);
        ImageView displayImage = (ImageView) view.findViewById(R.id.large_image);
        displayImage.setImageResource(this.dataObjectList.get(position).getImageId());
        container.addView(view);
        return view;
    }

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

MainActivity,Java

------------------------------

package com.sgp.anil.viewpager;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.List;

import me.relex.circleindicator.CircleIndicator;

public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        List<Nature> getData = dataSource();
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        CustomPageAdapter mCustomPagerAdapter = new CustomPageAdapter(MainActivity.this, getData);
        viewPager.setAdapter(mCustomPagerAdapter);
        CircleIndicator indicator = (CircleIndicator) findViewById(R.id.indicator);
        indicator.setViewPager(viewPager);
    }

    private List<Nature> dataSource() {
        List<Nature> data = new ArrayList<Nature>();
        data.add(new Nature(R.drawable.araku));
        data.add(new Nature(R.drawable.araku2));
        data.add(new Nature(R.drawable.araku3));
        data.add(new Nature(R.drawable.araku4));
        return data;
    }
}