Android CardView 阴影不圆角答案

【问题标题】：Android CardView shadow is not roundedAndroid CardView 阴影不圆角
【发布时间】：2020-09-08 11:08:06
【问题描述】：

使用cardview我发现box-shadow不圆，在手机屏幕上看起来很糟糕，下面是使用的示例代码，也是阴影的截图，我添加了更多的阴影来强调，所以你可以清楚看到阴影的边缘是矩形的，而盒子是圆形的。

<androidx.cardview.widget.CardView
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="wrap_content"
android:layout_marginBottom="8dp"
android:background="@drawable/card"
android:elevation="5dp"
app:cardCornerRadius="5dp"
app:contentPaddingTop="8dp"
app:contentPaddingBottom="8dp"
app:contentPaddingLeft="@dimen/sideSpace"
app:contentPaddingRight="@dimen/sideSpace"
app:cardElevation="12dp">...

如何解决这个问题？

【问题讨论】：

标签： android android-layout android-cardview

【解决方案1】：

You can use this drawable as a background of any view for shadow

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding android:top="0.5dp" android:right="0.5dp" android:bottom="1dp" android:left="0.5dp" />
            <solid android:color="#10CCCCCC" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="0.5dp" android:right="0dp" android:bottom="1dp" android:left="0.5dp" />
            <solid android:color="#10CCCCCC" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#20CCCCCC" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
            <solid android:color="#30CCCCCC" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
            <solid android:color="#40CCCCCC" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
            <solid android:color="#50CCCCCC" />
            <corners android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape>

            <padding android:top="0dp" android:right="0.1dp" android:bottom="0.5dp" android:left="0.1dp" />
            <solid android:color="#60CCCCCC" />
            <corners android:radius="3dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="#ffffff" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</layer-list>

【讨论】：

【解决方案2】：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/dimen_10dp"
    android:divider="@android:color/transparent"
    android:dividerHeight="0.0px"
    android:clipToPadding="false"
    android:clipChildren="false"
    app:cardElevation="10dp"
    app:cardPreventCornerOverlap="false"
    android:elevation="@dimen/dimen_20dp"
    app:cardCornerRadius="@dimen/dimen_15dp"
    >

应该有一个孩子也有圆角半径。

【讨论】：

【解决方案3】：

这是你想要的吗？

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_centerInParent="true"
android:layout_marginTop="100dp"

xmlns:tools="http://schemas.android.com/tools"
    >
<com.google.android.material.card.MaterialCardView

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="8dp"
    android:elevation="0dp"
    android:background="@drawable/round"
    app:cardCornerRadius="100dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    app:contentPaddingTop="8dp"
    app:contentPaddingBottom="8dp"

    app:cardElevation="12dp">
</com.google.android.material.card.MaterialCardView>

<com.google.android.material.card.MaterialCardView
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginBottom="8dp"
        android:elevation="5dp"
        app:cardCornerRadius="5dp"
        app:contentPaddingTop="8dp"
        app:contentPaddingBottom="8dp"
        app:cardElevation="12dp"
      android:background="@drawable/round2">
    </com.google.android.material.card.MaterialCardView>


</RelativeLayout>

round.xml:-

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<!-- you can use any color you want I used here gray color-->
<solid android:color="#80000000"/>
<corners android:radius="30dp"/>
 </shape>

round2.xml:-

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<!-- you can use any color you want I used here gray color-->
<solid android:color="@color/colorAccent"/>
<corners android:radius="20dp"/>
</shape>

输出：-

【讨论】：