FragmentPagerAdapter Swipe to show ListView 1/3 Screen Width

Question

EDIT: See my answer below-->

I am wanting to have a view that when swiped to the right, the listView is shown. Very much similar to what is implemen

Answer 1

Reading your question one last time... make sure you also set up specific layouts for each size device. In your screenshots it looks like your trying to run this on a tablet. Are you getting the same results on a phone?

Setting up your Layout

Make sure your layout is simular to this and has the ViewPager:

Setting up your Activity

Setup your PagerAdapter in your "FragmentActivity" and make sure you implement "OnPageChangeListener". Then properly setup your PagerAdapter in your onCreate.

public class Activity extends FragmentActivity 
             implements ViewPager.OnPageChangeListener { 
   ...

    public void onCreate(Bundle savedInstanceState) {

       PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());
       pager = (ViewPager) findViewById(R.id.example_pager);

       pager.setAdapter(adapter);
       pager.setOnPageChangeListener(this);
       pager.setCurrentItem(MyFragment.PAGE_LEFT);

       ...
   }


   /* setup your PagerAdapter which extends FragmentPagerAdapter */

   static class PagerAdapter extends FragmentPagerAdapter {
       public static final int NUM_PAGES = 2;

       private MyFragment[] mFragments = new MyFragment[NUM_PAGES];

          public PagerAdapter(FragmentManager fragmentManager) {
           super(fragmentManager);
       }

       @Override
       public int getCount() {
           return NUM_PAGES;
       }

       @Override
       public Fragment getItem(int position) {
           if (mFragments[position] == null) {
               /* this calls the newInstance from when you setup the ListFragment */
               mFragments[position] = MyFragment.newInstance(position);
           }

           return mFragments[position];
       }
   }

 ...

Setting up your Fragment

When you setup your actual ListFragment (your listViews) you can create multiple instances with arguments like the following:

  public static final int PAGE_LEFT = 0;
  public static final int PAGE_RIGHT = 1;

  static MyFragment newInstance(int num) {
       MyFragment fragment = new MyFragment();

       Bundle args = new Bundle();
       args.putInt("num", num);

       fragment.setArguments(args);
       return fragment;
   }

When you reload the listViews (how ever you decide to implement this) you can figure out which fragment instance you are on using the arguments like so:

    mNum = getArguments() != null ? getArguments().getInt("num") : 1;

If you step through your code you will notice that it will step through each instance so the above code is only needed in your onCreate and a reload method may look like this:

private void reloadFromArguments() {
    /* mNum is a variable which was created for each instance in the onCreate */
    switch (mNum) {
        case PAGE_LEFT:
            /* maybe a query here would fit your needs? */
            break;

        case PAGE_RIGHT:
            /* maybe a query here would fit your needs? */
            break;
    }
}

Few Sources that may help you out with examples that you could build from rather then starting from scratch:

More explanation and example from playground. http://blog.peterkuterna.net/2011/09/viewpager-meets-swipey-tabs.html which is references to: http://code.google.com/p/android-playground/

More info and some good linkage. http://www.pushing-pixels.org/2012/03/16/responsive-mobile-design-on-android-from-view-pager-to-action-bar-tabs.html

If you have more specific questions post and I can always Edit (update) my answer to address your questions. Good Luck! :)