如何根据 VectorDrawables 中的材料设计指南为应用程序图标创建渐变长阴影？

Question

实际上，我正在开发一个 Android 应用程序。问题是关于在 VectorDrawables 中导出带有渐变的图标。我使用 Adob​​e Illustrator 绘制我的图标并将它们导出到 Android Studio 的 Asset Studio。

根据 Material Design 指南，对象的阴影应该是径向渐变渐变，其中第一个滑块位于 32% 的位置，不透明度为 15%。第二个滑块位于 62% 的位置，不透明度为 2%。最后一个滑块为 100% 全透明颜色，45° 角

我在 Adob​​e Illustrator 中创建了图标，看起来很完美，并且按照材料设计遵循所有内容。但是当我将它们导出到 Android Studio 时，图像被严重改变，因为 Vector Drawables 还不完全支持渐变。Android 7.0 + 设备支持 VectorDrawables 中的渐变。另一个问题是谷歌说高程物体应该显示 45°（基于梯度）的长阴影。但另一方面，它们并不完全支持渐变。如何将渐变应用程序图标扩展到低于 7.0.0 的设备？

Ps 我导出 Illustrator 文件以支持自适应图标。请有人指导我在 VectorDrawables 中实现渐变阴影，使它们看起来类似于旧图标

Answer 1

您可以手动将其添加到矢量 xml 文件中的路径，而不是在 illustrator 中包含阴影的渐变：

<path 
    android:pathData="...">
    <aapt:attr name="android:fillColor">
      <gradient
          android:type="radial"
          android:centerX="54"
          android:centerY="54"
          android:gradientRadius="76.37">
        <!-- 15% black from center to 32% stop -->
        <item android:offset="0.0" android:color="#26000000" />
        <item android:offset="0.32" android:color="#26000000" />
        <!-- 2% black at 62% stop -->
        <item android:offset="0.62" android:color="#05000000" />
        <!-- fade to transparent -->
        <item android:offset="1.0" android:color="#00000000" />
      </gradient>
    </aapt:attr>
</path>

有关更多详细信息https://medium.com/google-developers/implementing-adaptive-icons-1e4d1795470e

注意：API 24 中的 VectorDrawables 添加了渐变支持。