How set the fixed count in TabLayout?

Question

I am using TabLayout with viewPager and viewPager used RecyclerView to for it's fragment which extends FragmentStatePageAdapter.

This all is working fine. But, I have a scenario where i want to set the number of items to be fixed to only (7) for the tabLayout in scrollable mode (when tabMode is set to scrollable).

Somehow, it's only setting 5 items per device when tabLayout set to scrollable, but in my scenario i want it to adjust 7 items irrespective of any device.

I tried giving the item width as totalDeviceWidht/7 , but no luck as it's still taking the same widht.

I also tried overriding the onMeasure() method by writing a custom tabLayout. But, no luck.

I am not sure if the issue is with pagerTabStrip or how how viewPager and tabLayout calculates the number of items to be fixed when tabMode is set to scrollable.

I am stuck with this issue from last 3 days.

This is my main xml layout..

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

    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.movie.bms.views.activities.TimeActivity"
    tools:showIn="@layout/activity_time"
    >

    <android.support.design.widget.TabLayout
        android:id="@+id/time_sliding_tab"
        android:layout_width="match_parent"
        android:layout_height="61.8dp"
        android:background="#06acef"
        android:elevation="0dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        app:elevation="@dimen/elevation.small"
        app:tabGravity="center"
        app:tabIndicatorColor="@color/white"
        app:tabMode="scrollable"
        app:tabPaddingEnd="-1dp"
        app:tabPaddingStart="-1dp"
        android:fillViewport="false"
        ></android.support.design.widget.TabLayout>

     <com.utils.customcomponents.CustomViewPager
            android:id="@+id/time_view_pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:transitionName="@string/event_body_transition">
    </com.utils.customcomponents.CustomViewPager>
</LinearLayout>

Any kind of help or suggestion would be appreciated.

Answer 1

You can influence the actual width of the tabs by setting the app:tabMinWidth and app:tabMaxWidth element on the TabLayout in xml.

For a Nexus 5 (360dp) for instance:

<android.support.design.widget.TabLayout
        android:id="@+id/time_sliding_tab"
        android:layout_width="match_parent"
        android:layout_height="62dp"
        android:background="#06acef"
        app:tabGravity="center"
        app:tabMaxWidth="50dp"
        app:tabMinWidth="50dp"
        app:tabMode="scrollable" />

But truth being told, you need to take an estimated "guess" what your target width will be and optimise it for that. How it will look on an actual device will depend on its actual width.

In case you want to make it fit 100% you need to either:

• Instantiate the TabLayout in code and pass in the correct app:tabMinWidth and tabMaxWidth values as AttributeSet. (which you calculated based on the screen width)
• Use reflection on the existing TabLayout instance to set the mRequestedTabMinWidth and mRequestedTabMaxWidth private fields. (not recommended)

An example of how the reflection case would work:

import android.content.Context;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;

import java.lang.reflect.Field;

public class SevenTabLayout extends TabLayout {

    public class SetTabWidthException extends RuntimeException {

    }

    public SevenTabLayout(Context context) {
        super(context);
    }

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

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

    public void initializeTabWidths() {
        int tabwidth = 140; // Screensize divided by 7
        setPrivateField("mRequestedTabMinWidth", tabwidth);
        setPrivateField("mRequestedTabMaxWidth", tabwidth);
    }

    private void setPrivateField(String tabMinWidthFieldName, int value) {
        try {
            Field f = TabLayout.class.getDeclaredField(tabMinWidthFieldName);
            f.setAccessible(true);
            f.setInt(this, value);
        } catch (NoSuchFieldException e) {
            throw new SetTabWidthException();
        } catch (IllegalAccessException e2) {
            throw new SetTabWidthException();
        }
    }
}

Now you can easily add a unit test for the initializeTabWidths() method so you can detect when this stops working after upgrading the design support library.