How to fit the tab width screen in android

Question

I implement the tab layout using android support library and it looks like

Here the tab width is not fit with screen and my layout is

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

Rozele

I think they work automatically, otherwise have to create customView for them with style of larger fonts, which may help but not sure – Spittoon

Answer 1

Try calling those methods on your TabLayout:

tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

Ganof

Answer 2

A "simpler" answer would just be adding app:tabMaxWidth="0dp" in your TabLayout xml:

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

Kalila

Answer 3

change this line

 app:tabMode="scrollable"
 

to

 app:tabMode="fixed"

and add

app:tabGravity="fill"
app:tabMaxWidth="0dp"

your final tablayout will be

 <android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="scrollable"
    app:tabGravity="fill"
    app:tabMaxWidth="0dp" />

Acarid

Answer 4

try setting the gravity of the children in the main container to center. That ideally should move the content to the center of the screen

Whalebone

Actually i want to fit tab's with device screen – Rozele

Try playing around with gravity in your TabLayout – Whalebone

Answer 5

I guess this is the simpliest way to achieve what you want.

public class CustomTabLayout extends TabLayout {
    public CustomTabLayout(Context context) {
        super(context);
    }

    public CustomTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        try {
            if (getTabCount() == 0)
                return;
            Field field = TabLayout.class.getDeclaredField("mTabMinWidth");
            field.setAccessible(true);
            field.set(this, (int) (getMeasuredWidth() / (float) getTabCount()));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

Mckee