在ConstraintLayout中如何让CircleImageView显示在CardView上层？

问题说明 #

我想要实现CircleImageView显示在CardView上层的效果，预期效果如下：

但实际运行后CircleImageView被CardView遮挡，实际效果如下：

以下是我准备用于RecyclerView的单行列表项XML代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@color/backgroundColor">


<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/circleImageView"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:src="@drawable/cat_placeholder"
    app:civ_border_color="@color/red"
    app:civ_border_width="2dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.cardview.widget.CardView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="32dp"
    app:cardElevation="50dp"
    app:layout_constraintBottom_toBottomOf="@+id/circleImageView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/circleImageView"
    app:layout_constraintTop_toTopOf="@+id/circleImageView" />


</androidx.constraintlayout.widget.ConstraintLayout>

问题原因 #

1. ConstraintLayout默认按XML内组件的书写顺序渲染，先声明的组件会被后声明的组件覆盖，现有代码先写CircleImageView后写CardView，CardView默认就会叠加在上方。
2. CardView设置了app:cardElevation="50dp"，无elevation配置的CircleImageView层级更低，会被高elevation的组件遮挡。

解决方案 #

方案1：调整组件顺序+适配elevation（推荐） #

把CircleImageView的代码移到CardView之后，同时给CircleImageView设置略高于CardView的elevation，避免层级异常：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@color/backgroundColor">

<androidx.cardview.widget.CardView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="32dp"
    app:cardElevation="50dp"
    app:layout_constraintBottom_toBottomOf="@+id/circleImageView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/circleImageView"
    app:layout_constraintTop_toTopOf="@+id/circleImageView" />

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/circleImageView"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:src="@drawable/cat_placeholder"
    android:elevation="52dp"
    app:civ_border_color="@color/red"
    app:civ_border_width="2dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

方案2：无需调整顺序，直接提升CircleImageView层级 #

在原有CircleImageView的代码中添加android:elevation="52dp"属性即可，elevation数值只要大于CardView的50dp就可以正常显示在上层。

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