How to put Vertically swiped ViewPager in a Horizontally swiped ViewPager
android, android-fragments, android-viewpager, swipe
Solution
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.
Problem
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> ```