Playing with the new support TabLayout

  2 mins read

Today I had to implement the new TabLayout from the support library and this is my Tips&Tricks to implement the tabs in a painless way.

The default tab indicator is so thin and can’t be appreciated it if the background is similar to the indicator. The first thing to change is the tab indicator height by modifying the xml where the TabLayout is declared:

The difference between the 1dp and 4dp is notorious:

The height of the tabs is fixed to 48dp. The material guidelines uses 48dp when you have text only but if you want an icon the height is 72dp (Tab guidelines). So to solve it I subclassed the TabLayout and overrided onMeasure in this way:

With this code, you can set it the height at whatever value you want.

48dp tabs:

72dp tabs:

We have custom tab views and a ViewPager, so I can’t use the method tabLayout.setupWithViewPager(); because I need to specify a custom view for each tab, so I created a custom layout and I use the method addTab in this way:

And later to set the movement between pager and TabLayout do this:

To distribute the Tabs to all the of the width of your screen you need to set MATCH_PARENT on the TabLayout xml component and in the code set the tab gravity to GRAVITY_FILL:

The last trick: If you use a tab gravity “GRAVITY_FILL” and you see a stripped text maybe is because the TabLayout is applying some insets when creating the tabs, you can fill all the available horizontal space by setting this in the TabLayout:

Normal tabs:

With negative horizontal padding:

Written by:

Christian Panadero Martinez