Search This Blog

Support my cause by downloading

Sunday, 16 December 2012

Swipe screen navigation using Fragment and View pager in android application

Swiping screens in android application gives a interactive look to application. Using activity its quite difficult as it need some animations. But solution is to use Viewpager (it has default behavior of swipe left right). In ViewPager, attach fragment and its done.

Requirement of this tutorial will be

And Result will be like this video



Let move into depth, This result contain few steps to achieve it

Step 1) Make one fragment activity. This activity xml should contain one ViewPager. Using FragmentPagerAdapter we will add all fragment inside a ViewPager


 package com.horizontalscrollviewwithpageindicator;

import java.util.Vector;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.Toast;

import com.fragmentadapter.FragmentAdapter;
import com.fragmentclass.FragmentOne;
import com.fragmentclass.FragmentThree;
import com.fragmentclass.FragmentTwo;

public class FragmentMainActivity extends FragmentActivity {
 @Override
 protected void onCreate(Bundle arg0) {
  super.onCreate(arg0);
  setContentView(R.layout.activity_main);
  Vector<Fragment> fragments = new Vector<Fragment>();
  FragmentOne fragmentOne = new FragmentOne();
  Bundle bundle = new Bundle();
  bundle.putString(
    "url",
    "https://lh6.googleusercontent.com/-jZgveEqb6pg/"
      + "T3R4kXScycI/AAAAAAAAAE0/xQ7CvpfXDzc/s1024/sample_image_01.jpg");
  fragmentOne.setArguments(bundle);
  fragments.add(fragmentOne);

  FragmentTwo fragmenttwo = new FragmentTwo();
  bundle.putString(
    "url",
    "https://lh3.googleusercontent.com/"
      + "-WujkdYfcyZ8/T3R4qrIMGUI/AAAAAAAAAGk/277LIdgvnjg/s1024/sample_image_15.jpg");
  fragmenttwo.setArguments(bundle);
  fragments.add(fragmenttwo);

  FragmentThree fragmenthree = new FragmentThree();
  fragmenthree.setArguments(bundle);
  fragments.add(fragmenthree);

  ViewPager myPager = (ViewPager) findViewById(R.id.myfivepanelpager);
  FragmentAdapter adapter = new FragmentAdapter(
    getSupportFragmentManager(), fragments);
  myPager.setAdapter(adapter);
  myPager.setCurrentItem(0);

  myPager.setOnPageChangeListener(new OnPageChangeListener() {

   @Override
   public void onPageSelected(int arg0) {
    Toast.makeText(FragmentMainActivity.this,
      "Page Selected " + arg0, Toast.LENGTH_LONG).show();
   }

   @Override
   public void onPageScrolled(int arg0, float arg1, int arg2) {
   }

   @Override
   public void onPageScrollStateChanged(int arg0) {
   }
  });
 }
}

Step 2) Create one FragementPagerAdapter to add data (say Fragment here) to swipe this

package com.fragmentadapter;

import java.util.Vector;

import android.os.Parcelable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public class FragmentAdapter extends FragmentPagerAdapter {

 FragmentManager mManager;
 Vector<Fragment> localFragmentArray;

 public FragmentAdapter(FragmentManager fm, Vector<Fragment> loadFragment) {
  super(fm);
  localFragmentArray = loadFragment;
  mManager = fm;
 }

 @Override
 public Fragment getItem(int arg0) {
  return localFragmentArray.get(arg0);
 }

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

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

 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  return super.instantiateItem(container, position);
 }

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

 @Override
 public Parcelable saveState() {
  return super.saveState();
 }

}

Step 3) Create some Fragment Class and add these inside Apdater. Download the code and see how i have added Fragment inside ViewPager


Download Code

Android News and source code