How Do I Create Gradient Long Shadow For App Icon As Per Material Design Guidelines In VectorDrawables?

Question

Actually, I am Developing An Android App. The Issue Is About Exporting Icon With Gradients In VectorDrawables. I Draw My Icons Using Adobe Illustrator And I export them To 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

I have created The Icon In Adobe Illustrator and looks perfectly and follows everything as per material design. But When I export them to Android Studio, The Image Is Heavily Altered As Vector Drawables Doesn't Support Gradients Fully Yet. Gradients in VectorDrawables is supported from Android 7.0 + devices. Another Issue Is That Google Says That an object with elevation should show long shadow with 45° (Gradient-based). But on the other side, They do not support gradients fully. How can I extend gradient app icon to devices which are below 7.0.

P.s. I export the Illustrator File To support Adaptive Icon. Please, someone, guide me to achieve that gradient shadow In VectorDrawables so that they will look similar to legacy icons

Answer 1

Instead of including the shadow's gradient in illustrator, you can manually add it to the path in the vector xml file:

<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>

For more details https://medium.com/google-developers/implementing-adaptive-icons-1e4d1795470e

Note: gradient support was added to VectorDrawables in API 24.