Android TabLayout and ViewPager With Examples

In this tutorial we’ll be implementing a ViewPager under the TabLayout that we’d already implemented in this tutorial.

Android TabLayout ViewPager Overview

ViewPagers are used to swipe through pages of data. It’s generally used in conjunction with fragments.
Let’s modify our layout from the previous tutorial as below.

activity_main.xml

Before we add up our ViewPager in the MainActivity, let’s set up it’s adapter.

The above ViewPagerAdapter extends the FragmentPagerAdapter. It invokes three Fragments, one for each of its pages. Each of the fragments holds a ListView as shown below

fragment_list.xml

The FragmentA(/B/C).java is given below:

The CustomAdapter.java class for the above ListView is:

The MainActivity.java class is given below

In the above code setupWithViewPager() is used to join the TabLayout with the ViewPager.
The getPageTitle() method in the FragmentPagerAdapter is used to set the title of each of the Tabs. Let’s look at output when the above code is run

android tab layout view pager issue

Question : Why isn’t the ToolBar scrolling as per the scrollFlags set?

It’s due to the ListView. The CoordinatorLayout doesn’t support the ListView(it’s not a part of Material Design) and it’s scrolling gestures. Hence it’s recommended to use RecyclerView instead.

Note: Fragments that belong to a CoordinatorLayout activity need to use NestedScrollView or RecyclerView as parent to allow the scrolling gestures to work correctly.

Before we replace our ListView implementation in the application, let’s wrap the current fragment’s layout with a NestedScrollView as shown below.

fragment_list.xml

Let’s see how the application behaves now:

android tablayout viewpager issue

Whoops, the scrolling is fixed but the ListView is displaying only one row now. Hence a ListView should not be used with our Material Design view types. Let’s fix the application now.

Android TabLayout ViewPager Project Structure

android-tab-layout-view-pager-project

 

Android TabLayout ViewPager Example Code

The activity_main.xml, MainActivity.java and ViewPagerAdapter.java classes are unchanged. Let’s look at the Fragments now.

The layout of the fragments is given below.

fragment.xml

The FragmentA(/B/C).java is given below

We’ve shifted the data to be displayed into the strings.xml file.
It’s defined there as

Note: We’ve optimised our fragment code logic such that it populates the adapter and displays it once the view is created.

The RecyclerViewAdapter.java has a string array as the argument.
The code for it is given below.

In the above code we’ve added a custom RecyclerViewHolder class that has a layout similar to list items.

The TextItemViewHolder.java class is given below.

The layout for the above custom ViewHolder is:

recycler_view_list_item.xml

The output of the application in action is given below
android tablayout viewpager output

The layout structure resembles that of the WhatsApp Application. To make it more similar do the following changes:

  • Import and add the two menu icon drawables
  • Inflate them in the MainActivity.java in the onCreateOptionsMenu()
  • Change the colorPrimary and colorPrimaryDark to #00897B and #00796B respectively

To inflate the menu layout add the following method in the MainActivity.java.

The menu_main.xml looks like this:

On doing the above changes you’ll end up with something like this

android-tab-layout-view-pager-similar-whatsapp

This brings an end to this tutorial. You can download the Android TabLayoutViewPager Project from the below link.

By admin

Leave a Reply