I've been working on an E-commerce project for quite a while now and part of the screens is a product preview page which looks something like the image below:

Achieving this was pretty simple and straight forward. Let me show you how:

Define a selector as a drawable, and also have a drawable for the selected/unselected states.

For this solution, I started with editing the layout file and then added the functionality that changes the background colour for the current Tab.

First, the selector, tab_background.xml in the drawable folder:

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

Then, ic_selected_tab.xml in the drawable folder:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="110dp"
    android:height="30dp"
    android:viewportWidth="110"
    android:viewportHeight="30">
  <path
      android:fillColor="#EEF5FF"
      android:pathData="M15,0L95,0A15,15 0,0 1,110 15L110,15A15,15 0,0 1,95 30L15,30A15,15 0,0 1,0 15L0,15A15,15 0,0 1,15 0z" />
</vector>

And ic_unselected_tab.xml in the drawable folder:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="110dp"
    android:height="30dp"
    android:viewportWidth="110"
    android:viewportHeight="30">
    <path
        android:fillColor="@android:color/transparent"
        android:pathData="M15,0L95,0A15,15 0,0 1,110 15L110,15A15,15 0,0 1,95 30L15,30A15,15 0,0 1,0 15L0,15A15,15 0,0 1,15 0z" />
</vector>

Finally, in the layout_file.xml, specify the selector to use, and also specify the tab indicator style, since the app:tabIndicatorColor property in the TabLayout will now be ignored:

app:tabBackground="@drawable/tab_background"
app:tabIndicatorHeight="0dp"
app:tabIndicatorColor="@android:color/transparent"

This the full version of how your TabLayout code should look like:

<com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="30dp"
                app:tabBackground="@drawable/tab_background"
                app:tabGravity="fill"
                app:tabIndicatorColor="@android:color/transparent"
                app:tabIndicatorGravity="stretch"
                app:tabIndicatorHeight="0dp"
                app:tabMaxWidth="0dp"
                app:tabMode="fixed"
                app:tabSelectedTextColor="@color/colorPrimary"
              app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
                app:tabTextColor="@color/black" />

Result with the example above:

Happy Coding 👨🏻‍💻