Android Support Design TabLayout: Gravity Center and Mode Scrollable

tablayout not filling width when tabmode set to 'scrollable'
android tablayout
android.support.design.widget.tablayout androidx
scrollable tablayout android example
android tablayout style
android-tablayout center selected tab
android tablayout tab width programmatically
scrollable tabs'' android

I am trying to use the new Design TabLayout in my project. I want the layout to adapt to every screen size and orientation, but it can be seen correctly in one orientation.

I am dealing with Gravity and Mode setting my tabLayout as:

    tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

So I expect that if there is no room, the tabLayout is scrollable, but if there is room, it is centered.

From the guides:

public static final int GRAVITY_CENTER Gravity used to lay out the tabs in the center of the TabLayout.

public static final int GRAVITY_FILL Gravity used to fill the TabLayout as much as possible. This option only takes effect when used with MODE_FIXED.

public static final int MODE_FIXED Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs. The maximum number of tabs is limited by the view’s width. Fixed tabs have equal width, based on the widest tab label.

public static final int MODE_SCROLLABLE Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs. They are best used for browsing contexts in touch interfaces when users don’t need to directly compare the tab labels.

So GRAVITY_FILL is compatible only with MODE_FIXED but, at is doesn't specify anything for GRAVITY_CENTER, I expect it to be compatible with MODE_SCROLLABLE, but this is what I get using GRAVITY_CENTER and MODE_SCROLLABLE

So it is using SCROLLABLE in both orientations, but it is not using GRAVITY_CENTER.

This is what I would expect for landscape; but to have this, I need to set MODE_FIXED, so what I get in portrait is:

Why is GRAVITY_CENTER not working for SCROLLABLE if the tabLayout fits the screen? Is there any way to set gravity and mode dynamically (and to see what I am expecting)?

Thank you very much!

EDITED: This is the Layout of my TabLayout:

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:background="@color/orange_pager"
    android:layout_height="wrap_content" />

Tab gravity only effects MODE_FIXED.

One possible solution is to set your layout_width to wrap_content and layout_gravity to center_horizontal:

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    app:tabMode="scrollable" />

If the tabs are smaller than the screen width, the TabLayout itself will also be smaller and it will be centered because of the gravity. If the tabs are bigger than the screen width, the TabLayout will match the screen width and scrolling will activate.

Android Support Design TabLayout: Gravity Center and Mode , Android Support Design TabLayout: Gravity Center and Mode Scrollable. I am trying to use the new Design TabLayout in my project. I want the layout to adapt to  tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER); tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); Je pense donc que s’il n’y a pas de place, la tabLayout est défilable, mais s’il y a de la place, elle est centrée. Des guides: public static final int GRAVITY_CENTER Gravité utilisée pour disposer les tabs au centre du TabLayout.

this is how i did it

TabLayout.xml

<android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:background="@android:color/transparent"
            app:tabGravity="fill"
            app:tabMode="scrollable"
            app:tabTextAppearance="@style/TextAppearance.Design.Tab"
            app:tabSelectedTextColor="@color/myPrimaryColor"
            app:tabIndicatorColor="@color/myPrimaryColor"
            android:overScrollMode="never"
            />

Oncreate

@Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
        mTabLayout = (TabLayout)findViewById(R.id.tab_layout);
        mTabLayout.setOnTabSelectedListener(this);
        setSupportActionBar(mToolbar);

        mTabLayout.addTab(mTabLayout.newTab().setText("Dashboard"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Signature"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Booking/Sampling"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Calendar"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Customer Detail"));

        mTabLayout.post(mTabLayout_config);
    }

    Runnable mTabLayout_config = new Runnable()
    {
        @Override
        public void run()
        {

           if(mTabLayout.getWidth() < MainActivity.this.getResources().getDisplayMetrics().widthPixels)
            {
                mTabLayout.setTabMode(TabLayout.MODE_FIXED);
                ViewGroup.LayoutParams mParams = mTabLayout.getLayoutParams();
                mParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
                mTabLayout.setLayoutParams(mParams);

            }
            else
            {
                mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
            }
        }
    };

I made small changes of @Mario Velasco's solution on the runnable part

TabLayout, How do I change the TabLayout font size on android? Auto-sizing tabs behave like MODE_FIXED with GRAVITY_CENTER while the tabs fit within the TabLayout's content width. Fixed tabs have equal width, based on the widest tab label. Once the tabs outgrow the view's width, auto-sizing tabs behave like MODE_SCROLLABLE, allowing for a dynamic number of tabs without requiring additional layout logic.

keeps things simple just add app:tabMode="scrollable" and android:layout_gravity= "bottom"

just like this

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabMode="scrollable"
app:tabIndicatorColor="@color/colorAccent" />

Soporte para Android Design TabLayout: Gravity Center y Mode , en una orientación.Estoy tratando con Gravity y Mode configurando mi tabLayo​ Soporte para Android Design TabLayout: Gravity Center y Mode Scrollable. Estoy tratando de usar el nuevo <Android.support.design.widget.TabLayout  Android Support Design TabLayout: Centro de Gravedad y Modo Scrollable. Estoy intentando utilizar el nuevo diseño TabLayout en mi proyecto. Quiero que el diseño se adapte a cada tamaño de pantalla y orientación, pero se puede ver correctamente en una orientación.

As I didn't find why does this behaviour happen I have used the following code:

float myTabLayoutSize = 360;
if (DeviceInfo.getWidthDP(this) >= myTabLayoutSize ){
    tabLayout.setTabMode(TabLayout.MODE_FIXED);
} else {
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
}

Basically, I have to calculate manually the width of my tabLayout and then I set the Tab Mode depending on if the tabLayout fits in the device or not.

The reason why I get the size of the layout manually is because not all the tabs have the same width in Scrollable mode, and this could provoke that some names use 2 lines as it happened to me in the example.

Поддержка дизайна Android TabLayout: Gravity Center и Mode , Gravity used to lay out the tabs in the center of the TabLayout . int, GRAVITY_FILL. Gravity Set the behavior mode for the Tabs in this layout. TabLayout not filling width when tabMode set to 'scrollable' (7) I have added TabLayout (from support library v22.2.1) to my Fragment as:

Look at android-tablayouthelper

Automatically switch TabLayout.MODE_FIXED and TabLayout.MODE_SCROLLABLE depends on total tab width.

Tab Layout, Поддержка дизайна Android TabLayout: Gravity Center и Mode Scrollable. 87 Это не сработало для меня в API 15 / support.design:25.1.0. Вкладки были  If the problem is that for certain screen configurations (e.g. small screens, portrait config, etc.) the tabs need to be scrollable because they don't fit the screen and, for other screen config/sizes the number of tabs fit perfectly in the screen, you could just use the resource qualifiers to define your tabs differently for different screen config/sizes.

Android Support Design TabLayout: Gravity Center и Mode Scrollable, Tab Layout. TabLayout provides a horizontal layout to display tabs. The layout handles interactions for a group of tabs including: scrolling behavior,; (swipe)  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

design/src/android/support/design/widget/TabLayout.java, Как я не нашел почему это поведение произошло, я использовал следующий код: float myTabLayoutSize = 360; if (DeviceInfo.getWidthDP(this) >  GRAVITY_CENTER. Gravity used to lay out the tabs in the center of the TabLayout. int: GRAVITY_FILL. Gravity used to fill the TabLayout as much as possible. int: MODE_FIXED. Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs. int: MODE_SCROLLABLE

Creating an Android Tabbed Interface using the TabLayout , Gravity used to lay out the tabs in the center of the {@link TabLayout}. part of a scrolling container such as {@link android.support.v4.view.ViewPager}. * <p>. Tab layout are visible below toolbar with View pager, used to create swipeable views on. Tabs are designed to work with fragments. Use them to swipe fragments in view pager. In this article, we are…

Comments
  • @Fighter42 did you found any solution to this? I am facing the same problem.
  • The only way I found was getting the size of your tabs (manually) and then configure the layout parameters dinamically depending if it fits or not.
  • @Fighter42, can you post some sample code for the solution that you are using?
  • I know that my answer is not a good for logical but it helps me. Put some spaces before and after text. Then it will be scrollable. in both mode.
  • I am using Material design for my app. I followed the sample from androidhive.info/2015/09/… Tab scrollable is not working in Kitkat and Jelly bean devices. In lollipop i am able to scroll Tab but in other than lollipop devices Tab scrollable is not working but swipe is working fine. May i know what would be the problem.
  • This didn't work for me on API 15 / support.design:25.1.0. Tabs were left justified when narrower than window width. Setting app:tabMaxWidth="0dp" and android:layout_centerHorizontal="true" worked to center tabs.
  • It worked for me. Tabs are allways centered, but when they are not actually scrollable, they don't fill all the width.
  • This solution has the same problems I mentioned on the Tiago's solution.
  • This Solution work on tab without icon, what if I have icon with text ?? :/
  • @EmreTekin yes it works with an icon, my tabs had icons with text
  • tabLayout.getWidth() always returns zero for me
  • This is not what the creator is asking for. The problem with this approach is that in scenarios where you have 2 tabs or 3 three tabs in phones where the text is small, you'll have a layout like the Google Play Store where the tabs are on the left side. The creator want the tabs to reach from edge to edge when that is possible, and scroll otherwise.