Design Support TabLayout

Question

I'm playing around with the Design Support Library TabLayout. My problem is that the title of one of the tabs is too long and so, it is drawn on 2 lines instead of 1. I'm wondering if there's a way scale the title text size to ensure that all titles are drawn on 1 line.

Here's a screenshot to better explain my problem:

In case the details are important, I'm using Design Support TabLayout, a ViewPager and a FragmentPagerAdapter to populate my tabs.

Thanks in advance!

Ciliolate

If you will see in TabLayout there is a constant private static final int MAX_TAB_TEXT_LINES = 2; and in TabView(LinearLayout) there is text view that is having a max lines set to textView.setMaxLines(MAX_TAB_TEXT_LINES); <br> So you can provide your custom view to the tab having set to max line one aand it will ellipsize at the end. i.e. tabLayout.addTab(tabLayout.newTab().setCustomView(View v) – Selah

@Ciliolate Do you get solution?? – Creak

Answer 1

You can change font size or another params of tabLayout in styles.xml. For example:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
        <item name="tabMaxWidth">@dimen/tab_max_width</item>
        <item name="tabIndicatorColor">?attr/colorAccent</item>
        <item name="tabIndicatorHeight">2dp</item>
        <item name="tabPaddingStart">12dp</item>
        <item name="tabPaddingEnd">12dp</item>
        <item name="tabBackground">?attr/selectableItemBackground</item>
        <item name="tabTextAppearance">@style/AppTheme.TextAppearance.Design.Tab</item>
        <item name="tabSelectedTextColor">?android:textColorPrimary</item>
    </style>

    <style name="AppTheme.TextAppearance.Design.Tab" parent="TextAppearance.AppCompat.Button">
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">?android:textColorSecondary</item>
        <item name="textAllCaps">true</item>
    </style>

Petro

Thanks for the reply Dmitriy, this sheds some light on my problem. Changing the text size will fix my immediate problem but I wonder if this fixes the problem for all devices. I want to ensure that tabs on devices of all sizes and resolutions take up only one line. Do you know if there a way to force the tab layout to fit the content of the tab onto one line? – Ciliolate

I don't know about singleLine like paramertre of textView, but you can add support for different devices. For textSize you can write value from dimen.xml files of different layouts. Watch this developer.android.com/intl/ru/guide/topics/resources/… – Petro

Answer 2

have you set:

<android.support.design.widget.TabLayout
    ..
    app:tabMode="scrollable" />

Macedoine

setting it to scrollable does set it onto one line but now the tabs aren't equally spaced. Any suggestions how to fix that? – Ciliolate

Hi Adam, the actual solution to your question is above from Dmitriy Chernov - however changing the text size doesn't follow Material Guidelines - google.com/design/spec/components/tabs.html#tabs-usage look specifically under subtitle content. It states to either wrap on two lines, or have as a scrollable tabs (as per suggestion) - the answer I gave follows guidelines and keeps your tab text on one line. you can try : app:tabMinWidth="dp value" in the TabLayout XML and play around with a dp value that fits your largest tab text – Macedoine

exactly what I'm was looking for, thanx! – Suchta

@MarkKeen I dont know why it doesnt help me. I have tabMode set to scrollable and it still doesnt put the text onto single line. :/ – Lucerne

Answer 3

They claimed to have fix this issue, but it's not working as of support library 22.2.1.

See: https://code.google.com/p/android/issues/detail?id=175516

Hepner

I agree, I am on 23.1.1 and still wraps; so I went with enabling scrollable – Cotterell

Answer 4

Update design support library to 23.1.0. They have fixed this issue, but your text size changes too

Pily

Text size via code doesn't work in 23.1.0, but you can set it via styles.xml as Dmitriy Chernov has done – Denature