Simple View Pager Example in android

Step 1> Create a .xml file with the name of main.xml and paste the below code.


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:orientation="vertical" >
          <!-- ViewPager -->
          <android.support.v4.view.ViewPager
                 android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:id="@+id/viewPager" />
         <!-- Footer -->
         <include layout="@layout/footer"  />
</FrameLayout>




Step 2> Create a  new .xml file with  the name of footer.xml and paste the below code



<?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="wrap_content"
    android:padding="15dip"
    android:background="@color/d_blue"
    android:layout_gravity="bottom"
    android:orientation="vertical" >
 
    <Button android:layout_height="wrap_content" android:layout_width="wrap_content"
    android:id="@+id/btn1"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/rounded_celll" />
     
     <Button android:layout_height="wrap_content" android:layout_width="wrap_content"
    android:id="@+id/btn2"
    android:layout_toRightOf="@id/btn1"
    android:layout_marginLeft="5dip"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/rounded_celll" />
   
   <Button android:layout_height="wrap_content" android:layout_width="wrap_content"
    android:id="@+id/btn3"
    android:layout_toRightOf="@id/btn2"
    android:layout_marginLeft="5dip"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/rounded_celll" />

</RelativeLayout>




Step 3>  Create a class with the name of ViewPagerStyleActivity.java which extends FragmentActivity  and paste the following code.


package com.manishkpr.viewpager;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.Button;

public class ViewPagerStyleActivity extends FragmentActivity {
private ViewPager _mViewPager;
private ViewPagerAdapter _adapter;
private Button _btn1,_btn2,_btn3;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        setUpView();
        setTab();
    }
    private void setUpView()
    {    
     _mViewPager = (ViewPager) findViewById(R.id.viewPager);
    _adapter = new ViewPagerAdapter(getApplicationContext(),getSupportFragmentManager());
    _mViewPager.setAdapter(_adapter);
_mViewPager.setCurrentItem(0);
initButton();
    }
 
    private void setTab()
    {
_mViewPager.setOnPageChangeListener(new OnPageChangeListener()
{
@Override
public void onPageScrollStateChanged(int position) {}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {}
@Override
public void onPageSelected(int position)
{
// TODO Auto-generated method stub
btnAction(position);
}

});
    }
    private void btnAction(int action){
    switch(action){
     case 0: setButton(_btn1,"1",40,40); setButton(_btn2,"",20,20); setButton(_btn3,"",20,20);  break;
   
     case 1: setButton(_btn2,"2",40,40); setButton(_btn1,"",20,20); setButton(_btn3,"",20,20); break;
   
     case 2: setButton(_btn3,"3",40,40); setButton(_btn1,"",20,20); setButton(_btn2,"",20,20); break;
    }
    }
    private void initButton()
    {
    _btn1=(Button)findViewById(R.id.btn1);
    _btn2=(Button)findViewById(R.id.btn2);
    _btn3=(Button)findViewById(R.id.btn3);
   
    setButton(_btn1,"1",40,40);
    setButton(_btn2,"",20,20);
   
    setButton(_btn3,"",20,20);
    }
    private void setButton(Button btn,String text,int h, int w)
    {
    btn.setWidth(w);
    btn.setHeight(h);
    btn.setText(text);
    }
}





Step 4>  Create a class with the name of ViewPagerAdapter which extends FragmentPagerAdapter and paste the following code.


package com.manishkpr.viewpager;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class ViewPagerAdapter extends FragmentPagerAdapter {
private Context _context;
public static int totalPage=3;
public ViewPagerAdapter(Context context, FragmentManager fm) {
super(fm);
_context=context;

}
@Override
public Fragment getItem(int position) {
Fragment f = new Fragment();
switch(position)
{
case 0:
f=LayoutOne.newInstance(_context);
break;
case 1:
f=LayoutTwo.newInstance(_context);
break;
case 2:
f=LayoutThree.newInstance(_context);
break;
}
return f;
}
@Override
public int getCount()
{
return totalPage;
}
}





Step 5> Here i have created 3 fragments which i need to replace in view pager. Those are   fragment name are      LayoutOne.java,      LayoutTwo.java   and    LayoutThree.java



Step 6> create three xml files for three individual fragments those are layout_one.xml, layout_two.xml



Step 7> paste the following code in layout_one.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:gravity="center|center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="First Layout" />

</LinearLayout>




Step 8>    paste the following code in LayoutOne.java


package com.manishkpr.viewpager;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class LayoutOne extends Fragment {


public static Fragment newInstance(Context context) {
LayoutOne f = new LayoutOne();

return f;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
ViewGroup root = (ViewGroup) inflater.inflate(R.layout.layout_one, null);
return root;
}

}

Step 9> paste the following code in layout_two.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:gravity="center|center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Second Layout" />

</LinearLayout>




Step 10>  paste the following code in LayoutTwo.java


package com.manishkpr.viewpager;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class LayoutTwo extends Fragment {


public static Fragment newInstance(Context context) {
LayoutTwo f = new LayoutTwo();

return f;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
ViewGroup root = (ViewGroup) inflater.inflate(R.layout.layout_two, null);
return root;
}

}

Step 11> Paste the following code in LayoutThree.java


package com.manishkpr.viewpager;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class LayoutThree  extends Fragment {


public static Fragment newInstance(Context context) {
LayoutThree f = new LayoutThree();

return f;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
ViewGroup root = (ViewGroup) inflater.inflate(R.layout.layout_one, null);
return root;
}
}