FragmentPagerAdapter Swipe to show ListView 1/3 Screen Width

Question

I am wanting to have a view that when swiped to the right, the listView is shown. Very much similar to what is implemented in the new Google Play Store (Sample image below). I think its a ViewPager but I tried duplicating it without prevail. I was thinking it may just be that the 'listView Page' width attribute was set to a specific dp but that doesn't work. I also tried modifying pakerfeldt's viewFlow and cant figure out how Google does this

Am I on the right track? If someone has an idea how to duplicate this, I would greatly appreciate it. I think this may become a popular new way of showing a navigation view on tablets....? Code would be best of help. Thank you!!

enter image description here

Swipe right:

enter image description here

Finnished swipe; the layout shows the list and PART OF THE SECOND FRAGMENT (EXACTLY AS SHOWN) The list fragment does not fill the screen:

enter image description here

When the user swipes left, the main page is only shown and if the user swipes left again the viewPager continues to the next page.

Just a SlidingDrawer? http://developer.android.com/reference/android/widget/SlidingDrawer.html — Blundell, Mar 13 '12 at 23:46
@Blundell Not even - See the New Market - AKA "Play Store". Thnx — , Mar 13 '12 at 23:59
When I was working with the Fragment Pager, I seem to remember google's code making an assumption that all screens would be the same size. I think an alternative way to approach this would be to consider the list fragment (0 above) and the pages (1 & 2 above) to be separate displayable elements. When the view pager is at the first element (1) and receives a swipe left gesture, use a fragment transition to modify the view layout to be like your final image. This should be possible by setting up gesture facilities in the parent activity. — Nick Campion, Jun 12 '12 at 09:29
@Nick Campion [SEE MY ANSWER HERE](http://stackoverflow.com/a/10998095/742030) This is what I am using and works perfectly. — , Jun 13 '12 at 19:18

score 20 · Answer 1 · edited Jun 18 '13 at 04:01

20

The following code achieves the desired effect:

In PageAdapter :

@Override
public float getPageWidth(int position) {
if (position == 0) {
    return(0.5f);
} else {
    return (1.0f);       
}

edited Jun 18 '13 at 04:01

Kev

118,037
53
300
385

answered Sep 20 '12 at 21:00

bludef

211
2
7

Great! There can't be a simple method than this :) – intrepidkarthi Nov 08 '12 at 10:05

Codeversed · Answer 2 · 2012-04-10T02:27:42.120

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:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="@color/body_background">

<include layout="@layout/pagerbar" />
<include layout="@layout/colorstrip" />

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

</LinearLayout>

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! :)

score 1 · Accepted Answer · answered Jun 12 '12 at 13:50

1

Sorry for the late update. I implemented this from walkingice on Gethub with very little modification. Just use a conditional statement for a GestureDetector to swipe it into view only when a ViewPager id of '0' is in view. I also added a toggle whithin my ActionBar

answered Jun 12 '12 at 13:50

yeah it works... bit it works only with single different width fragment :/ – skyman Jun 17 '12 at 18:10
@skyma not sure what you meen?? Its totally customizable. – Jun 18 '12 at 15:58
I've no time to run the code, but it looks that I can have only one "Page" with different width and anything like ViewPager (view with Adapter) can be used :/ – skyman Jun 20 '12 at 16:51
@skyman You can have as many pages as you like -layed out any way you like. [Here is a functioning example](https://play.google.com/store/apps/details?id=com.groidify.uipatterns&hl=en) – Jun 20 '12 at 17:13
ok... but how can I have multiple "not-full-width" pages (aka sidebars)? – skyman Jun 21 '12 at 10:45
@Andaero Where did you add that condition? – intrepidkarthi Sep 14 '12 at 09:19

score 0 · Answer 4 · answered Jun 12 '12 at 13:29

I think you are looking to implement a "side navigation" beside a standard ViewPager.

I've read 2 different articles on this pattern:

The first one on the pattern itself:

Android Ui Pattern Emerging UI Pattern - Side Navigation

The second on a more detailed way of who to build it:

Cyril Mottier Fly-in app menu #1 #2 #3

This second article is referenced in Android Ui Pattern blog.

score 0 · Answer 5 · answered Jun 22 '12 at 09:37

With a little Trick, the behavior can be achieved with the ScrollView-Behavior inside the ViewPager. If you only want to restrict the area of the most left fragment, you can restrict the scroll limits of the ScrollView.

In your case: in the onPageChangeListener of the ViewPager do something like that:

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

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

@Override
public void onPageSelected(int arg0) {

}

private void restrictLeftScroll() {

    if (display != null) {

        /* get display size */
        Point size = new Point();
        display.getSize(size);

        /* get desired Width of left fragment */
        int fragmentWidth = getResources().getDimensionPixelSize(R.dimen.category_fragment_width);

        if (mViewPager.getScrollX() < size.x - fragmentWidth) {
            mViewPager.scrollTo(size.x - fragmentWidth, mViewPager.getScrollY());
        }
    }
}

This piece of code worked for me without problems. ;)

It worked for me without problems. I got the same result as in the play-store. It only works for the most left fragment. In the onPageScroll events, you can steer the behaviour of the extended ViewPager. Use my `restrictLeftScroll()` function to get the same as in the play store. — Neonfly, Oct 29 '12 at 10:20

score 0 · Answer 6 · answered Mar 14 '12 at 00:24

0

ViewPager is a part of the Compatibly Package

If you're using Fragments, then you can use ViewPager to swipe between them.

Here's an example of combining Fragments and ViewPager

In your particular case, you would want to create a ListFragment and then implement ViewPager.

answered Mar 14 '12 at 00:24

adneal

30,484
10
122
151

Thnx but that is what Iv'e been playing with too. I cant figure how to have fragment 0 (or the first page) not occupy the entire screen. Please see the Play Store app. – Mar 14 '12 at 01:16
If you're having layout problems, then adjust your layout. You have to inflate one for your `Fragment`. – adneal Mar 14 '12 at 03:01
Ah, wait. I think what you're talking about is the margin between `Fragments`. If that's the case, then use `setPageMargin()` with `ViewPager` to create space between each `Fragment`. – adneal Mar 14 '12 at 07:51

FragmentPagerAdapter Swipe to show ListView 1/3 Screen Width

6 Answers6

Linked