Sunday, 27 September 2015

ViewPager Tutorial

Android provides this widget ViewPager to swipe among views. You can swipe left to right or viceversa. In this tutorial, I am going to explain a easiest way to use this widget.  

Step 1: Declare ViewPager in your main layout

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:id="@+id/relativeLayout">


    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

</RelativeLayout>


Step 2: Modify your main activity to access your ViewPagerAdapter and set it in your ViewPager.



import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.Menu;

public class MainActivity extends Activity {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  ViewPagerAdapter adapter = new ViewPagerAdapter(this, res);
  ViewPager myPager = (ViewPager) findViewById(R.id.images);
  myPager.setAdapter(adapter);
  myPager.setCurrentItem(0);
 }

 private int res[] = { R.drawable.chennai, R.drawable.mumbai,
   R.drawable.delhi, R.drawable.calcutta};
}


Step 3: Create your PagerAdapter.

import android.app.Activity;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;

public class ViewPagerAdapter extends PagerAdapter {

 Context context;
 int [] res;

 public ViewPagerAdapter(Context context, int[] res) {
  this.res= res;
  this.context = context;
 }

 public int getCount() {
  return res.length;
 }

 public Object instantiateItem(View collection, int position) {
  ImageView view = new ImageView(activity);
  view.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
    LayoutParams.FILL_PARENT));
  view.setScaleType(ScaleType.FIT_XY);
  view.setBackgroundResource(res[position]);
  ((ViewPager) collection).addView(view, 0);
  return view;
 }

 @Override
 public void destroyItem(View arg0, int arg1, Object arg2) {
  ((ViewPager) arg0).removeView((View
}

Mandatory Methods:


getCount() – This method should return the number of views available, i.e., number of pages to be displayed/created in the ViewPager. instantiateItem() – This method should create the page for the given position passed to it as an argument. In our case, we inflate() our layout resource to create the hierarchy of view objects and then set resource for the ImageView in it. Finally, the inflated view is added to the container (which should be the ViewPager) and return it as well. destroyItem() – Removes the page from the container for the given position. We simply removed object using removeView() but could’ve also used removeViewAt() by passing it theposition. isViewFromObject() – The object returned by instantiateItem() is a key/identifier. This method checks whether the View passed to it (representing the page) is associated with that key or not. It is required by a PagerAdapter to function properly. For our example, the implementation of this method is really simple, we just compare the two instances and return the evaluated boolean.

References:
http://www.androidbegin.com/tutorial/android-viewpager-gallery-images-and-texts-tutorial/
http://androidtrainningcenter.blogspot.in/2012/10/viewpager-example-in-android.html
http://codetheory.in/android-image-slideshow-using-viewpager-pageradapter/

No comments:

Post a Comment