Android XML布局中如何避免子View背景覆盖父布局的圆角边框

我遇到了一个无法解决的UI缺陷：在CoordinatorLayout中需要展示带有1dp圆角边框的可扩展布局，包含头部和内容区域，但给头部或内容设置背景色时，子View的背景会覆盖父布局的背景，导致父布局的边框被遮挡。
图1为预期实现效果，图2为实际运行得到的效果。

示例截图 #

• 图1（预期效果）
  
• 图2（实际效果）
  

复现布局代码 #

为简化问题，下方示例布局未做可扩展处理，但仍可复现相同问题：

<?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">

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/missionDetail"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:background="@drawable/mission_background"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/detail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/tvMission"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/mission"
            android:textColor="@android:color/darker_gray"
            app:layout_constraintBottom_toTopOf="@+id/tvDetail"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tvDetail"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/detail"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tvMission" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/tvInfo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non vulputate mi. Suspendisse augue ipsum, suscipit vel mattis aliquet, cursus sit amet dolor. Cras id ante ac justo sollicitudin posuere nec a risus. Maecenas vulputate dictum dui, eu tempor urna rhoncus nec. Vivamus et erat eu eros rutrum mattis. Morbi tincidunt nunc in ultricies ornare. Nulla sed ornare dolor. In consequat, purus at suscipit bibendum, quam nisi hendrerit dolor, eget tempor lacus metus in odio. Nulla faucibus maximus libero, ut scelerisque lacus imperdiet id. Aenean vel tincidunt est."
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/detail" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

补充说明 #

这类布局数量多且长度不固定，无法分别为头部设置仅顶部圆角的背景、为内容设置仅底部圆角的背景，需要让父布局的边框始终正常展示。

这里提供两种无需修改子View逻辑的高效方案，都能适配布局多、长度不固定的需求：

方案1：开启父布局轮廓裁剪（优先推荐） #

Android 5.0（API 21）及以上系统支持clipToOutline属性，开启后父布局会自动将所有子View的内容裁剪到自身轮廓范围内，也就是刚好在圆角边框的内侧，不会覆盖边框。
你只需要给设置了圆角边框的父布局（示例中@+id/missionDetail）添加一行属性即可：

android:clipToOutline="true"

如果需要用代码动态设置，写法如下：

// Kotlin 写法
missionDetail.clipToOutline = true

// Java 写法
missionDetail.setClipToOutline(true);

注意：该方案要求父布局的background是合法的ShapeDrawable或VectorDrawable，你当前用的圆角边框shape完全符合要求，无需额外修改。

方案2：父布局增加内边距（兼容更低版本） #

如果你的应用需要兼容Android 5.0以下的系统，直接给父布局添加和边框宽度一致的内边距即可，子View的内容会被限制在边框内侧，不会遮挡边框：

<!-- 给@+id/missionDetail添加1dp的padding，和你的边框宽度一致 -->
android:padding="1dp"

这个方案不需要任何代码逻辑修改，直接改布局属性就能生效。

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