Remove line break in TabLayout

Question

I just added the new TabLayout component to my app. As you may know there are two different modes for tabs app:tabMode="scrollable" and app:tabMode="fixed".

When I use app:tabMode="fixed" I get following result:

There's no margin/padding on the left and right side but the text is wrapped.

But when I use app:tabMode="scrollable" I get following result:

The text is not wrapped but here is a weird margin on the right side and I can't get rid of it.

I also tried setting the tabGravity to either app:tabGravity="center" or app:tabGravity="fill" but did not achieve any changes.

Would be nice if any of you smart guys and girls got a solution for me.

Cheers, Lukas

Answer 1

Here's a quick hack, a lot shorter than using setCustomView(): use the android:theme attribute on your TabLayout:

<android.support.design.widget.TabLayout     android:id="@+id/tab_layout"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:theme="@style/TabLayout_Theme"     app:tabMode="fixed"/> 

Then in your themes XML:

<style name="TabLayout_Theme" parent="@style/AppTheme">     <item name="android:singleLine">true</item> </style> 

We have to do it this way, because unfortunately the android:singleLine attribute is ignored on the app:tabTextAppearance set on the TabLayout. app:tabTextAppearance is really only useful for changing text size.