Tuesday, 23 August 2016

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;
    }
}

2 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. how to change the color of the circular page indicators

    ReplyDelete