如何在Android Studio中为Icon添加渐变色

嘿，我懂你想要给Vector图标加渐变的需求，之前用代码做文字渐变确实不够优雅，其实有两种更靠谱的方法，优先推荐XML定义的方式，完全不用写Java代码！

方法一：直接在Vector XML中定义渐变（最优雅） #

你可以直接在你的Vector图标资源里添加渐变定义，然后让path的fillColor引用这个渐变，这样图标加载出来就是渐变效果了。修改你的图标代码如下：

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

    <!-- 定义线性渐变：从左上到右下的蓝绿色渐变 -->
    <linearGradient
        android:id="@+id/icon_gradient"
        android:startX="0"
        android:startY="0"
        android:endX="24"
        android:endY="24"
        android:startColor="#01579b"
        android:endColor="#006064" />

    <!-- 第一个圆形path，填充渐变 -->
    <path
        android:strokeColor="#000"
        android:fillColor="@id/icon_gradient"
        android:pathData="M12,12m-3.2,0a3.2,3.2 0,1 1,6.4 0a3.2,3.2 0,1 1,-6.4 0"/>
    <!-- 第二个外框path，同样填充渐变 -->
    <path
        android:fillColor="@id/icon_gradient"
        android:pathData="M9,2L7.17,4L4,4c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,6c0,-1.1 -0.9,-2 -2,-2h-3.17L15,2L9,2zM12,17c-2.76,0 -5,-2.24 -5,-5s2.24,-5 5,-5 5,2.24 5,5 -2.24,5 -5,5z"/>
</vector>

关键说明： #

• <linearGradient>里的startX/startY和endX/endY是基于Vector的viewport坐标（你的图标viewport是24x24），这里设置从(0,0)到(24,24)就是对角线渐变，你可以根据需求调整方向。
• 把两个path的fillColor都改成@id/icon_gradient，就能让整个图标填充渐变了。
• 如果想要径向渐变，可以替换成<radialGradient>标签，调整对应参数即可。

方法二：在代码中动态设置渐变（适合颜色需要动态变化的场景） #

如果你的渐变颜色需要根据主题、用户设置等动态调整，那可以用类似你做文字渐变的思路，给VectorDrawable的Paint设置Shader：

ImageView iconView = getView().findViewById(R.id.your_icon_imageview);
// 加载Vector图标
VectorDrawableCompat drawable = VectorDrawableCompat.create(getResources(), R.drawable.your_vector_icon, null);

if (drawable != null) {
    // 创建线性渐变Shader
    Shader gradientShader = new LinearGradient(
            0, 0,
            drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(),
            new int[]{Color.parseColor("#01579b"), Color.parseColor("#006064")},
            new float[]{0, 1},
            Shader.TileMode.CLAMP
    );

    // 修改Drawable的Paint，设置渐变Shader
    drawable.mutate(); // 确保修改只作用于当前实例，不影响其他地方的引用
    if (drawable instanceof VectorDrawableCompat) {
        ((VectorDrawableCompat) drawable).getPaint().setShader(gradientShader);
    } else if (drawable instanceof VectorDrawable) {
        ((VectorDrawable) drawable).getPaint().setShader(gradientShader);
    }

    // 设置到ImageView
    iconView.setImageDrawable(drawable);
}

对比两种方法： #

• XML方法：完全不用写代码，资源文件直接定义，符合Android的设计规范，加载更高效，优先推荐。
• 代码方法：适合需要动态调整渐变颜色、方向的场景，但需要处理不同API版本的兼容问题。

这样就能实现你想要的渐变图标效果啦，比之前的文字渐变方法优雅多了！

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