How to put Vertically swiped ViewPager in a Horizontally swiped ViewPager

Question

I'm customizing my Android app to swipe in the four directions, I'm using ViewPager to swipe Horizontally and VerticalViewPager to swipe vertically (this is like a modification of DirectionalViewPager as the original one is deprecated) . the problem is When containing the ViewPager in the VerticalViewPager, the Vertical swiping works only and when containing VerticalViewPager in the ViewPager the Horizontal swipe works only, this is my code for the first state:

VerticalViewPager verticalViewPager = (VerticalViewPager) findViewById(R.id.vertical_pager);
        verticalViewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager()));
        verticalViewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View view, float position) {
                int pageWidth = view.getWidth();
                int pageHeight = view.getHeight();

                if (position < -1) { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    view.setAlpha(0);

                } else if (position <= 1) { // [-1,1]
                    // Modify the default slide transition to shrink the page as well
                    float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
                    float vertMargin = pageHeight * (1 - scaleFactor) / 2;
                    float horzMargin = pageWidth * (1 - scaleFactor) / 2;
                    if (position < 0) {
                        view.setTranslationY(vertMargin - horzMargin / 2);
                    } else {
                        view.setTranslationY(-vertMargin + horzMargin / 2);
                    }

                    // Scale the page down (between MIN_SCALE and 1)
                    view.setScaleX(scaleFactor);
                    view.setScaleY(scaleFactor);

                    // Fade the page relative to its size.
                    view.setAlpha(MIN_ALPHA +
                            (scaleFactor - MIN_SCALE) /
                                    (1 - MIN_SCALE) * (1 - MIN_ALPHA));

                } else { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    view.setAlpha(0);
                }
            }
        });

        verticalViewPager.setCurrentItem(1);

        TabPagerAdapter TabAdapter = new TabPagerAdapter(getSupportFragmentManager());
        ViewPager Tab = (ViewPager) findViewById(R.id.pager);
        Tab.setAdapter(TabAdapter);
        Tab.setCurrentItem(1);

The TabPagerAdapter class:

public class TabPagerAdapter extends FragmentStatePagerAdapter {
    public TabPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        switch (i) {
        case 0:
            //Fragment for Left side
            return new AC_Left();
        case 1:
           //Fragment for Center side
            return new AC_Center();
        case 2:
            //Fragment for Right side
            return new AC_Right();
        }
        return null;

    }

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

AC_Left, AC_Right, and AC_Center are similar fragments except of the layout returned:

public class AC_Center extends Fragment {
  @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container,
              Bundle savedInstanceState) {
          View ac_center_frag = inflater.inflate(R.layout.ac_center_fragment, container, false);
          return ac_center_frag;

  }
}

And the XML file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg" >

  <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/buttonBar"
            android:orientation="vertical"
            android:weightSum="1" >

  <com.example.myapp.VerticalViewPager
            android:id="@+id/vertical_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <android.support.v4.view.ViewPager
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

  </com.example.myapp.VerticalViewPager>

 </LinearLayout>
</RelativeLayout>

I'm working on this myself. How far back do you have to support? — codeetcetera, Jun 04 '14 at 23:26
@btate what do you mean by how far back do i have to support — Muhammed Refaat, Jun 05 '14 at 07:04
I have the same requirements. I'm getting pretty close to a functional demo. I can send it to you when I'm there. — codeetcetera, Jun 10 '14 at 14:51
What are your requirements for wrapping? I have a working grid that wraps around to the beginning/end in all directions so far. I'm still working on stopping the paging when it hits the end of any direction. — codeetcetera, Jun 11 '14 at 14:01
@btate well, I don't want it to wrap, I want it to hit the end also — Muhammed Refaat, Jun 12 '14 at 06:46
By the way you can use RecyclerView with LinearSnapHelper and ViewPager inside each item. — Qamar, Dec 13 '16 at 18:02
Check out this http://stackoverflow.com/questions/29134094/recyclerview-horizontal-scroll-snap-in-center — Qamar, Dec 13 '16 at 18:03

score 5 · Accepted Answer · answered Jun 12 '14 at 14:38

I created a library for this with a sample application and put it on github. Basically it maintains a view port and updates the view pager on each page change. There's an adapter you have to implement to give it fragments for each row, column index. It's admittedly a little hacked together, but should work in the mean time. There's a bit mask you can set to have it wrap in whatever directions you need. Set it to GRID_WRAP_NONE to have it not wrap at all.

https://github.com/btate/BTGridPager-Android

This might not be exactly what you need but it should get you started.

How to put Vertically swiped ViewPager in a Horizontally swiped ViewPager

1 Answers1

Linked