Adding space between tabs in a TabLayout

Viewed 1166

I am trying to add spaces between the tabs.

Here is how it looks at the moment

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

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)

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