Android Material Design Tabs


With Material Design Android Team almost changed everything. They released a Support Library which included many material design components to build a good looking UI for Android Lollipop devices as well as older android versions.

Tab Layout is now part of Android Support Library. The material design solved many problems that android developer faced while creating any tab based UI.

Features of Material Design Tabs

  • We can use Image and text in tabs
  • Tab Strip color can be easily changed
  • Tabs can be easily used with other material design components like Toolbar, AppBar
  • Tabs can be made fixed or scrollable
  • We can use custom views for our tabs no need for 3rd party libraries

In this article I will show you how we can use support library to create awesome looking tabs.

Create a new project as MaterialDesignTabs follow this steps,


  • Download Icons from Google Material Icons site and paste into your drawable folder
  • Only download 24dp size icon or else Tabs will look ugly


1> Add these dependency in your build.gradle (Module:app),

After adding dependencies just rebuild your project, it will download the required files.


2> Now goto res-> values-> colors.xml and paste below code,

It is the color scheme for our entire app.


3> Inside values folder goto styles.xml and paste below code,

This is the style for our app, Material Design will do it’s charm to make app look beautiful.

By now our app will look like this,


status bar is now has primary dark color now,

Note: Change in Status Bar color will only work on Android Lollipop and above.


4> Now in your activity_main.xml copy paste below code,

AppBar is a view from support library which works similarly as LinearLayout. Inside AppBar we have defined ToolBar and TabLayout. AppBar is mostly used for scrolling gestures.

To make Tabs with swipe gesture we have included ViewPager from support library(v4).

By now our app will look like this,



5> Now create a new layout file as first_fragment.xml,

This file is a layout for our Fragment. Fragments are basically replaceable containers. We are going to use fragments along with ViewPager to implement swipe tabs.


6> Create another layout file second_fragment.xml and paste below code,


7> Create another layout file third_fragment.xml,


8> Create another layout file fourth_fragment.xml,

We have create 4 layout files for our fragment now it’s time to create corresponding java file for each layout.


9> Create new java file as and paste below code,

We don’t need to write much logic into this file. Our main purpose is to implement Swipable Tabs.


10> Create another java file as,


11> Create new java file as,


12> Create a new java file,

Although it is unneccesory but I have included all the Fragment’s XML and Java files in case somebody may not know about Fragments.


Now, here is a really important file this file will handle our Swipe Gesture. It is an adapter for our ViewPager which handles Gestures and will provide fragments related to that gestures.


13> Create a new java file and paste below code,

There are two options to create Adapter for ViewPager,

  1. FragmentStatePagerAdapter.
  2. FragmentPagerAdapter – This is the one we are using.

We can use any of them. The void addFragment() method is used to add fragments and associated tab names.


14> Now in your paste below code,

If you run the app, you will see something like, (Screenshot from device running Android 4.3)



Now comment these lines,

and replace the code inside setupViewPager(ViewPager viewPager) method to this,


15> Here is how our will look after making all above & other necessary changes,

Now you can see there are only Labels in Tabs instead of Icons. Our app looks like,



How to make Scrollable Tabs Like Google PlayStore?

Add this line to your TabLayout Widget inside your activity_main.xml.


How to change Tab Indicator Height?

Inside TabLayout Widget of your activity_main.xml change value of below line.


How to make tab icons looks closer to each other?

How to Change Tab Gravity?

Tab can have Gravity either fill or center.

Inside TabLayout Widget of your activity_main.xml change value of below line.

Run the app now.

Here is how our app will look like when it has center gravity and 4dp of Indicator height.



We can create many complex view just like the one google play store have, but for this tutorial I will not go further. In future we will implement complex UI using Tabs. If you have any error or suggestion mention below in comments.


Leave a Reply

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