Search This Blog

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

4 comments:

  1. I like ur all examples....But this one is owsm...

    In this Example, I face 1 problem(not talk about error).
    when I want to change any Image or add some new images,every time I have to do some boring task...like open project and then I can add some new images.

    So,Can u extend this Example with use of xml or json parsing.
    so,It is easy to add or change only link in parsing file.

    ReplyDelete
    Replies
    1. Recently , i do not have such kind plan..But you can combine this with XML parsing tutorial from this blog

      Delete
  2. Your simple examples are easy to follow. Is there anyway you can do an example combining the swipe screen with your employee database example, so each screen would have a different employee name on it pulled from the database using the cursor? There is no complete example of this anywhere. Peter Kuterna has a CursorFragmentPagerAdapter sample code, but it is not a complete example and I can't follow it.

    ReplyDelete
    Replies
    1. Thank you Mr. Langdon. I will consider your suggestion and as soon as i got the time i will publish it

      Delete

Feedback always help in improvement. If you have any query suggestion feel free to comment and Keep visiting my blog to encourage me to blogging

Android News and source code