Horizontal + Vertical pager - Cordinal direction swipe alike Snapchat

             I have developed cardinal direction ( Top, Bottom, Left, and Right) swiping as same like Snap chat Dashboard. Here this is the final output screen shot,

When we swipe the Home screen from top           --- Profile fragment
                                                      from bottom     --- Discover fragment
                                                      from left           --- Settings fragment 
                                                      from right         --- More fragment , populates respectively. As per below screenshot,

        Although using ViewPager the vertical swiping is easy to implement, the horizontal swiping is tricky. But we should mix up with Horizontal & vertical pager to confess the cardinal direction swiping.

To solve this issue,
       We should go for Android  event bus implementation. Otto by Square is damn easy to integrate with our Android Studio project. I recommend to keep 'otto-1.3.3.jar' file in lib folder & add it to our project. Now we are ready to utilize otto event bus library to project.


The steps involve to achieve this tasks are,

Step 1 : 

Register EventBus.getInstance() in onResume() & unregister EventBus.getInstance() in onPause() of MainActivity.java

Step 2:
Implement addOnGlobalLayoutListener to request snap with a custom duration by calling VerticalPager#snapToPage(int, int)} method in OnCreate() of MainActivity.java

Step 3:
Add custom VerticalPager in activity_main.xml with three fragments TopFragment, CentralCompositeFragment, BottomFragment

    <?xml version="1.0" encoding="utf-8"?>
    <com.truedreamz.demo.swipe.view.VerticalPager xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/activity_main_vertical_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <fragment
            android:id="@+id/main_top_fragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            class="com.truedreamz.demo.swipe.fragment.TopFragment" />

        <fragment
            android:id="@+id/main_central_fragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            class="com.truedreamz.demo.swipe.fragment.CentralCompositeFragment" />

        <fragment
            android:id="@+id/main_bottom_fragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            class="com.truedreamz.demo.swipe.fragment.BottomFragment" />

    </com.truedreamz.demo.swipe.view.VerticalPager>

Step 4:
We are implementing Horizontal ViewPager i.e. SmartViewPager in CentralCompositeFragment.

What is  SmartViewPager?

        SmartViewPager resolves scroll gesture directions more accurate than a regular ViewPager component. This will make it perfectly usable into a scroll container such as ScrollView, ListView, etc.

         Default ViewPager becomes hardly usable when it's nested into a scroll container. Such container will intercept any touch event with a minimal vertical shift from the child ViewPager. So switch the page by scroll gesture with a regular ViewPager nested into a scroll container, the user will need to move his finger horizontally without vertical shift. Which is obviously quite irritating. {@link SmartViewPager} has a much much better behavior at resolving scrolling directions.

To populate SmartViewPager in onCreateView() of CentralCompositeFragment,

    ArrayList<Class<? extends Fragment>> pages = new ArrayList<Class<? extends Fragment>>();
    pages.add(LeftFragment.class);
    pages.add(CentralFragment.class);
    pages.add(RightFragment.class);
    mCentralPageIndex = pages.indexOf(CentralFragment.class);
    mHorizontalPager.setAdapter(new FragmentsClassesPagerAdapter(getChildFragmentManager(), getActivity(), pages));

As mentioned Step 3, We already added Top & Bottom fragment in the layout of HomeScreen.

Step 5:
If we run project, we can achieve the cardinal direction swiping as below,

Step 6:

By tapping on each icon Profile, Settings, Discover, and More for swiping to the fragment.
I have uploaded the workflow video for this feature,

I have shared the complete source code for this feature in Github,
https://github.com/JayaprakashR-Zealot/SnapchatDashboard


Kindly refer the parent reference of this feature if you feel any difficulties to understand the flow,
4-Directions-swipe-navigation


You can share your queries in the comment section.

Happy Coding !!!
Thanks...