what is the best way to set the tab layout tabmode for tablets?

Question

I am using the TabLayout from Android Design support library. How can I use MODE_SCROLLABLE along with GRAVITY_FILL so that it looks the same across all devices and orientations?

Currently if I use MODE_SCROLLABLE, it looks good on 7" tablet, but on 10" tablet, the tabs are aligned to the left. I want to be able to use GRAVITY_FILL for all sizes.

This is my tablayout:

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="72dp"            
/>

and I am setting the mode in code

 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

Mobley

Answer 1

Per the TabLayout.GRAVITY_FILL documentation:

Gravity used to fill the TabLayout as much as possible. This option only takes effect when used with MODE_FIXED.

Therefore by setting your mode to MODE_SCROLLABLE, tabs are always aligned from the starting edge - the only difference between tablets and phones for MODE_SCROLLABLE is the minimum width of tabs, as set by the tabs material design spec.

Note that you can specify both gravity and tab mode via XML if you want to set the view to always be scrollable:

<android.support.design.widget.TabLayout
  android:id="@+id/tab_layout"
  android:layout_width="match_parent"
  android:layout_height="72dp"
  app:tabMode="scrollable"
/>

Datura

I want the view to be scrollable if enough width is not available. But if width is available l want them to use GRAVITY_FILL. Is there any way to achieve this? Basically I want to make sure the tablayout always uses gravity_fill across phones, 7" tablets and 10" tablets in both orientation. But if I use GRAVITY_FILL with MODE_FIXED, the text in my tabs is getting truncated. – Mobley

Per the tab usage spec, fixed and scrollable tabs have a different use case and are not necessarily interchangeable. This is why by default the only thing that changes based on screen size is gravity. – Datura

Answer 2

//to get phones width in dp
int w= (int)((Resources.getSystem().getDisplayMetrics().widthPixels)/Resources.getSystem().getDisplayMetrics().density);
//To check screen width is greater than approx total no of tabswidth 
//I have calculated tabswidth by setting mode scrollable in layout and trying in defferent phones i got space left in 384dp width phone and no space in 360dp width phone so i took 370
        if(w>370){
            tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
            tabLayout.setTabMode(TabLayout.MODE_FIXED);
        }
    else
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

Ejector

Answer 3

I used a very similar solution to Jayesh, however mine uses a minimum width for the tabs and calculates which mode to use based on that. This way you only need to know what the smallest acceptable size for your tabs is. If they would all fit with room to spare, it'll stretch them out to fill up all the space, if there'd be too many, it'll make them the minimum width and switch to scrollable.

 DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
        float dpWidth = displayMetrics.widthPixels / displayMetrics.density;
        //For some reason, setting minWidth in xml and then accessing it here doesn't work, returns 0
        int minWidth = 80;
        tabLayout.setMinimumWidth(minWidth);

        //If there are less tabs than needed to necessitate scrolling, set to fixed/fill
        if(tabLayout.getTabCount() < dpWidth/minWidth){
            tabLayout.setTabMode(TabLayout.MODE_FIXED);
            tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        }else{
            //Otherwise, set to scrollable
            tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

        }

In the xml, the Tablayout just has these properties

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMaxWidth="0dp"
    />

Lejeune

Answer 4

I met the same problem.

In my opinion, there is no easy solution to solve the problem. In the FIX_MODE, all the tabs in the tablayout have the same width based on the maximum item.

And in the SCROLL_MODE, all the tabs has their own width.

So the solution is getting a little complex.

I've thought two solutions, first solution: give the text of each tab item some blank space to make all the item has the same width and in the same time fill the screen.

The other solution is using customview in tablayout,just as said in this article,then you can set the item width mannualy.

Thimerosal