TabLayout with ViewPager in Android

TabLayout is one of the Material Design components available in Android Support Library. Before implementing Tabs in Android, you shall go through the guidelines of Tabs implementation.

In this tutorial we will see:

  • How to implement simple tabs using TabLayout and ViewPager.
  • How to make Tabs scrollable when there are many tabs.
  • How to include icons along with text in Tab title.
  • How to make only icons as Tab titles.

Displaying Simple Tabs

1. Create a project in Android Studio with the name Tab Layout. Choose Tabbed Activity from Add an Activity to Mobile option:

Creating Tabbed Activity

In Configure Activity, choose Action Bar Tabs (with ViewPager) from Navigation Style:

Configuring Tabbed Activity

2. Add the string resources that will be used in this project to string.xml:

 

3. Delete fragment_main.xml file and add 3 fragment layout files namely fragment_dialer.xml, fragment_contacts.xml, fragment_messages.xml. These layout files form each of the fragment in the 3 Tabs we are going to implement. You can edit these files to display appropriate content.

4. Create a POJO named TabDetails. This will be used to hold tab title and corresponding fragment:

5. Edit MainActivity.java with the following code:

6. Update activity_main.xml as shown below:

Now run the application, you should be able to see the app as shown below:

Simple Tab Layout Demo

Implementing Scrollable Tabs

In order to demonstrate scrollable tabs, we will dynamically add 10 tabs. To do so, follow the below steps:

1. Add a layout file which can be reused for all the 10 tabs:

2. Do the below changes in MainActivty:

3. Now run the application and you should see the app as shown below:

Scrollable Tabs Layout Demo

Tabs with Icons and Text

1. Download mipmap.zip and extract the downloaded files to res folder in your project. This contains necessary icons for displaying in the tabs.

2. Do the highlighted changes in MainActivty

3. Now run the application:

Tabs with Icon and Text

Tabs with Only Icons

To have only icons as the tab title, you need to pass tabName as null while instantiating TabDetails in populateViewPager() method:

Tabs with Customized Colors

You can customize the tabs 2 ways:

  • statically through layout XML.
  • dynamically in MainActivity.

Before customizing add necessary colors to colors.xml file:

Customizing Tabs through layout XML

You add the attributes to TabLayout widget as highlighted below to change the Tab colors:

Customizing Tab colors dynamically

Add the following lines to populateViewPager() method to change Tab colors:

Now run the application:

Tabs with Custom Colors

Source code and APK file

You can download the Source code and APK files from the below links. I have combined all the features into one app.

Download Source CodeDownload APK

If you have any doubts, then we can discuss them in the comments section. If you have liked this tutorial, please do follow us on Twitter and Facebook.

Stay Connected

No spam guarantee.

Abhishek

Abhishek

Abhishek loves coding. His favorite is Android Development. Apart from coding he loves traveling and reading.
Abhishek

Leave a Reply

Your email address will not be published. Required fields are marked *