如何为RelativeLayout添加圆角Vector Drawable并去除多余背景？

我用Figma生成了名为inner的带圆角矢量图，将其设为根RelativeLayout的背景后，圆角无法正常显示——布局下方有多余的白色背景覆盖了圆角效果。

布局代码 #

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/inner"
    android:layout_width="350dp"
    android:layout_height="326dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/inner"
    android:viewportWidth="350"
    android:viewportHeight="326"
    android:clipToOutline="true"
    >
    <RelativeLayout
        android:id="@+id/icon"
        android:layout_width="92dp"
        android:layout_height="92dp"
        android:layout_marginBottom="10dp"
        android:layout_centerHorizontal="true">

        <RelativeLayout
            android:id="@+id/circle_icon"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_margin="10dp"
            android:background="@drawable/green_checkmark">

            <RelativeLayout
                android:id="@+id/check"
                android:layout_width="44dp"
                android:layout_height="44dp"
                android:layout_margin="10dp"
                android:layout_centerHorizontal="true">

                <View
                    android:id="@+id/vector"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentBottom="true"
                    android:background="@drawable/baseline_check_24"
                    android:layout_centerHorizontal="true"
                    />
            </RelativeLayout>

        </RelativeLayout>


    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/title"
        android:layout_width="302dp"
        android:layout_height="55dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/icon">
        <TextView
            android:id="@+id/title_text"
            android:layout_width="302dp"
            android:layout_height="35dp"
            android:text="@string/you_re_all_set"
            android:textColor="@color/black50"
            android:fontFamily="@font/inter_700"
            android:lineSpacingExtra="5sp"
            android:gravity="center_horizontal|center_vertical"
            android:textSize="25sp"
            />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/subtitle_text"
        android:layout_width="302dp"
        android:layout_height="80dp"
        android:layout_below="@+id/title"
        android:layout_centerHorizontal="true">


        <TextView
            android:id="@+id/text"
            android:layout_width="302dp"
            android:layout_height="48dp"
            android:text="@string/the_app_is_connected"
            android:textColor="@color/black50"
            android:textSize="16sp"
            android:lineSpacingExtra="5sp"
            android:translationY="-2.32sp"
            android:gravity="center"
            />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/start_exercising_button"
        android:layout_width="302dp"
        android:layout_height="54dp"
        android:background="@drawable/button"
        android:layout_below="@id/subtitle_text"
        android:layout_centerHorizontal="true"
        >
        <TextView
            android:id="@+id/button_text"
            android:layout_width="119dp"
            android:layout_height="22dp"
            android:text="@string/start_exercising"
            android:textSize="16sp"
            android:textColor="@color/white"
            android:lineSpacingExtra="3sp"
            android:translationY="-1.52sp"
            android:gravity="center"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            />



    </RelativeLayout>

</RelativeLayout>

原因分析 #

• Vector Drawable自带白色背景：Figma导出的inner.xml可能包含填充为白色的矩形路径，直接覆盖了圆角区域，导致圆角被遮挡。
• 无效属性干扰绘制：根RelativeLayout上的android:viewportWidth和android:viewportHeight是Vector Drawable的专属属性，设置在View上会打乱正常绘制逻辑。
• 父布局/主题背景透显：如果根RelativeLayout的父布局或Activity主题默认是白色背景，会从圆角的空隙中透出来，看起来像是布局本身自带白色背景。
• clipToOutline对Vector Drawable无效：该属性仅对ShapeDrawable或自定义OutlineProvider生效，无法裁剪Vector Drawable的圆角形状。

解决方法 #

1. 修复Vector Drawable文件
   打开res/drawable/inner.xml，检查所有<path>标签：

   • 删除多余的白色填充路径；
   • 确保圆角矩形的填充色正确，且无额外不透明图层。

2. 移除无效属性
   删除根RelativeLayout的android:viewportWidth和android:viewportHeight属性。

3. 处理父布局/主题背景

   • 给根RelativeLayout的父布局设置透明背景：android:background="@android:color/transparent"；
   • 若Activity主题默认白色，可在styles.xml中修改主题的android:windowBackground为透明。

4. 替换为ShapeDrawable实现圆角（更可靠）
   放弃用Vector Drawable做圆角背景，改用ShapeDrawable：

   <!-- res/drawable/rounded_bg.xml -->
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <!-- 替换为你需要的背景色 -->
       <solid android:color="#FFFFFF"/>
       <!-- 替换为你需要的圆角大小 -->
       <corners android:radius="16dp"/>
   </shape>
   

   然后修改根RelativeLayout的背景为该shape，并保留android:clipToOutline="true"：

   android:background="@drawable/rounded_bg"
   android:clipToOutline="true"
   

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