CardView in TabLayout

Question

I want to have TabLayout as this image

I want to change text color and background color on selection and elevation effect in XML side if possible.

I tried radio button but no luck on styling.

This buttons will be dynamic, count and text will be coming from service.

  <com.google.android.material.tabs.TabLayout
            android:id="@+id/tl_buttons"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            app:tabBackground="@drawable/tab_selector"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:tabTextColor="@color/colorPrimaryDark"
            android:background="@android:color/transparent"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabPadding="@dimen/margin_biggest"
            android:fillViewport="false"
            app:tabPaddingEnd="@dimen/margin_biggest"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/btnMovies"
            app:layout_constraintEnd_toEndOf="parent"
    />

tab_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/corner_radius_3dp" android:state_selected="true"/>
<item android:drawable="@drawable/corner_radius_3dp_dark"/>

custom_tab.xml

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/corner_radius_3dp"
    android:layout_marginEnd="@dimen/margin_biggest"
    android:elevation="4dp">
<TextView
        android:id="@+id/tv_tab_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:text="Movies"
        android:layout_gravity="center"
        android:background="@color/colorPrimary"
/>

I also tried to use custom tab and give a transparent background to it but still can not make it as I want.

val viewTab = LayoutInflater.from(applicationContext).inflate(R.layout.custom_tab,null)
    viewTab.tv_tab_item.text = "TV Show"
    val tab1 = binding.tlButtons.newTab()
    tab1.customView = viewTab
    val tab2 = binding.tlButtons.newTab().setText("Movies")

   binding.tlButtons.addTab(tab1)
   binding.tlButtons.addTab(tab2)