How to customize Background for the selected TabItem in Android TabLayout?

Question

I am trying to implement the tablayout as the following design-

I could design as this-

Could anyone please help me to achieve the following points?

1. When a tab is selected, the background should fill the 1st half or the 2nd half of the tab.
2. For a selected tab item, there is a small margin for the background. It should not completely fill the tab.

Code: MainActvity.xml

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab"
            android:layout_width="440sp"
            android:layout_height="64sp"
            android:layout_marginTop="100dp"
            android:layout_marginBottom="101dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@drawable/backGroundWithWhiteBorder"
            style="@style/customTabLayout"
            app:tabBackground="@drawable/tab_color_selector" />

tab_color_selector.xml

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

backGroundWithWhiteBorder.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="376dp"
    android:height="64dp"
    android:viewportWidth="376"
    android:viewportHeight="64">
  <path
      android:strokeWidth="1"
      android:fillColor="#00000000"
      android:strokeColor="#fff"/>
</vector>

Style.xml

    <style name="customTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/TabText</item>
    </style>
    <style name="TabText" parent="@android:style/TextAppearance.Widget.TabWidget">
        <item name="android:textAllCaps">false</item>
        <item name="android:textSize">30sp</item>
        <item name="android:textAlignment">center</item>
    </style>

Answer 1

You can achieve this kind of TabLayout with a MaterialCardView as the parent and the TabLayout as the child of it. To draw the outer rectangle section you can simply use the properties app:strokeWidth and app:strokeColor to draw the border and you can move the TabLayout inside the MaterialCardView using the android:layout_margin property.

Example:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:background="@android:color/black">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:cardBackgroundColor="@android:color/black"
        app:cardCornerRadius="0dp"
        app:strokeWidth="1dp"
        app:strokeColor="@android:color/white">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:backgroundTint="@android:color/transparent"
            android:layout_margin="5dp"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabMaxWidth="0dp"
            app:tabIndicatorColor="@android:color/transparent"
            app:tabIndicatorHeight="0dp"
            app:tabRippleColor="@android:color/transparent"
            app:tabTextColor="@android:color/darker_gray"
            app:tabSelectedTextColor="@android:color/white"
            app:tabBackground="@drawable/tabs_selector"
            app:tabTextAppearance="@style/CustomTabTextAppearance">

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="All" />

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Favourites" />

        </com.google.android.material.tabs.TabLayout>

    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

where @drawable/tabs_selector is the drawable tabBackground selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="#5F9EA0" />
            <corners android:radius="0dp" />
        </shape>
    </item>
    <item android:state_selected="false">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
            <corners android:radius="0dp" />
        </shape>
    </item>
</selector>

and @style/CustomTabTextAppearance is used to set a custom Tab Text Appearance:

<style name="CustomTabTextAppearance" parent="TextAppearance.MaterialComponents.Button">
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">14sp</item>
</style>

Result: