Android dropshadow on custom vector

Question

I would like to be able to add a dropshadow to vectors that I have in my drawables folder. Currently, when I import the svg which has a dropshadow into Android Studio, the conversion to xml removes the dropshadow.

How would I go about creating a dropshadow for a vector graphic in Android Studio?

This is an example image of the vector I'm trying to add dropshadow to.

Sidell

you have to draw it by yourself, make a custom Drawable class and do the drawing inside draw method, first draw the shadow then original Drawable – Urbana

That sounds like the worst. I think I'll just use pngs with different resolutions if it comes down to it. – Sidell

worst? what do you mean? – Urbana

Sounds like more work than it is worth, but I'll have to look into it – Sidell

whats so hard in this simple implementation? – Urbana

of course you can do that more realistic and instead of flat shadows you can use ScriptIntrinsicBlur to blur the edges, BTW if you want to use shadow pngs with different resolutions why do you want to use vectors at all? – Urbana

Appreciate your feedback on this topic since I'm not as familiar with this area of Android. This sounds like a good solution for something I could make reusable. I have the ability to export the image as an svg or as pngs with different densities. I would prefer vectors, but pngs wouldn't be a problem to get. – Sidell

Answer 1

You can create shadow without blur of edges: * open "drawable xml" file; * add before (for each path) a group with translations for shadow (depends of vector resolutions) and fill it by dark transparent color, for example:

  <group
      android:translateX="150"
      android:translateY="150"
      >
    <path
        android:pathData="..."
        android:fillColor="#40000000"
        />
  </group>

Coaptation

Can you please share a sample code, this snippet is a bit confusing. I am confused about where to add this. Could you please help me with this. Thanks – Eiser

Nice, it works. Example for my asset: gist.github.com/ktiniatros/c9969ff3bfef9015b09e197fe3e2a633 I added the group above the original path. Note that this is a small icon (24x24) so I use a bit of translation. – Hyson

Answer 2

You can try the following simple way: you need to duplicate the path tag with the same pathData and add the necessary parameters to it(strokeWidth, strokeColor, strokeLineJoin, strokeLineCap).

For a smoother shadow transition, you can duplicate the path tag several times with a larger strokeWidth. The order of the tags is also important. example code:

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

<path
    android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"
    android:strokeWidth="1"
    android:strokeColor="#FFEB3B"
    android:strokeLineJoin="round" />
<path
    android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"
    android:strokeWidth=".5"
    android:strokeColor="#2196F3"
    android:strokeLineJoin="round" />
<path
    android:fillColor="#FFFFFF"
    android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/></vector>

vector in the end

Pneumonoultramicroscopicsilicovolcanoconiosis

Answer 3

If you have an svg editor tool like sketch, I would add the shadow through that and save the svg. Then use the following tool to convert it to an android drawable. http://a-student.github.io/SvgToVectorDrawableConverter.Web/

Then finally either download the xml file to your drawable folder or select and copy the content and manually create a new drawable resource in your project and copy the content into it. Easy peasy :). Let me know how that works out for you.

Southeaster

when converting to .xml shadow from Sketch is not passed. You get the image vectors without a shadow – Merete

That link to the tool doesn't do much. It stripped out the colors for me. – Scissel