android - 如何根据 VectorDrawables 中的 Material 设计指南为应用程序图标创建渐变长阴影?

标签 android icons adobe-illustrator android-vectordrawable adaptive-icon

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

As Per Material Design Guidelines, The Shadow Of An Object Should Be Radial Gradual Gradient Where 1st Slider Is At 32% Location And Opacity Is 15%. 2nd Slider Is at 62% Location with 2% Opacity. And The Last Slider Is At 100 % With Completely Transparent Color With 45° Angle

我在 Adob​​e Illustrator 中创建了图标,它看起来非常完美,并且按照 Material 设计遵循所有内容。 但是,当我将它们导出到 Android Studio 时,由于矢量绘图还不完全支持渐变,因此图像发生了重大变化。 Android 7.0 + 设备支持 VectorDrawables 中的渐变。 另一个问题是 Google 表示具有仰角的对象应该显示 45° 的长阴影(基于梯度)。但另一方面,他们并不完全支持渐变。如何将渐变应用程序图标扩展到低于 7.0 的设备。

附言我导出 Illustrator 文件以支持自适应图标。 请有人指导我在 VectorDrawables 中实现渐变阴影,以便它们看起来与旧图标相似

最佳答案

您可以手动将其添加到矢量 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。

关于android - 如何根据 VectorDrawables 中的 Material 设计指南为应用程序图标创建渐变长阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48781101/

相关文章:

android - 在 Android 上,如何启动 Gmail 应用程序以显示特定邮件?

html - Google Material Icon 在 HTML 输入中?

javascript - 导出时是否可以在 SVG 中保存任意数据?

android - android中的通知声音

java - 异常错误

javascript - 如何使用 JavaScript 控制图标

javascript - 如何在 CSS 中定位图标的样式?

css - 字体在浏览器中变粗

.net - 如何以编程方式创建基本的 Adob​​e Illustrator 文件?

android - 具有可点击区域的可缩放 SVG - Android