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.