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...
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...
