ConstraintLayout中实现ImageView叠加在Button上层可见的方案咨询

问题原因 #

你遇到的ImageView被Button遮挡的问题，是因为AppCompatButton默认自带elevation属性（带阴影效果），绘制层级会比普通无elevation的ImageView更高，即使ImageView在XML中写在Button后面，也会被Button遮挡。你当前的约束配置本身是正确的，已经实现了ImageView和Button侧边重叠的布局效果，仅需要调整绘制层级即可解决遮挡问题。

解决方法 #

方法1：给ImageView设置更高的elevation属性

给你的imgNext控件添加android:elevation属性，数值大于Button默认的elevation（默认约2dp，设置4dp即可），修改后的ImageView代码如下：

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/imgNext"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_ico_gonext"
    android:padding="16dp"
    android:layout_marginEnd="20dp"
    android:elevation="4dp" <!-- 新增这行 -->
    app:layout_constraintTop_toTopOf="@id/btnSubmit"
    app:layout_constraintBottom_toBottomOf="@id/btnSubmit"
    app:layout_constraintEnd_toEndOf="parent"/>

方法2：移除Button的默认elevation

如果不需要Button的默认阴影效果，可以给btnSubmit添加android:stateListAnimator="@null"属性，取消默认的elevation动态效果，此时XML的控件书写顺序就会决定绘制层级，你当前代码中ImageView写在Button后面，就会自然显示在Button上层，修改后的Button代码如下：

<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/btnSubmit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp"
    android:textColor="@color/colorWhite"
    android:text="Submit"
    android:background="@color/purple_700"
    android:stateListAnimator="@null" <!-- 新增这行 -->
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

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