TabLayout set spacing or margin each tab

Question

I want to set margin in between each tab. Like in PagerTabStrip which has setTextSpacing(int textSpacing) to make text spacing between tab. Can TabLayout do that?

score 100 · Accepted Answer · edited May 23 '17 at 11:33

100

Been fighting this problem for a while too, found the solution on this thread : Android Design Support Library TabLayout using custom tabs layout but layout wrapping the tabs

<!-- Add the padding to tabPaddingStart and/or tabPaddingEnd -->
<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tab_layout_height"
        app:tabPaddingStart="10dp"
        app:tabPaddingEnd="10dp">

edited May 23 '17 at 11:33

Community

1
1

answered Apr 09 '16 at 00:56

Sammy Patenotte

1,284
2
10
12

3

Its also removes space between tabs (which are default) if you set paddings to 0. Thanks! – Yusuf Çağlar Mar 12 '18 at 18:07
Is there a dynamic way for that? – john-salib Jan 23 '19 at 12:45
Not that I know of, just double checked the TabLayout source code, and it looks like it's only through XML. – Sammy Patenotte Jul 24 '19 at 16:37
by default it adds padding - use app:tabPaddingStart="0dp" app:tabPaddingEnd="0dp" if you want no padding – live-love Mar 21 '21 at 16:37

score 16 · Answer 2 · answered Jan 27 '16 at 06:58

16

You can use tabMinWidth attribute. like this.

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="44dp"
    app:tabIndicatorColor="@color/default_enable"
    app:tabTextColor="@color/font_default_03"
    app:tabSelectedTextColor="@color/default_enable"
    app:tabMinWidth="50dp"
    android:clipToPadding="false"
    android:paddingLeft="4dp"
    android:paddingRight="4dp" />

answered Jan 27 '16 at 06:58

권홍재

177
1
3

Aww it was clipToPadding that helped me out to position the indicator but still have a big clickable area – Sebastian Helzer Feb 04 '22 at 15:13

score 15 · Answer 3 · edited Mar 24 '20 at 10:48

You can remove weight and set marginEnd,marginStart and width for tabs in TabLayout.

kotlin:

val tabs = tabLayout.getChildAt(0) as ViewGroup

for (i in 0 until tabs.childCount ) {
       val tab = tabs.getChildAt(i)
       val layoutParams = tab.layoutParams as LinearLayout.LayoutParams
       layoutParams.weight = 0f
       layoutParams.marginEnd = 12.dpToPx()
       layoutParams.marginStart = 12.dpToPx()
       layoutParams.width = 10.dpToPx()
       tab.layoutParams = layoutParams
       tabLayout.requestLayout()
}

java:

ViewGroup tabs = (ViewGroup) tabLayout.getChildAt(0);

for (int i = 0; i < tabs.getChildCount() - 1; i++) {
       View tab = tabs.getChildAt(i);
       LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) tab.getLayoutParams();
       layoutParams.weight = 0;
       layoutParams.setMarginEnd(12);
       layoutParams.setMarginEnd(12);
       layoutParams.width = 10;
       tab.setLayoutParams(layoutParams);
       tabLayout.requestLayout();
}

you should call tabLayout.requestLayout() after for-loop for better performance — gturedi, Feb 08 '21 at 13:26

score 8 · Answer 4 · answered Mar 17 '16 at 04:24

layout

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

java

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
int betweenSpace = 100;

ViewGroup slidingTabStrip = (ViewGroup) tabLayout.getChildAt(0);

for (int i=0; i<slidingTabStrip.getChildCount()-1; i++) {
    View v = slidingTabStrip.getChildAt(i);
    ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) v.getLayoutParams();
    params.rightMargin = betweenSpace;
}

score 7 · Answer 5 · answered Feb 24 '22 at 14:48

When you wanted to achieve something like this for your TabLayout then follow this steps:

1. Layout XML Code:

    <com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/dp_5"
    app:tabBackground="@drawable/tab_selector"
    app:tabIndicator="@null"
    app:tabSelectedTextColor="@color/white"
    app:tabTextColor="@color/black" />

2. Tab Background Drawable Selector (drawable/tab_selector):

   <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_background_selected" android:state_selected="true" />
    <item android:drawable="@drawable/tab_background_unselected" />
</selector>

3. Drawable of tab_background_selected :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="@dimen/dp_5"
        android:left="@dimen/dp_5"
        android:right="@dimen/dp_5"
        android:top="@dimen/dp_5">

        <shape>
            <solid android:color="@color/btnBG" />
            <corners android:radius="@dimen/dp_10" />
        </shape>
    </item>
</layer-list>

4. Drawable of tab_background_unselected :

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="@dimen/dp_5"
        android:left="@dimen/dp_5"
        android:right="@dimen/dp_5"
        android:top="@dimen/dp_5">

        <shape>
            <solid android:color="@color/white" />
            <corners android:radius="@dimen/dp_10" />
        </shape>
    </item>
</layer-list>

score 5 · Answer 6 · answered Apr 24 '20 at 11:34

When you set tabPadding not working , you can try set tabMaxWidth and tabMinWidth. It is work for me.

  <android.support.design.widget.TabLayout
            app:tabMaxWidth="200dp"
            app:tabMinWidth="20dp"
            app:tabPaddingStart="0dp"
            app:tabPaddingEnd="16dp"
            app:tabMode="scrollable" />

score 5 · Answer 7 · answered Feb 22 '22 at 07:34

if anyone has custom background for tabs(selector), you just need add layer list to tabs background and set margin for them

selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_selected_tab" android:state_selected="true"/>
    <item android:drawable="@drawable/bg_unselected_tab"/>
</selector>

selected tab:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="8dp" android:left="8dp">
        <shape>
            <stroke android:width="1dp" android:color="@color/Green"/>
            <corners android:radius="@dimen/cardCornerRedius"/>
        </shape>
    </item>
</layer-list>

unselected tab:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="8dp" android:left="8dp">
        <shape>
            <stroke android:width="1dp" android:color="@color/Gray"/>
            <corners android:radius="@dimen/cardCornerRedius"/>
        </shape>
    </item>
</layer-list>

Ishwar Verma · Answer 8 · 2017-05-13T07:09:24.100

2

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

edited May 13 '17 at 07:09

answered May 10 '17 at 11:15

Ishwar Verma

119
1
5

2

By default android gives some minWidth, becasue of this there will be some minimum width for each tab. If you want to give width as wrap_content then give minWidth="0dp", and if you want space between tabs then give tabPaddingStart="10dp" and tabPaddingEnd="10dp" as per your requirement – Ishwar Verma May 13 '17 at 07:13
This is wat worked for me. None of the other answers!! – Vikram Baliga Jun 27 '23 at 19:07

score 0 · Answer 9 · answered Jul 29 '21 at 08:24

The answers are shown to help if the distance between the tabs is assumed to be the same.

But there are times when you need the last tabs to stand apart from the others (at the end of the view). So, you can not create a menu for a toolbar (and not create a toolbar), and use a common tab indicator for everything.

Unfortunately, you cannot directly set paddings and margins for each tabitem, but you can create a fictitious one more tab item and control the distance through attributes:

app:tabPaddingStart app:tabPaddingEnd app:tabMinWidth app:tabMaxWidth

Although this is a bit of a crutch solution.

score 0 · Answer 10 · answered Aug 22 '22 at 21:55

Specifying app:tabMinWidth fix the issue and you can then adjust padding using app:tabPaddingStart , app:tabPaddingEnd, but without adding app:tabMinWidth nothing got reflected.

<com.google.android.material.tabs.TabLayout
                            android:id="@+id/tabs"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:background="@color/bg_color"
                            app:tabIndicatorFullWidth="false"
                            app:tabMode="scrollable"
                            app:tabMinWidth="50dp"
                            app:tabPaddingStart="8dp"
                            app:tabPaddingEnd="8dp"
                            app:tabSelectedTextColor="@color/color_323232"
                            app:tabTextAppearance="@style/MyCustomTabTextAppearance"
                            app:tabTextColor="@color/color_cecece" />

score 0 · Answer 11 · answered Sep 20 '22 at 10:04

0

app:tabMode="fixed" to app:tabMode="scrollable"

answered Sep 20 '22 at 10:04

Mohit Der

11
2

if your text not fited on tab and text – Mohit Der Sep 20 '22 at 10:05

score 0 · Answer 12 · answered May 22 '23 at 06:11

1- Add "tabBackground" attributes in your tablayout xml view

2- Put this shape as a background and add stroke width as per your spacing requirements and set its color to transparent.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/app_theme_color" />
<stroke
    android:width="8dp"
    android:color="@color/transparent" />
<corners android:radius="20dp" />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />

Edwinfad · Answer 13 · 2016-11-21T21:56:21.610

This is how set margin for four different tabs. You can change the setMargins(v1,v2,v3,v4) function values to get a suitable fitting for the number of tabs that you are working with. I hope this helps. Please note that tabHost is the object of TabHost hosting different tabs you are working with.

Display display = getWindowManager().getDefaultDisplay();
            int width = display.getWidth();
            View currentView;
          for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
            {
                //This code removes divider between tabs
                tabHost.getTabWidget().setDividerDrawable(null);
                tabHost.getTabWidget().getChildAt(i).setLayoutParams(new
                         LinearLayout.LayoutParams((width/8)-2,50));
                 currentView = tabHost.getTabWidget().getChildAt(i);
                  LinearLayout.LayoutParams currentLayout =
                      (LinearLayout.LayoutParams) currentView.getLayoutParams();
                  currentLayout.setMargins(30, 5, 80, 0);

            }

TabLayout set spacing or margin each tab

13 Answers13

Linked