TabPageIndicator Title Sometimes Split on 2 lines

[subodh-malgonde]

Sometimes the page title in TabPageIndicator is split into 2 lines, sometimes as whole words and sometimes as broken words. Here are some screen shots

1) Split into 2 lines - broken words

2) Split into 2 lines - whole words

3) Not split into 2 lines

Here is my layout code:

<LinearLayout
    android:id="@+id/product_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_below="@id/breadcrumb_bar">

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/pager_title_strip"
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:layout_gravity="top"
        android:paddingTop="2dp"
        android:layout_marginBottom="2dp" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent">
    </android.support.v4.view.ViewPager>
</LinearLayout>

Here is my style code:

<style name="CustomTabPageIndicator">
    <item name="footerColor">@color/brand</item>
    <item name="android:colorBackground">@color/white</item>
    <item name="footerLineHeight">1dp</item>
    <item name="footerIndicatorHeight">3dp</item>
    <item name="android:textColor">#FF555555</item>
    <item name="android:textSize">13sp</item>
    <item name="android:dividerPadding">5dp</item>
    <item name="android:layerType">software</item>
    <item name="android:showDividers">none</item>
    <item name="android:fadingEdge">horizontal</item>
    <item name="android:fadingEdgeLength">8dp</item>
    <item name="selectedColor">#FF000000</item>
    <item name="selectedBold">true</item>
    <item name="android:gravity">center</item>
    <item name="android:typeface">normal</item>
    <item name="android:background">@drawable/custom_tab_indicator</item>
    <item name="android:paddingLeft">10dip</item>
    <item name="android:paddingRight">10dip</item>
    <item name="android:paddingTop">4dp</item>
    <item name="android:paddingBottom">4dp</item>
</style>

Can anyone tell me whats wrong here which causes the page titles to randomly split into 2 lines and sometimes not?

[subodh-malgonde]

Re-opening this issue with the proper formatting for the earlier comment.

[NixSam]

I have the same issue. I think it has something with onMeasure method in TabPageIndicator . It resizes the view when there are smaller tabs to match screen width, but sometimes what you explained is happening. Method:

public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        final boolean lockedExpanded = widthMode == MeasureSpec.EXACTLY;
        setFillViewport(lockedExpanded);

        final int childCount = mTabLayout.getChildCount();
        if (childCount > 1 && (widthMode == MeasureSpec.EXACTLY || widthMode == MeasureSpec.AT_MOST)) {
            if (childCount > 2) {
                mMaxTabWidth = (int)(MeasureSpec.getSize(widthMeasureSpec) * 0.4f);
            } else {
                mMaxTabWidth = MeasureSpec.getSize(widthMeasureSpec) / 2;
            }
        } else {
            mMaxTabWidth = -1;
        }

        final int oldWidth = getMeasuredWidth();
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        final int newWidth = getMeasuredWidth();

        if (lockedExpanded && oldWidth != newWidth) {
            // Recenter the tab display if we're at a new (scrollable) size.
            setCurrentItem(mSelectedTabIndex);
        }
    }

I changed

final boolean lockedExpanded = widthMode == MeasureSpec.EXACTLY;

to

final boolean lockedExpanded = widthMode == MeasureSpec.UNSPECIFIED;

to go around this problem, but still this is not the best solution...