Android: How to fill tabs with scrolling in custom tabLayout?

Question

I have a tablayout with 6 tabs. Tabs are fixed in the display but their text does not show completely. I do the solutions in here so that I can summarize them in these lines:

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        app:tabMode="fixed" />

But it did not solve my problem. I also use custom TabLayout in here and still I have the same problem.

Here are my codes:
I use a custom tablayout with this custom_tab.xml file:

   <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:layout_width="22dp"
            android:layout_height="22dp"
            android:layout_gravity="center"
            android:layout_marginTop="8dp"
            android:layout_centerHorizontal="true"
            android:id="@+id/tabIcon"/>

        <CustomViews.CustomTextView
            android:id="@+id/basket_badge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="15dp"
            android:background="@drawable/notification_circle"
            android:padding="2dp"
            android:textColor="#ffffff"
            android:textSize="8sp" />
        <CustomViews.CustomTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/tab_inactive"
            android:textSize="8sp"
            android:layout_centerHorizontal="true"
            android:layout_below="@id/tabIcon"
            android:layout_marginBottom="2dp"
            android:maxLines="1"
            android:id="@+id/tabTitle"/>

    </RelativeLayout>

The first ImageView shows the tab icon. The next ImageView is used for the badge and the CustomTextView is used for showing the tab title.
Here is my layout file include tablayout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        app:tabMaxWidth="0dp"
        android:layoutDirection="rtl"
        android:id="@+id/avatar_tabLayout"
        app:tabIndicatorColor="@null"
        />    
</LinearLayout>

Is there a way to set up tab width with Maximum existence tab size? Or any other solutions?

Answer 1

Try to get rid off

app:tabGravity="fill"
app:tabMode="fixed"

in your <android.support.design.widget.TabLayout

Replace it with app:tabMode="scrollable"