View Pager Example

ViewFlipper is and user interface widget available in android since android API level 1. It can hold two more views, but only one child can be shown at a time. Using this we can implement functionality similar to android gallery item, swiping allows to navigate between images. It also support to auto flip between child at a regular interval.

1. MainActivity.java

package com.tutorialsee;

import static android.view.KeyEvent.KEYCODE_BACK;
import java.util.ArrayList;
import java.util.List;
import com.tutorialsee.R;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener, OnPageChangeListener{
   
    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;
   
    private static final int[] pics = { R.color.grey,
            R.color.sliding_menu_bg, R.color.facebook,
            R.color.newsd };
   
    private ImageView[] dots ;
    private int currentIndex;

    @SuppressWarnings("deprecation")
@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);
  
        views = new ArrayList<View>();
        LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
       
        for(int i=0; i<pics.length; i++) {
            ImageView iv = new ImageView(this);
            iv.setLayoutParams(mParams);
            iv.setImageResource(pics[i]);
            views.add(iv);
        }
        vp = (ViewPager) findViewById(R.id.viewpager);
        vpAdapter = new ViewPagerAdapter(views);
        vp.setAdapter(vpAdapter);
        vp.setOnPageChangeListener(this);
       
        initDots();
       
    }
   
    private void initDots() {
        LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
        dots = new ImageView[pics.length];
        for (int i = 0; i < pics.length; i++) {
            dots[i] = (ImageView) ll.getChildAt(i);
            dots[i].setEnabled(true);
            dots[i].setOnClickListener(this);
            dots[i].setTag(i);
        }
        currentIndex = 0;
        dots[currentIndex].setEnabled(false);
    }
   
    private void setCurView(int position)
    {
        if (position < 0 || position >= pics.length) {
            return;
        }
        vp.setCurrentItem(position);
    }

    private void setCurDot(int positon)
    {
        if (positon < 0 || positon > pics.length - 1 || currentIndex == positon) {
            return;
        }
        dots[positon].setEnabled(false);
        dots[currentIndex].setEnabled(true);
        currentIndex = positon;
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub 
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub    
    }

    @Override
    public void onPageSelected(int arg0) {
        setCurDot(arg0);
    }
    private void backToMainDesk() {
    startActivity(new Intent(this, QQActivity.class));
    finish();
    }
    public boolean onKeyDown(int keyCode, KeyEvent event) {
    switch (keyCode) {
    case KEYCODE_BACK:
    backToMainDesk();
    return true;
    default:
    break;
    }
    return super.onKeyDown(keyCode, event);
    }

    @Override
    public void onClick(View v) {
        int position = (Integer)v.getTag();
        setCurView(position);
        setCurDot(position);
    }
}

2. ViewPagerAdapter.java

package com.tutorialsee;

import java.util.List;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

public class ViewPagerAdapter extends PagerAdapter{

private List<View> views;
public ViewPagerAdapter (List<View> views){
this.views = views;
}

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

@Override
public void finishUpdate(View arg0) {
// TODO Auto-generated method stub
}

@Override
public int getCount() {
if (views != null)
{
return views.size();
}
return 0;
}

@Override
public Object instantiateItem(View arg0, int arg1) {
((ViewPager) arg0).addView(views.get(arg1), 0);
return views.get(arg1);
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0 == arg1);
}

@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
// TODO Auto-generated method stub 
}

@Override
public Parcelable saveState() {
// TODO Auto-generated method stub
return null;
}

@Override
public void startUpdate(View arg0) {
// TODO Auto-generated method stub
}
}

3. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

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

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24.0dip"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:contentDescription="@drawable/dot"
            android:padding="5.0dip"
            android:src="@drawable/dot" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:contentDescription="@drawable/dot"
            android:padding="5.0dip"
            android:src="@drawable/dot" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:contentDescription="@drawable/dot"
            android:padding="5.0dip"
            android:src="@drawable/dot" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:contentDescription="@drawable/dot"
            android:padding="5.0dip"
            android:src="@drawable/dot" />
    </LinearLayout>

</RelativeLayout>