Text gets cut off in tablayout tab

Question

I'm using a tablayout in my android app that inflates custom tabs and set them up with icons. The text of one of the tabs gets cut off because of the lack of space. I have to make the text really small to display is fully. Here's how my tablayout is setup.

        <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:layout_scrollFlags="scroll|enterAlways"
        android:layout_width="match_parent"
        android:layout_height="@dimen/custom_tab_layout_height"
        app:tabMode="fixed"
        app:tabGravity="fill" />

The custom tab layout looks like this:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_text"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="?attr/selectableItemBackground"
    android:gravity="center"
    android:textSize="8dip"
    android:textColor="#ffffff"
    android:singleLine="true"/>

and here's the code where I setup the text and icons for the tabs:

            TextView tabOne = (TextView)LayoutInflater.From(this).Inflate(Resource.Layout.custom_tab, null);
        tabOne.Text = "Home";
        tabOne.SetCompoundDrawablesWithIntrinsicBounds(0, Resource.Drawable.homewhite, 0, 0);
        tabLayout.GetTabAt(0).SetCustomView(tabOne);

        TextView tab2 = (TextView)LayoutInflater.From(this).Inflate(Resource.Layout.custom_tab, null);
        tab2.Text = "Inbox";
        tab2.SetCompoundDrawablesWithIntrinsicBounds(0, Resource.Drawable.messageWhite, 0, 0);
        tabLayout.GetTabAt(1).SetCustomView(tab2);

        TextView tab3 = (TextView)LayoutInflater.From(this).Inflate(Resource.Layout.custom_tab, null);
        tab3.SetCompoundDrawablesWithIntrinsicBounds(0, Resource.Drawable.upload_icon, 0, 0);
        tabLayout.GetTabAt(2).SetCustomView(tab3);

        TextView tab4 = (TextView)LayoutInflater.From(this).Inflate(Resource.Layout.custom_tab, null);
        tab4.Text = "Notification";
        tab4.SetCompoundDrawablesWithIntrinsicBounds(0, Resource.Drawable.notifWhite, 0, 0);
        tabLayout.GetTabAt(3).SetCustomView(tab4);

        TextView tab5 = (TextView)LayoutInflater.From(this).Inflate(Resource.Layout.custom_tab, null);
        tab5.Text = "Profile";
        tab5.SetCompoundDrawablesWithIntrinsicBounds(0, Resource.Drawable.profWhite, 0, 0);
        tabLayout.GetTabAt(4).SetCustomView(tab5);

If I make the text big, the tablayout looks like this

How do I make the full text to show? If I make the tablayout scrollable then it moves to right and left as I click the tabs. Any help is appreciated.

Answer 1

Try to use padding even with zero value,
app:tabPaddingStart="0dp" app:tabPaddingEnd="0dp"
please check this snippet, this fixed the issue in my case.

 <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tablayout_height"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/black"
        app:tabTextColor="@color/pure_white"
        app:tabPaddingStart="0dp"
        app:tabPaddingEnd="0dp"/>