Android 开发问题：CardView 的阴影效果会受到父容器的裁切

在 Android 开发中，CardView 的阴影效果会受到父容器的裁切（见上图），此问题下的父容器可以分为两种

无 padding 的父容器

xml 复制代码

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.cardview.widget.CardView
        android:layout_width="492px"
        android:layout_height="420px"
        app:cardCornerRadius="10px"
        app:cardElevation="8px">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

有 padding 的父容器

xml 复制代码

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="20px"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.cardview.widget.CardView
        android:layout_width="492px"
        android:layout_height="420px"
        app:cardCornerRadius="10px"
        app:cardElevation="8px">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

处理策略

（1）针对无 padding 的父容器

禁用裁切，给祖父容器添加 android:clipChildren="false"

xml 复制代码

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    tools:context=".ViewShadowActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.cardview.widget.CardView
            android:layout_width="492px"
            android:layout_height="420px"
            app:cardCornerRadius="10px"
            app:cardElevation="8px">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" />
        </androidx.cardview.widget.CardView>
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

添加 CardView 的外边距，给 CardView 添加 android:layout_margin

xml 复制代码

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.cardview.widget.CardView
        android:layout_width="492px"
        android:layout_height="420px"
        android:layout_margin="20px"
        app:cardCornerRadius="10px"
        app:cardElevation="8px">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

启用 CardView 的兼容模式，给 CardView 添加 app:cardUseCompatPadding="true"

xml 复制代码

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.cardview.widget.CardView
        android:layout_width="492px"
        android:layout_height="420px"
        app:cardUseCompatPadding="true"
        app:cardCornerRadius="10px"
        app:cardElevation="8px">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

（2）针对有 padding 的父容器

给父容器添加 android:clipToPadding="false"

xml 复制代码

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:padding="20px"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.cardview.widget.CardView
        android:layout_width="492px"
        android:layout_height="420px"
        app:cardCornerRadius="10px"
        app:cardElevation="8px">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</LinearLayout>