如何为CircleImageView设置elevation阴影？解决方形阴影异常问题

我之前也踩过这个坑！本质原因是Android的elevation阴影是基于View的轮廓（Outline）生成的，而CircleImageView本身是通过裁剪画布来实现圆形显示的，它默认的Outline还是矩形，所以阴影就变成方形了。下面给你几个实用的修复方案：

方案1：自定义ViewOutlineProvider（推荐） #

直接给CircleImageView设置一个圆形的OutlineProvider，让系统基于圆形轮廓生成阴影：

CircleImageView circleImageView = findViewById(R.id.your_circle_image_view);
circleImageView.setOutlineProvider(new ViewOutlineProvider() {
    @Override
    public void getOutline(View view, Outline outline) {
        // 取View宽高中较小的值作为圆形直径
        int diameter = Math.min(view.getWidth(), view.getHeight());
        // 设置椭圆形轮廓（宽高相等就是圆形）
        outline.setOval(0, 0, diameter, diameter);
    }
});
// 开启裁剪，确保View的内容和轮廓一致
circleImageView.setClipToOutline(true);

注意事项：

• 要保证CircleImageView的宽高相等，否则会生成椭圆形阴影
• 如果你的CircleImageView设置了边框（border），需要调整setOval的参数，避免阴影覆盖边框：

  int borderWidth = circleImageView.getBorderWidth();
  outline.setOval(borderWidth, borderWidth, diameter - borderWidth, diameter - borderWidth);
  

方案2：用CardView包裹CircleImageView #

CardView本身支持基于圆角的elevation阴影，只需要把CircleImageView放在CardView里，让CardView的圆角等于CircleImageView的半径即可：

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardCornerRadius="60dp" <!-- 等于CircleImageView直径的一半 -->
    app:cardElevation="8dp"
    app:cardUseCompatPadding="true"> <!-- 避免阴影被父布局裁剪 -->

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/your_avatar"
        app:civ_border_width="2dp"
        app:civ_border_color="#ffffff" />
</androidx.cardview.widget.CardView>

这个方案的好处是不用写Java/Kotlin代码，纯布局就能搞定，而且CardView的阴影在不同版本的Android上兼容性更好。

方案3：手动绘制圆形阴影（静态阴影） #

如果以上两种方法都不适用，还可以通过LayerDrawable手动创建圆形阴影，适合不需要Z轴交互的场景：

1. 在res/drawable下创建circle_shadow.xml：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 阴影层 -->
    <item
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape android:shape="oval">
            <solid android:color="#44000000" /> <!-- 阴影颜色，alpha值控制深浅 -->
            <size android:width="120dp" android:height="120dp" />
        </shape>
    </item>
    <!-- 圆形底色层 -->
    <item>
        <shape android:shape="oval">
            <solid android:color="#ffffff" /> <!-- 和你的CircleImageView背景色一致 -->
            <size android:width="112dp" android:height="112dp" /> <!-- 比阴影层小8dp（上下左右各4dp） -->
        </shape>
    </item>
</layer-list>

2. 在布局中用一个ViewGroup包裹CircleImageView，把这个drawable设为背景：

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/circle_shadow"
    android:padding="4dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="112dp"
        android:layout_height="112dp"
        android:src="@drawable/your_avatar" />
</FrameLayout>

这个方法的阴影是静态的，不会像elevation那样随着View的Z轴变化而改变，但胜在兼容性极高，适合老版本Android。

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