Android Custom Tablayout like Youtube

Question

Excepted: Click this link to see image

How to create custom tablayout like youtube. i achieved the same result by using below code but tablayout get shrink on some devices. Each device needs different height to set for tablayout. So is there a way to draw by creating custom class? How can i extend Tablayout and draw and use the same functionality?

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:fitsSystemWindows="true"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  <com.google.android.material.tabs.TabLayout
                        style="@style/TabLayoutStyle"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:minHeight="48dp"
                        app:tabMaxWidth="200dp"
                        app:tabMinWidth="20dp"
                        app:tabPaddingBottom="2dp" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>


<style name="TabLayoutStyle" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/TabLayoutTextAppearance</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:gravity">center</item>
        <item name="background">@drawable/corner_radius</item>
        <item name="tabBackground">@drawable/backgound_rounded</item>
        <item name="android:clipToPadding">false</item>
        <item name="tabIndicatorHeight">0dp</item>
        <item name="border_color">@color/background</item>
        <item name="tabSelectedTextColor">@color/black</item>
        <item name="tabTextColor">@color/gray</item>
        <item name="tabIndicatorFullWidth">false</item>
        <item name="tabIndicatorColor">@android:color/transparent</item>
        <item name="tabMode">scrollable</item>
        <item name="tabGravity">fill</item>
    </style>

<style name="TabLayoutTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">12dp</item>
    <item name="textAllCaps">false</item>
    <item name="fontWeight">100</item>
    <item name="fontFamily">@font/regular</item>
</style>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <corners android:radius="@dimen/dimen_50dp" />
            <stroke android:color="@color/white" />
            <solid android:color="@color/white" />
        </shape>
    </item>
    <item android:state_selected="false">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <corners android:radius="@dimen/dimen_50dp" />
            <stroke android:width="0.5dp"
                android:color="@color/gray" />
            <solid android:color="@color/black" />
        </shape>
    </item>
</selector>

            val p = tab.layoutParams as MarginLayoutParams
            if (i == 0) {
                p.setMargins(40, 20, 30, 20)
            } else {
                p.setMargins(0, 20, 30, 20)
            }
            tab.requestLayout()

And im managing height of tablayout by

if (activity?.resources?.configuration?.smallestScreenWidthDp != null &&
                activity?.resources?.configuration?.smallestScreenWidthDp!! == 411) {
            val params = tab.layoutParams
            params.height = 110
            params.width = ViewGroup.LayoutParams.MATCH_PARENT
            tab.layoutParams = params
        } else if (activity?.resources?.configuration?.smallestScreenWidthDp != null &&
                activity?.resources?.configuration?.smallestScreenWidthDp!! == 360) {
            val params = tab.layoutParams
            params.height = 68
            params.width = ViewGroup.LayoutParams.MATCH_PARENT
            tab.layoutParams = params
        }