Android开发：如何移除圆角矩形按钮的多余矩形背景？

我来帮你排查并解决这个问题！你遇到的多余矩形背景主要来自两个地方：转换后的Vector Drawable本身有未正确裁剪的元素，以及Android原生Button默认的背景样式残留，下面是具体的修复步骤：

第一步：修复转换后的Vector XML文件 #

你的buttonshape.xml里存在两个关键问题：一是保留了Sketch设计里的画布偏移（无用的嵌套group），二是状态遮罩的矩形没有被SVG的mask正确裁剪，导致显示成了超出按钮范围的大矩形。

替换成下面修正后的代码：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="104dp"
    android:height="36dp"
    android:viewportWidth="104"
    android:viewportHeight="36">

    <!-- 圆角边框：设置内部填充为透明，避免默认填充颜色 -->
    <path
        android:strokeColor="#000000"
        android:strokeAlpha="0.12"
        android:strokeWidth="1"
        android:pathData="M18,0.5 C8.335,0.5 0.5,8.335 0.5,18 C0.5,27.665 8.335,35.5 18,35.5 L86,35.5 C95.665,35.5 103.5,27.665 103.5,18 C103.5,8.335 95.665,0.5 86,0.5 L18,0.5 Z"
        android:fillColor="@android:color/transparent"/>

    <!-- 聚焦状态遮罩：使用和边框一致的圆角路径，确保被限制在按钮范围内 -->
    <path
        android:fillColor="#FFA000"
        android:fillAlpha="0.12"
        android:pathData="M18,0 C8.059,0 0,8.059 0,18 C0,27.941 8.059,36 18,36 L86,36 C95.941,36 104,27.941 104,18 C104,8.059 95.941,0 86,0 L18,0 Z"/>

</vector>

第二步：修改Button布局，清除默认背景残留 #

Android原生Button自带一套默认的背景样式（包含状态变化的圆角矩形），即使你设置了自定义背景，某些情况下默认的着色或背景会残留。调整你的布局代码：

<!-- 推荐使用AppCompatButton，兼容性更好 -->
<androidx.appcompat.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:id="@+id/use"
    android:background="@drawable/buttonshape"
    android:text="@string/use"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_centerVertical="true"
    android:padding="8dp"
    android:backgroundTint="@null"/> <!-- 移除默认的背景着色，避免干扰自定义Drawable -->

如果坚持使用原生Button，只需添加android:backgroundTint="@null"这一行即可，它会清除系统默认的背景颜色滤镜。

额外说明 #

• 原SVG里的文字被转换工具丢弃是正常的，Android按钮的文字应该通过android:text属性设置，这更符合Android的开发规范。
• 如果需要按钮支持点击、按下等状态变化，可以把这个Vector Drawable包装到一个selector Drawable中，为不同状态定义不同的样式。

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