TabLayout

The TabLayout is another new View type introduced recently by Google into Android. It makes it easy to implement scrolling tabs for your ViewPager. In this post I will describe how I implemented a simple example application using this new View.

I started off by creating my layout. Inside my parent LinearLayout I added an AppBarLayout and a ViewPager. In this example I added an AppBarLayout, but this is not required. The AppBarLayout will only act as a container layout for my TabLayout. A FrameLayout, or any other container layout would also work.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
        ...
    </android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</LinearLayout>

It’s important to note that I have included the app namespace in my parent layout. We will require this later.

xmlns:app="http://schemas.android.com/apk/res-auto"

Next I add my TabLayout to the layout file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
app:tabTextColor="#88FFFFFF"
app:tabSelectedTextColor="#FFFFFF"
app:tabMode="scrollable"/>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</LinearLayout>

The TabLayout is a child of the AppBarLayout. I set the layout_height and layout_width to wrap_content so that the layout only takes up as much space as it requires. I then set the layout_gravity to be center_horizontal, so that the TabLayout sits in the center of the AppBarLayout. On narrow screens, the TabLayout should end up taking up the width of the screen, but on wider screens such as tablets the TabLayout will nicely sit in the middle of the screen.

Next I set the text color of the tabs, and their selected color’s too.

Finally it’s important to set the tabMode property. For the tab mode, you have two options

  1. fixed — Setting the mode to fixed, will display all the tabs on the screen at once. The width of each tab will be divided up equally so they can all fit on the screen at once. You should only use this mode if you only have a few tabs to display, and want them all to show on the screen at the same time. If your labels are too long things will start looking weird …
  2. scrollable — Setting the mode to scrollable will display just a subset of your tabs on the screen, and then allow the tab bar to scroll. This allows for longer tab labels and a larger number of tabs.

In this example I am demonstrating the scrollable tabs.

Now that we have our layout, its time to hook up the code to the layout. I start by creating an adapter for my ViewPager. This adapter will serve up each page of the view adapter.

private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {

private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3", "Tab4", "Tab5", "Tab6", "Tab7" };

public ScreenSlidePagerAdapter(FragmentManager fm) {
super(fm);
}

@Override
public Fragment getItem(int position) {
return new ScreenSlidePageFragment();
}

@Override
public int getCount() {
return tabTitles.length;
}

@Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
return tabTitles[position];
}
}

My fragments for each page

public class ScreenSlidePageFragment extends Fragment {

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_screen_slide_page, container, false);
return rootView;
}
}

The layout for my fragments

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world"/>

</LinearLayout>

Now that I have the adapter for my ViewPager, I can hook up the rest of the code. In my onCreate method I set the adapter on the ViewPager, and then I can just set the view pager on the TabLayout.

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_layout);

viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(new ScreenSlidePagerAdapter(getSupportFragmentManager()));

tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager);
}

And thats it! Just with a few lines of code I am able to setup a scrolling TabLayout with a ViewPager

Scrolling tabs
Tabs are centered in landscape mode

All my sample code can be found in the Github link below:

https://github.com/davidluuAU/CoordinatorLayoutWithScrollingTabLayout