Android XML中修改TabLayout滑动到边界时对应区域颜色的方法

我希望修改TabLayout中当用户滑动ViewPager2但已无更多可滑动项时的对应区域颜色，参考如下颜色示例：

我的XML布局代码 #

<com.google.android.material.tabs.TabLayout
        android:id="@+id/main_tab_layout"
        style="@style/TabLayout"
        android:layout_width="327dp"
        android:layout_height="60dp"
        android:background="@drawable/tab_layout_bg"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/tab_layout_viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="23dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="23dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_tab_layout" />

我的TabLayout样式代码 #

<style name="TabTextStyle" parent="@android:style/TextAppearance.Widget.TabWidget">
        <item name="android:textSize">16sp</item>
        <item name="fontFamily">@font/graphik_medium</item>
        <item name="android:textColor">?attr/colorControlNormal</item>
    </style>

    <style name="TabLayout" parent="Theme.Dooit">
        <item name="tabTextAppearance">@style/TabTextStyle</item>
        <item name="tabSelectedTextColor">@color/white</item>
        <item name="tabMode">fixed</item>
        <item name="tabGravity">fill</item>
        <item name="tabIndicator">@drawable/tab_layout_custom_indicator</item>
        <item name="tabIndicatorColor">@color/black</item>
        <item name="tabIndicatorGravity">center</item>
        <item name="tabIndicatorFullWidth">true</item>
        <item name="tabRippleColor">@android:color/transparent</item>
    </style>

内容的提问来源于stack exchange，提问作者Ali Habibi