Adding space between tabs in a TabLayout

Question

I am trying to add spaces between the tabs.

I would like to add gaps between the tabs, I have tried using padding but that changes the entire tab layout padding and not individual tabs. I have also tried other methods e.g. minWidth, while searching for an idea but couldn't figure it out, so i am here. Most of the project is default from when i created the tabbed layout activity, Here is the code i added/changed:

Thanks in Advance.

tab_background

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <corners
        android:radius="18dp"/>
    <!-- TabLayout background color -->
    <solid
        android:color="@color/colorPrimaryDark"/>

</shape>

tab_selected

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- radius should be half of the desired TabLayout height -->
    <corners
        android:radius="18dp"/>
    <!-- color of the selected tab -->
    <solid
        android:color="@color/colorWhite"/>



</shape>

tab_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- drawable for selected tab -->
    <item
        android:drawable="@drawable/tab_selected"
     android:top="-2dp" android:left="-5dp" android:right="-5dp" android:bottom="2dp"

    android:state_selected="true"/>
    <!-- drawable for unselected tab -->
    <item
        android:drawable="@drawable/tab_background"
        android:top="-2dp" android:left="-5dp" android:right="-5dp" android:bottom="2dp"

        android:state_selected="false"/>

</selector>

activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        >

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:gravity="top|center_horizontal"
            android:minHeight="?actionBarSize"
            android:padding="@dimen/appbar_padding"
            android:text="@string/app_name"
            android:fontFamily="@font/sofiabold"
            android:background="@color/colorPrimary"
            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:tabTextColor="@color/colorWhite"
            app:tabMode="auto"
            app:tabGravity="center"
            android:layout_gravity="center"
            android:background="@color/colorPrimary"
            app:tabBackground="@drawable/tab_selector"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:tabPaddingStart="16dp"
            app:tabPaddingEnd="16dp"
            android:paddingBottom="20dp"
            app:tabIndicatorHeight="0dp"
            app:tabRippleColor="@null"
            app:tabTextAppearance="@style/TabTextAppearance"/>
    </com.google.android.material.appbar.AppBarLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 1

It is late but it may be useful for other people .if you have 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>

Answer 2

You should use xml drawable, specially designed for this purposes - Inset Drawable: http://developer.android.com/guide/topics/resources/drawable-resource.html#Inset

For example:

res/drawable/tab_selector_inset.xml:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/tab_selector"
    android:insetRight="10dp"
    android:insetLeft="10dp" />

And use it in your TabLayout:

app:tabBackground="@drawable/tab_selector_inset"

(Inspired by Vasily Sochinsky)