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: enter image description here

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

Thanks in advance!

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);
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) — Neeraj Kumar, Jul 09 '15 at 22:17

score 21 · Answer 1 · answered Jul 09 '15 at 22:35

21

have you set:

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

answered Jul 09 '15 at 22:35

Mark

9,604
5
36
64

setting it to scrollable does set it onto one line but now the tabs aren't equally spaced. Any suggestions how to fix that? – Adam Jul 10 '15 at 14:23
1

Hi Adam, the actual solution to your question is above from Dmitriy Chernov - however changing the text size doesn't follow Material Guidelines - https://www.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 – Mark Jul 10 '15 at 14:59
exactly what I'm was looking for, thanx! – Roman Nov 20 '15 at 13:10
@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. :/ – pblead26 Aug 01 '16 at 19:48

score 10 · Accepted Answer · edited Sep 27 '16 at 12:46

10

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>

edited Sep 27 '16 at 12:46

Piyush

18,895
5
32
63

answered Jul 10 '15 at 03:52

Dmitriy Chernov

181
4

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? – Adam Jul 10 '15 at 14:26
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 http://developer.android.com/intl/ru/guide/topics/resources/more-resources.html#Dimension – Dmitriy Chernov Jul 12 '15 at 13:46

score 0 · Answer 3 · answered Aug 24 '15 at 08:19

0

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

answered Aug 24 '15 at 08:19

marmor

27,641
11
107
150

I agree, I am on 23.1.1 and still wraps; so I went with enabling scrollable – Eenvincible Dec 14 '15 at 09:47

score 0 · Answer 4 · edited Sep 27 '16 at 12:46

0

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

edited Sep 27 '16 at 12:46

Piyush

18,895
5
32
63

answered Oct 22 '15 at 16:31

Alexsander Amaral da Hora

23
1
5

Text size via code doesn't work in 23.1.0, but you can set it via styles.xml as Dmitriy Chernov has done – JeremyDay Nov 09 '15 at 23:31

Design Support TabLayout

4 Answers4