Material Cardview - rounded corner of TabLayout not getting clipped

Question

When I'm putting my TabLayout inside MaterialCardView to make TabLayout rounder but I'm not getting desired result

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        
        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            app:cardCornerRadius="@dimen/dp_20"
            android:theme="@style/Theme.MaterialComponents.Light"
            app:strokeColor="@color/dark_blue"
            app:cardPreventCornerOverlap="true"
            app:strokeWidth="1dp">
            
            <com.google.android.material.tabs.TabLayout
                android:id = "@+id/tab_layout"
                android:layout_width = "match_parent"
                android:layout_height = "@dimen/dp_35"
                app:tabGravity = "fill"
                app:tabIndicatorColor = "@color/dark_blue"
                app:tabIndicatorGravity = "stretch"
                app:tabMaxWidth = "0dp"
                app:tabMode = "fixed"
                app:tabSelectedTextColor = "@android:color/white"
                app:tabTextAppearance = "@style/AppTabTextTools"
                app:tabTextColor = "?attr/colorPrimary">
            </com.google.android.material.tabs.TabLayout>
        </com.google.android.material.card.MaterialCardView>
        
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Please help me to figure out what's the problem in above layout.

I need result like below image

Answer 1

As suggested by @Malik Saifullah followed https://stackoverflow.com/a/50621395/770703

Created custom RoundedTabLayout class for simplification

class RoundedTabLayout : TabLayout, TabLayout.OnTabSelectedListener {
    private lateinit var currentContext: Context

    constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) {
        currentContext = context
        addOnTabSelectedListener(this)
    }

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs, 0) {
        currentContext = context
        addOnTabSelectedListener(this)
    }

    constructor(context: Context) : super(context)

    override fun onTabSelected(tab: Tab?) {
        if (selectedTabPosition == 0) {
            setTabBG(R.drawable.tab_left_select, R.drawable.tab_right_unselect)
        } else {
            setTabBG(R.drawable.tab_left_unselect, R.drawable.tab_right_select)
        }
    }

    override fun onTabUnselected(tab: Tab?) {
    }

    override fun onTabReselected(tab: Tab?) {
    }

    private fun setTabBG(tab1: Int, tab2: Int) {
        val tabStrip = getChildAt(0) as ViewGroup
        val tabView1 = tabStrip.getChildAt(0)
        val tabView2 = tabStrip.getChildAt(1)
        if (tabView1 != null) {
            val paddingStart = tabView1.paddingStart
            val paddingTop = tabView1.paddingTop
            val paddingEnd = tabView1.paddingEnd
            val paddingBottom = tabView1.paddingBottom
            ViewCompat.setBackground(tabView1, AppCompatResources.getDrawable(tabView1.context, tab1))
            ViewCompat.setPaddingRelative(tabView1, paddingStart, paddingTop, paddingEnd, paddingBottom)
        }
        if (tabView2 != null) {
            val paddingStart = tabView2.paddingStart
            val paddingTop = tabView2.paddingTop
            val paddingEnd = tabView2.paddingEnd
            val paddingBottom = tabView2.paddingBottom
            ViewCompat.setBackground(tabView2, AppCompatResources.getDrawable(tabView2.context, tab2))
            ViewCompat.setPaddingRelative(tabView2, paddingStart, paddingTop, paddingEnd, paddingBottom)
        }
    }
}