Android Button设置VectorDrawable背景无显示的排查与解决

问题复现 #

布局代码：

<Button
    android:id="@+id/replace_battery_btn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/group_28"
    android:text="@string/replace_battery"
    android:layout_marginTop="48dp"/>

VectorDrawable资源（res/drawable/group_28.xml）：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="347dp"
    android:height="93dp"
    android:viewportWidth="347"
    android:viewportHeight="93">
    <path
        android:fillColor="#FFFFFFFF"
        android:strokeColor="#FFB5B6B7"
        android:strokeWidth="2"
        android:pathData="M5 1.1h106v90H5c-2.2 0-4-1.79-4-4v-82c0-2.2 1.8-4 4-4Z"/>
    <path
        android:fillColor="#FFBD4448"
        android:pathData="M109 0h233c2.76 0 5 2.24 5 5v82c0 2.76-2.24 5-5 5H109V0Z"/>
    <path
        android:strokeColor="#FF000000"
        android:strokeWidth="4"
        android:pathData="M39.5 30.53c0-3.31 2.69-6 6-6h21c3.31 0 6 2.69 6 6v39.28c0 3.31-2.69 6-6 6h-21c-3.31 0-6-2.69-6-6z"/>
    <path
        android:strokeColor="#FFBD4448"
        android:strokeWidth="4"
        android:strokeLineCap="round"
        android:strokeLineJoin="round"
        android:pathData="M58.45 36.46l-8.8 13.7h12.7l-8.3 13.71"/>
    <path
        android:strokeColor="#FF000000"
        android:strokeWidth="4"
        android:strokeLineCap="round"
        android:strokeLineJoin="round"
        android:pathData="M52.1 16.4h7.8"/>
</vector>

解决步骤 #

• 检查资源配置正确性
  确保group_28.xml放置在res/drawable目录下，文件名仅包含小写字母、数字、下划线或点号（Android资源命名规则），没有拼写错误。

• 处理版本兼容性
  如果项目minSdkVersion低于21，需要启用VectorDrawable支持库：

  1. 在模块级build.gradle中添加配置：

     android {
         defaultConfig {
             vectorDrawables.useSupportLibrary = true
         }
     }
     

  2. 布局中替换为AppCompatButton，并使用app:background属性设置背景：

     <androidx.appcompat.widget.AppCompatButton
         android:id="@+id/replace_battery_btn"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:background="@drawable/group_28"
         android:text="@string/replace_battery"
         android:layout_marginTop="48dp"/>
     

• 调整背景缩放与Button尺寸
  你的VectorDrawable设置了固定宽高（347dp×93dp），而Button高度为wrap_content可能导致背景无法正确渲染：

  • 方案1：将Button高度改为固定值匹配VectorDrawable高度：

    android:layout_height="93dp"
    

  • 方案2：创建Drawable包装器实现自适应缩放，新建res/drawable/bg_button.xml：

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <scale
                android:drawable="@drawable/group_28"
                android:scaleWidth="100%"
                android:scaleHeight="100%"/>
        </item>
    </layer-list>
    

    然后设置Button背景为该包装器：

    android:background="@drawable/bg_button"
    

• 排查视觉遮挡问题
  VectorDrawable中存在白色填充区域，如果Button所在父布局背景也是白色，会导致视觉上无法区分。可以临时修改VectorDrawable的fillColor为其他颜色（如#FF0000FF）验证是否显示。

• 清除缓存重新构建
  点击Android Studio菜单栏File -> Invalidate Caches... -> Invalidate and Restart，清除缓存后重新编译运行项目，解决资源加载缓存问题。

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