MaterialCardView包裹TabLayout时圆角未裁剪的问题排查

我尝试将TabLayout放入MaterialCardView中实现圆角效果，但未得到预期结果。

当前效果 #

期望效果 #

原布局代码 #

<?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>

问题排查与解决方案 #

核心问题 #

原布局中TabLayout默认带有不透明背景，直接覆盖了MaterialCardView的圆角区域；同时缺少选中Tab的圆角背景样式，无法匹配期望效果。

修改步骤 #

1. 调整MaterialCardView属性：添加兼容padding和内边距，确保子View不超出圆角范围，避免布局偏移。
2. 设置TabLayout透明背景：让CardView的圆角样式可见，避免被默认背景覆盖。
3. 添加Tab选中状态的圆角背景：通过drawable选择器实现选中Tab的圆角填充效果。

修改后的布局代码 #

<?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"
            android:padding="1dp"
            app:cardCornerRadius="@dimen/dp_20"
            android:theme="@style/Theme.MaterialComponents.Light"
            app:strokeColor="@color/dark_blue"
            app:cardPreventCornerOverlap="true"
            app:cardUseCompatPadding="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"
                android:background="@android:color/transparent"
                app:tabBackground="@drawable/tab_selector"
                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>

选中Tab的背景选择器（drawable/tab_selector.xml） #

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/dark_blue"/>
            <corners android:radius="@dimen/dp_19"/>
        </shape>
    </item>
    <item android:state_selected="false">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>
</selector>

说明 #

• app:cardUseCompatPadding="true"：添加兼容padding，解决不同Android版本的布局适配问题，配合cardPreventCornerOverlap确保子View不会超出圆角区域。
• TabLayout透明背景：让MaterialCardView的圆角样式得以展示，避免被TabLayout的默认背景覆盖。
• 圆角选择器：选中Tab的圆角半径设置为比CardView小1dp，防止超出CardView的边框，与期望效果一致。

内容的提问来源于stack exchange，提问作者Sachin Gurnani