Android Support Design TabLayout Gravity Center and Mode Scrollable

Question

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

User · Answer

keeps things simple just add app tabMode  scrollable  and android layout gravity   bottom   just like this    lt 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    gt

User · Answer

All you need is to add the following to your TabLayout  custom tabGravity  fill    So then you ll have   xmlns custom  http   schemas android com apk res-auto   lt android support design widget TabLayout         android id    id tabs          android layout width  match parent          android layout height  wrap content          custom tabGravity  fill            gt

User · Answer

Look at android-tablayouthelper     Automatically switch TabLayout MODE FIXED and   TabLayout MODE SCROLLABLE depends on total tab width

User · Answer

add this line in your actiity when you adding tabs in tablayout  tabLayout setTabGravity TabLayout GRAVITY FILL

User · Answer

this is how i did it  TabLayout xml   lt 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                gt    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    lt  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

User · Answer

My final solution  class DynamicModeTabLayout   TabLayout        constructor context  Context     super context      constructor context  Context   attrs  AttributeSet     super context  attrs      constructor context  Context   attrs  AttributeSet   defStyleAttr  Int    super context  attrs  defStyleAttr       override fun setupWithViewPager viewPager  ViewPager             super setupWithViewPager viewPager           val view   getChildAt 0     return         view measure MeasureSpec UNSPECIFIED  MeasureSpec UNSPECIFIED          val size   view measuredWidth          if  size  gt  measuredWidth                tabMode   MODE SCROLLABLE             tabGravity   GRAVITY CENTER           else               tabMode   MODE FIXED             tabGravity   GRAVITY FILL

User · Answer

This is the only code that worked for me   public static void adjustTabLayoutBounds final TabLayout tabLayout                                           final DisplayMetrics displayMetrics        final ViewTreeObserver vto   tabLayout getViewTreeObserver        vto addOnGlobalLayoutListener new ViewTreeObserver OnGlobalLayoutListener               Override         public void onGlobalLayout                  tabLayout getViewTreeObserver   removeOnGlobalLayoutListener this                int totalTabPaddingPlusWidth   0              for int i 0  i  lt  tabLayout getTabCount    i                      final LinearLayout tabView     LinearLayout   LinearLayout  tabLayout getChildAt 0   getChildAt i                    totalTabPaddingPlusWidth     tabView getMeasuredWidth     tabView getPaddingLeft     tabView getPaddingRight                                if  totalTabPaddingPlusWidth  lt   displayMetrics widthPixels                    tabLayout setTabMode TabLayout MODE FIXED                   tabLayout setTabGravity TabLayout GRAVITY FILL                 else                  tabLayout setTabMode TabLayout MODE SCROLLABLE                              tabLayout setLayoutParams new LinearLayout LayoutParams LinearLayout LayoutParams MATCH PARENT  LinearLayout LayoutParams WRAP CONTENT                          The DisplayMetrics can be retrieved using this   public DisplayMetrics getDisplayMetrics          final WindowManager wm    WindowManager  getSystemService Context WINDOW SERVICE       final Display display   wm getDefaultDisplay        final DisplayMetrics displayMetrics   new DisplayMetrics         if  Build VERSION SDK INT  lt  Build VERSION CODES JELLY BEAN MR1            display getMetrics displayMetrics         else          display getRealMetrics displayMetrics              return displayMetrics      And your TabLayout XML should look like this  don t forget to set tabMaxWidth to 0     lt android support design widget TabLayout     xmlns app  http   schemas android com apk res-auto      android id    id tab layout      android layout width  wrap content      android layout height  wrap content      app tabMaxWidth  0dp   gt

User · Answer

As I didn t find why does this behaviour happen I have used the following code   float myTabLayoutSize   360  if  DeviceInfo getWidthDP this   gt   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

User · Answer

Very simple example and it always works          Setup stretch and scrollable TabLayout     The TabLayout initial parameters in layout must be     android layout width  wrap content     app tabMaxWidth  0dp     app tabGravity  fill     app tabMode  fixed         param context   your Context     param tabLayout your TabLayout     public static void setupStretchTabLayout Context context  TabLayout tabLayout        tabLayout post    - gt             ViewGroup LayoutParams params   tabLayout getLayoutParams            if  params width    ViewGroup LayoutParams MATCH PARENT       is already set up for stretch             return                     int deviceWidth   context getResources                                     getDisplayMetrics   widthPixels           if  tabLayout getWidth    lt  deviceWidth                tabLayout setTabMode TabLayout MODE FIXED               params width   ViewGroup LayoutParams MATCH PARENT            else               tabLayout setTabMode TabLayout MODE SCROLLABLE               params width   ViewGroup LayoutParams WRAP CONTENT                    tabLayout setLayoutParams params

User · Answer

lt android support design widget TabLayout                     android id    id tabList                      android layout width  wrap content                      android layout height  wrap content                      android layout gravity  center                      app tabMode  scrollable   gt

User · Answer

I created an AdaptiveTabLayout class to achieve this  This was the only way I found to actually solve the problem  answer the question and avoid workaround problems that other answers here don t   Notes    Handles phone tablet layouts  Handles cases where there s enough room for MODE SCROLLABLE but not enough room for MODE FIXED  If you don t handle this case it s gonna happen on some devices you ll see different text sizes or oven two lines of text in some tabs  which looks bad  It gets real measures and doesn t make any assumptions  like screen is 360dp wide or whatever      This works with real screen sizes and real tab sizes  This means works well with translations because doesn t assume any tab size  the tabs get measure  Deals with the different passes on the onLayout phase in order to avoid extra work  Layout width needs to be wrap content on the xml  Don t set any mode or gravity on the xml    AdaptiveTabLayout java  import android content Context  import android support annotation NonNull  import android support annotation Nullable  import android support design widget TabLayout  import android util AttributeSet  import android widget LinearLayout   public class AdaptiveTabLayout extends TabLayout       private boolean mGravityAndModeSeUpNeeded   true       public AdaptiveTabLayout  NonNull final Context context                this context  null              public AdaptiveTabLayout  NonNull final Context context   Nullable final AttributeSet attrs                this context  attrs  0              public AdaptiveTabLayout                    NonNull final Context context               Nullable final AttributeSet attrs              final int defStyleAttr                     super context  attrs  defStyleAttr           setTabMode MODE SCROLLABLE               Override     protected void onLayout final boolean changed  final int l  final int t  final int r  final int b                super onLayout changed  l  t  r  b            if  mGravityAndModeSeUpNeeded                        setModeAndGravity                         private void setModeAndGravity                 final int tabCount   getTabCount            final int screenWidth   UtilsDevice getScreenWidth            final int minWidthNeedForMixedMode   getMinSpaceNeededForFixedMode tabCount            if  minWidthNeedForMixedMode    0                        return                    else if  minWidthNeedForMixedMode  lt  screenWidth                        setTabMode MODE FIXED               setTabGravity UtilsDevice isBigTablet     GRAVITY CENTER   GRAVITY FILL                      else                       setTabMode TabLayout MODE SCROLLABLE                      setLayoutParams new LinearLayout LayoutParams                  LinearLayout LayoutParams MATCH PARENT  LinearLayout LayoutParams WRAP CONTENT             mGravityAndModeSeUpNeeded   false             private int getMinSpaceNeededForFixedMode final int tabCount                final LinearLayout linearLayout    LinearLayout  getChildAt 0           int widestTab   0          int currentWidth           for  int i   0  i  lt  tabCount  i                          currentWidth   linearLayout getChildAt i  getWidth                 if  currentWidth    0  return 0               if  currentWidth  gt  widestTab                                widestTab   currentWidth                                   return widestTab   tabCount             And this is the DeviceUtils class   import android content res Resources   public class UtilsDevice extends Utils       private static final int sWIDTH FOR BIG TABLET IN DP   720       private UtilsDevice           public static int pixelToDp final int pixels                return  int   pixels   Resources getSystem   getDisplayMetrics   density              public static int getScreenWidth                 return Resources                  getSystem                    getDisplayMetrics                    widthPixels             public static boolean isBigTablet                 return pixelToDp getScreenWidth     gt   sWIDTH FOR BIG TABLET IN DP             Use example    lt  xml version  1 0  encoding  utf-8   gt    lt FrameLayout     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  gt        lt com com stackoverflow example AdaptiveTabLayout         android layout width  wrap content          android layout height  wrap content          android background   colorPrimary          app tabIndicatorColor   color white          app tabSelectedTextColor   color text white primary          app tabTextColor   color text white secondary          tools layout width  match parent   gt    lt  FrameLayout gt    Gist  Problems Ask for help    You ll see this    Logcat   W View  requestLayout   improperly called by android support design widget TabLayout SlidingTabStrip 3e1ebcd6 V ED           ID 0 0-466 96  during layout  running second layout pass W View  requestLayout   improperly called by android support design widget TabLayout TabView 3423cb57 VFE   C    S   ID 0 0-144 96  during layout  running second layout pass W View  requestLayout   improperly called by android support design widget TabLayout TabView 377c4644 VFE   C        ID 144 0-322 96  during layout  running second layout pass W View  requestLayout   improperly called by android support design widget TabLayout TabView 19ead32d VFE   C        ID 322 0-466 96  during layout  running second layout pass   I m not sure how to solve it  Any suggestions    To make the TabLayout child measures  I m making some castings and assumptions  Like the child is a LinearLayout containing other views      This might cause problems with in further Design Support Library updates  A better approach suggestions

User · Answer

Tab gravity only effects MODE FIXED   One possible solution is to set your layout width to wrap content and layout gravity to center horizontal    lt 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    gt    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

User · Answer

This is the solution I used to automatically change between SCROLLABLE and FIXED FILL  It is the complete code for the  Fighter42 solution    The code below shows where to put the modification if you ve used Google s tabbed activity template    Override protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout activity main        Toolbar toolbar    Toolbar  findViewById R id toolbar       setSupportActionBar toolbar          Create the adapter that will return a fragment for each of the three        primary sections of the activity      mSectionsPagerAdapter   new SectionsPagerAdapter getSupportFragmentManager             Set up the ViewPager with the sections adapter      mViewPager    ViewPager  findViewById R id container       mViewPager setAdapter mSectionsPagerAdapter           Set up the tabs     final TabLayout tabLayout    TabLayout  findViewById R id tabs       tabLayout setupWithViewPager mViewPager           Mario Velasco s code     tabLayout post new Runnable                  Override         public void run                         int tabLayoutWidth   tabLayout getWidth                 DisplayMetrics metrics   new DisplayMetrics                ActivityMain this getWindowManager   getDefaultDisplay   getMetrics metrics               int deviceWidth   metrics widthPixels               if  tabLayoutWidth  lt  deviceWidth                                tabLayout setTabMode TabLayout MODE FIXED                   tabLayout setTabGravity TabLayout GRAVITY FILL                 else                               tabLayout setTabMode TabLayout MODE SCROLLABLE                                       Layout        lt android support design widget TabLayout         android layout width  wrap content          android layout height  wrap content          android layout gravity  center horizontal    gt    If you don t need to fill width  better to use  karaokyo solution

User · Answer

I think a better approach will be to set app tabMode  quot auto quot  and app tabGravity  quot fill quot  because setting tabMode to fixed can make headings congested and cause headings to occupy multiple lines on the other side setting it to scrollable could make them leave spaces at the end in some screen sizes  manually setting tabMode would give a problem when dealing with multiple screen sizes      lt com google android material tabs TabLayout     android id  quot   id tabLayout quot             app tabGravity  quot fill quot      android textAlignment  quot center quot      app tabMode  quot auto quot        gt

User · Answer

I solved this using following  if tabLayout chemistCategory getTabCount   lt 4                tabLayout chemistCategory setTabGravity TabLayout GRAVITY FILL        else               tabLayout chemistCategory setTabMode TabLayout MODE SCROLLABLE

[android] Android Support Design TabLayout: Gravity Center and Mode Scrollable

Examples related to android

Examples related to android-5.0-lollipop

Examples related to material-design

Examples related to gravity