Android Vector描边颜色未生效：渐变填充时描边消失

我之前也碰到过一模一样的坑！当用<aapt:attr>给Vector的path加渐变填充时，描边就莫名消失了，但换成单色填充就正常显示，这其实是VectorDrawable渲染层级的小问题。

问题根源 #

在同一个<path>标签内同时使用<aapt:attr>定义渐变填充和描边属性时，部分Android版本的渲染逻辑会出现异常：渐变填充的绘制会意外覆盖掉描边（理论上描边应该绘制在填充之上，但aapt的特殊处理打乱了这个顺序）。

最稳妥的兼容方案：拆分描边与填充为独立Path #

把填充和描边拆成两个独立的<path>是兼容性最好的解决办法：先绘制带渐变填充的路径，再绘制只有描边、无填充的同形状路径，这样描边就会叠加在填充之上，清晰显示出来。

修改后的代码如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="96dp"
    android:height="96dp"
    android:viewportHeight="100"
    android:viewportWidth="100">

    <!-- 渐变填充层：仅负责填充颜色 -->
    <path android:pathData="M1,1 H99 V99 H1Z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endColor="#111111"
                android:endX="50"
                android:endY="99"
                android:startColor="#0000ff"
                android:startX="50"
                android:startY="1"
                android:type="linear" />
        </aapt:attr>
    </path>

    <!-- 描边层：仅负责描边，填充设为透明 -->
    <path
        android:pathData="M1,1 H99 V99 H1Z"
        android:strokeColor="#000000"
        android:strokeWidth="4"
        android:fillColor="@android:color/transparent" />
</vector>

备选方案（API 24+适用） #

如果你的App最低兼容版本是API 24及以上，可以不用<aapt:attr>，直接将渐变定义为独立的Drawable资源，然后在Vector的android:fillColor中引用，这样描边也能正常显示：

1. 创建渐变资源文件res/drawable/linear_gradient.xml：

<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:endColor="#111111"
    android:endX="50"
    android:endY="99"
    android:startColor="#0000ff"
    android:startX="50"
    android:startY="1"
    android:type="linear" />

2. 修改VectorDrawable代码：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="96dp"
    android:height="96dp"
    android:viewportHeight="100"
    android:viewportWidth="100">

    <path
        android:pathData="M1,1 H99 V99 H1Z"
        android:strokeColor="#000000"
        android:strokeWidth="4"
        android:fillColor="@drawable/linear_gradient" />
</vector>

两种方案都能解决你遇到的描边不显示问题，第一种兼容性更广，适合大多数场景。

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