In this tutorial, we’ll be implementing android nested ViewPager i.e a ViewPager within a ViewPager. Also, we’ll discuss and implement Vertical ViewPager too. We’ll be developing an application that replicates the swiping feature present in applications like Inshorts and Flipboard.

Android Nested ViewPager

If you’ve used the above-mentioned applications, you would have realized how easy it is to browse through different contents by just swiping up or down the current page.

The underlying view used to create such features is a ViewPager.

To brief up, ViewPagers use a PagerAdapter that adds pages (generally in the form of Fragment views) to our ViewPager.

By default, ViewPager has a built-in swipe gesture to swipe left or right. There’s an interface named PageTransformer that gets invoked while a scrolling on a ViewPager happens.

The PagerTransform interface contains the following public method that can be overridden and implemented.

  • page: The current view on which the transformation would be applied.
  • position: Position of the page relative to the current front-and-center position of the pager. 0 is front and center. 1 is one full page position to the right, and -1 is one-page position to the left.

Nested ViewPager is simply a ViewPager wrapped around another ViewPager.

What does this mean?

It means that we have a parent ViewPager in each page of a fragment. The child ViewPager would be hosted inside each of the above fragments.

In the following application, our parent View Pager would we a vertical swiping one. The child View Pager would be the default one that swipes/scrolls horizontally.

We’ll be developing an application that holds a list of Android Tutorials with their descriptions in a Vertical ViewPager. On swiping right, the tutorial would be displayed in a WebView.

Android Nested ViewPager Project

Create a new project in Android Studio and select the Tabbed Activity template from the below screen.

android-studio-kotlin-loading-screen

We will see a MainActivity.java class generated as shown below.

Alongside the activity, the class holds the Adapter and Fragment classes as well. This basic template displays a text on each of the pages in a ViewPager. Let’s look at the project structure before we begin with our implementation.

Android Nested ViewPager Project Structure

android-nested-viewpager-project-structure

Add the Internet permission in the AndroidManifest.xml file in the manifest tag.

  • MainActivity – That holds the parent ViewPager, namely the VerticalViewPager. Invokes the ParentViewPagerAdapter that creates instances of ParentFragment
  • VerticalViewPager – Contains a custom implementation of ViewPager that scrolls vertically. The pages hold a ParentFragment view which is supplied by ParentViewPagerAdapter.
  • ParentFragment – It’s present inside the VerticalViewPager. It holds another ViewPager and it’s adapter code is in the file ChildViewPagerAdapter. Fragment’s layout is defined in fragment_parent.xml.
  • ChildViewPagerAdapter – Contains the implementation of nested ViewPager. It holds and supplies ChildFragment‘s to the ParentFragment.
  • ChildFragment – Contains the UI that you’ll see. Layout file : fragment_child.xml
  • DataModel – Contains the data that’s supplied to the ChildFragment.

Android Nested ViewPager, Vertical ViewPager Code

The code for the VerticalViewPager.java class is given below:

setOverScrollMode(OVER_SCROLL_NEVER) is used to prevent over scrolling.

As we’d discussed before, we create a custom implementation of PageTransformer class where instead of translating the view horizontally using translationX, we do so vertically using translationY. Same is done for motion events when the user swipes on the screen.

The code for DataModel.java is given below.

The code of the activity_main.xml layout file is given below.

It hosts a VerticalViewPager only, which will in turn host the Parent Fragment.

The code of the MainActivity.java class is given below.

Things to note:

  • The VerticalViewPager’s adapter, namely ParentViewPagerAdapter is loaded with the data.
  • The trigger method is overridden from an interface defined in the ParentFragment class. It’s invoked by the ParentFragment whenever a page is changed. Its goal is to disable VerticalViewPager from scrolling/swiping when the Nested ViewPager is showing the second page(since the second page holds a WebView) that we’ll be seeing shortly.

Note: To avoid long strings in the class, we’ve defined them in the strings.xml resources file in our project:

android-nested-viewpager-strings-resources

Code for the ParentViewPagerAdapter.java class is given below.

The adapter creates a new ParentFragment class for each page. In total 5 pages for each of the DataModel elements.

The layout for the ParentFragment class is defined in fragment_parent.xml file as shown below.

The ParentFragment class holds the Nested ViewPager.

Things to note:

  • Each ParentFragment.java class holds a Nested ViewPager.
  • The ChildViewPagerAdapter creates a nested fragment (ChildFragment) instance for each page.
  • The Nested ViewPager would hold two pages(ChildFragment instances) only. The first would contain the title and description of the tutorial. The second page would show the tutorial in a WebView.
  • addOnPageChangeListener callback is used to determine the current page index.
  • interface ToggleVerticalViewPagerScrolling contains the method trigger. The trigger method passes the relevant page index to the MainActivity. Read communicating data from fragments
  • If the page index is 2 i.e. the WebView UI, the VerticalViewPager swiping is disabled.

The code for the ChildViewPagerAdapter.java class is given below.

The code for the layout fragment_child.xml is given below.

The code for the ChildFragment.java class is given below.

The isWebView parameter from newInstance method determines whether the WebView is shown/hidden. Button click would directly take the user to the WebView page.

Changing ViewPager page dynamically.

To change the ViewPager page we call the setCurrentItem() method on the ViewPager instance.

Don’t forget to add the CardView dependency to the build.gradle.

Android Vertical ViewPager App Output

The output of the above application in action.
android nested viewpager output

Adding Animation to Swipe Effect

Let’s animate the VerticalViewPager scrolling by creating a different PageTransformer class.

Initialise in the init method of the VerticalViewPager class in the following way.

The new output of the application is:
android vertical viewpager animation example output

This brings an end to android vertical ViewPager tutorial. Since the ViewPagers are swipeable in all four directions we’ve named the project as SwipeViewPagerInshorts. You can download it from the link below.

By admin

Leave a Reply

%d bloggers like this: