Adding Spaces between Tabs in Tab layout in android?

Issue

I am working on Android. I created a Tab layout with a view pager, and set the borders of a tab. I want to create spaces between tabs. I created separate files in drawable for the tab background and tab indicator. The screen shot of my app and code is attached below. I am glad if some one could help.

Layout File:

<com.google.android.material.tabs.TabLayout
    android:id="@+id/editor_Screen_Bottom_Sheet_TabLayout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_30sdp"
    android:layout_marginHorizontal="5dp"
    android:layout_marginStart="@dimen/_10sdp"
    android:layout_marginTop="10dp"

    android:layout_marginEnd="@dimen/_10sdp"
    android:clipToPadding="false"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/txttitle"
    app:tabBackground="@drawable/bottom_sheet_tab_unselected_background"
    android:fillViewport="false"

    app:tabGravity="fill"
    app:tabIndicator="@drawable/bottom_sheet_tab_indicator"
    app:tabIndicatorAnimationMode="linear"
    app:tabIndicatorColor="#0000"

    app:tabIndicatorGravity="center"
    app:tabIndicatorHeight="@dimen/_30sdp"
    app:tabMode="scrollable"
    app:tabSelectedTextColor="@color/white"
    app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
    app:tabTextColor="@color/dark_green" />


<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/editor_Screen_Bottom_Sheet_TabLayout">


</androidx.viewpager.widget.ViewPager>


Drawables Files:
(@drawable/bottom_sheet_tab_unselected_background)

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

<corners
    android:bottomLeftRadius="9dp"
    android:bottomRightRadius="9dp"
    android:topLeftRadius="9dp"
    android:topRightRadius="9dp" />

<stroke
    android:width="1dp"
    android:color="#E7E6E6">
</stroke>

<solid android:color="@color/white" />

   -----------------------------------------------------------------------
   (@drawable/bottom_sheet_tab_indicator)

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
    android:bottomLeftRadius="9dp"
    android:bottomRightRadius="9dp"
    android:topLeftRadius="9dp"
    android:topRightRadius="9dp" />

    <stroke
    android:width="1dp"
    android:color="@android:color/transparent">

    </stroke>

   <solid android:color="@color/dark_green" />

   </shape>

Solution

Simply add layer-list in your @drawable/bottom_sheet_tab_indicator file and add left and right margins according to your needs.

I have attached the code below.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:right="10dp"
        android:left="10dp">
        <shape 
            android:shape="rectangle">
            <corners
                android:bottomLeftRadius="9dp"
                android:bottomRightRadius="9dp"
                android:topLeftRadius="9dp"
                android:topRightRadius="9dp" />

            <stroke
                android:width="1dp"
                android:color="@android:color/transparent">

            </stroke>

            <solid android:color="@color/dark_green" />

        </shape>
    </item>
</layer-list>

If you want to add padding start and padding end so add tabMinWidth to your TabLayout.

I have attached the code below.

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:tabBackground="@drawable/tab_selector"
        app:tabGravity="center"
        app:tabMinWidth="50dp"   //important line to add padding horizontally 
        app:tabIndicatorHeight="0dp" />

I hope you got your solution :)

Answered By - Jaydeep parmar