Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 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

enter image description here

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:

enter image description here

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" /> 
like image 447
Javier Delgado Avatar asked Jun 03 '15 09:06

Javier Delgado


People also ask

How do I make tabLayout scrollable?

App -> java -> packagename ->MainActivity.java Now, implement a method and create “TabLayout”, “ViewPager” and “Toolbar local variable”. Change theme. Now, set text or icon using addTab. Tabs are creating using “newTab() method”.

How do you center a tabLayout on Android?

Setting app:tabMaxWidth="0dp" and android:layout_centerHorizontal="true" worked to center tabs. It worked for me.

How do I add tabs in programmatically?

addTab(Tab tab): This method is used to add a tab in the TabLayout. By using this method we add the tab which we created using newTab() method in the TabLayout. The tab will be added at the end of the list and If it is the first tab to be added then it will become the selected tab.


1 Answers

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.

like image 130
tachyonflux Avatar answered Oct 04 '22 03:10

tachyonflux