Kotlin - Chapter 3 - Showcasing Viewpager using Kotlin

ViewPager in Android allows the user to flip left and right through pages of data. Screen slides are transitions between one entire screen to another and are common with UIs like setup wizards or slideshows.

This post shows you how to do screen slides with a ViewPager provided by the support library in Kotlin. ViewPagers can animate screen slides automatically.

You’ll divide the ViewPager implementation into three parts:

1. Adding the ViewPager
2. Creating an Adapter for the ViewPager
3. Wiring up the ViewPager and the Adapter

We have to add android.support.design.widget.TabLayout & android.support.v4.view.ViewPager in layout file same as Java.

ViewPager is only available through the Android Support Library. The Android Support Library is actually a set of libraries that provide backward compatible implementations of widgets and other standard Android functionality.

These libraries provide a common API that often allow the use of newer Android SDK features on devices that only support lower API levels. You should familiarize yourself with the Support Library and Support Library Packages.

We need to create our PageAdapter. This is a class that inherits from the FragmentPageAdapater class. In creating this class, we have two goals in mind:

1. Make sure the Adapter has our fragment list
2. Make sure it gives the Activity the correct fragment

By extending FragmentPagerAdapter, we can add multiple fragments to the ViewPager. We need to implement setupViewPager method in the ViewPagerActivity.

supportFragmentManager is equivalent to the getSupportFragmentManager() method you would use in Java and viewPager.adapter = pagerAdapter is the same as viewPager.setAdapter(pagerAdapter).

Note : The FragmentPagerAdapter is the more general PageAdapter to use. This version does not destroy Fragments it has as long as the user can potentially go back to that Fragment. The idea is that this PageAdapter is used for mainly "static" or unchanging Fragments. If you have Fragments that are more dynamic and change frequently, you may want to look into the FragmentStatePagerAdapter. This Adapter is a bit more friendly to dynamic Fragments and doesn't consume nearly as much memory as the FragmentPagerAdapter.

The output must be,

FragmentPagerAdapter or FragmentStatePagerAdapter?

There are two types of standard PagerAdapters that manage the lifecycle of each fragment: FragmentPagerAdapter and FragmentStatePagerAdapter. Both of them work well with fragments, but they are better suited for different scenarios:

1. The FragmentPagerAdapter stores the fragments in memory as long as the user can navigate between them. When a fragment is not visible, the PagerAdapter will detach it, but not destroy it, so the fragment instance remains alive in the FragmentManager. It will release it from memory only when the Activity shuts down. This can make the transition between pages fast and smooth, but it could cause memory issues in your app if you need many fragments.
2. The FragmentStatePagerAdapter makes sure to destroy all the fragments the user does not see and only keep their saved states in the FragmentManager, hence the name. When the user navigates back to a fragment, it will restore it using the saved state. This PagerAdapter requires much less memory, but the process of switching between pages can be slower.

Now save and run the App. You can download the full source code for this project on GitHub

Happy Coding !!!

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