How to customize TabLayout like layout bellow

Create 2 drawables for selected and unselected as below,

1. drawable_selected_tab.xml

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <corners android:radius="5dp" />
       <solid android:color="@android:color/white"/>
   </shape>
   

2. drawable_unselected_tab.xml

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <solid android:color="@color/gray"/>
   </shape>
   

Now, You have to create selector using these 2 drawables,

3. tab_selector.xml

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- For selected tab -->
    <item
        android:drawable="@drawable/drawable_selected_tab"
        android:state_selected="true"/>
   
    <!-- For unselected tab -->
    <item
        android:drawable="@drawable/drawable_unselected_tab"
        android:state_selected="false"/>
    </selector>
   

Now give this tab_Selector.xml to your TabLayout's tabBackground like,

    <com.google.android.material.tabs.TabLayout 
       ...
       app:tabBackground="@drawable/selector_tab" />

Add more properties to this above TabLayout as per your requirement.