Making "glowing" vector image in Android Studio

Question

I'm trying to make vector image with "glowing" effect for my app (something more like this:

this )

I made my vector:

vector

in Inkscape by duplicating, moving the selection to the bottom and increasing blurring. I converted this .svg file to xml using this tool ("http:/a-student.github.io/SvgToVectorDrawableConverter.Web/" I deleted one slash, sorry I have too low reputation). But when I copy this:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="178.9086"
android:viewportHeight="223.5271"
android:width="633.92791757485dp"
android:height="792.02492552128dp">
<group
    android:translateX="-58.56168"
    android:translateY="159.8559">
    <group
        android:scaleX="15.01775"
        android:scaleY="15.01775"
        android:translateX="-820.9032"
        android:translateY="-892.5264">
        <path
            android:pathData="M70.474839 62.368916q-0.530545 0.231511 -0.964627 0.434082 -0.424436 0.202572 -1.118967 0.424436 -0.588423 0.183279 -1.282954 0.308681 -0.684885 0.135047 -1.514464 0.135047 -1.562695 0 -2.845649 -0.434082 -1.273307 -0.443728 -2.218641 -1.379416 -0.926042 -0.916395 -1.44694 -2.32475 -0.520899 -1.418002 -0.520899 -3.289378 0 -1.774913 0.501606 -3.173622 0.501606 -1.398709 1.44694 -2.363335 0.916396 -0.935688 2.208995 -1.427648 1.302247 -0.49196 2.884234 -0.49196 1.157553 0 2.305458 0.279742 1.157553 0.279742 2.565908 0.98392l0 2.266872 -0.144694 0q-1.186491 -0.993565 -2.35369 -1.44694 -1.167198 -0.453374 -2.498383 -0.453374 -1.090028 0 -1.967839 0.356912 -0.868164 0.347265 -1.553049 1.090028 -0.665592 0.72347 -1.041797 1.832791 -0.366558 1.099674 -0.366558 2.546614 0 1.514464 0.405143 2.604493 0.41479 1.090028 1.06109 1.774913 0.675239 0.713824 1.572342 1.061089 0.906749 0.33762 1.909961 0.33762 1.379416 0 2.585199 -0.472667 1.205784 -0.472668 2.257227 -1.418002l0.135048 0z"
            android:fillColor="#ffffff" />
    </group>
    <group
        android:scaleX="15.01775"
        android:scaleY="15.01775"
        android:translateX="-820.9032"
        android:translateY="-892.5264">
        <path
            android:pathData="M70.474839 62.368916q-0.530545 0.231511 -0.964627 0.434082 -0.424436 0.202572 -1.118967 0.424436 -0.588423 0.183279 -1.282954 0.308681 -0.684885 0.135047 -1.514464 0.135047 -1.562695 0 -2.845649 -0.434082 -1.273307 -0.443728 -2.218641 -1.379416 -0.926042 -0.916395 -1.44694 -2.32475 -0.520899 -1.418002 -0.520899 -3.289378 0 -1.774913 0.501606 -3.173622 0.501606 -1.398709 1.44694 -2.363335 0.916396 -0.935688 2.208995 -1.427648 1.302247 -0.49196 2.884234 -0.49196 1.157553 0 2.305458 0.279742 1.157553 0.279742 2.565908 0.98392l0 2.266872 -0.144694 0q-1.186491 -0.993565 -2.35369 -1.44694 -1.167198 -0.453374 -2.498383 -0.453374 -1.090028 0 -1.967839 0.356912 -0.868164 0.347265 -1.553049 1.090028 -0.665592 0.72347 -1.041797 1.832791 -0.366558 1.099674 -0.366558 2.546614 0 1.514464 0.405143 2.604493 0.41479 1.090028 1.06109 1.774913 0.675239 0.713824 1.572342 1.061089 0.906749 0.33762 1.909961 0.33762 1.379416 0 2.585199 -0.472667 1.205784 -0.472668 2.257227 -1.418002l0.135048 0z"
            android:fillColor="#ffffff" />
    </group>
</group>
</vector>

to my .xml file in drawable the shadow is invisible. It's ordinary vector. My question is: Is it possible to make glowing vector this way? Is it possible at all in any way?

score 3 · Accepted Answer · answered Sep 05 '17 at 09:50

VectorDrawable doesn't support the <filter> element of SVGs, which is what Inkscape is using to do the blurry glow.

You will have to use a different method. Eg. layer two Views and blur the rear one using one of the techniques to blur views. Eg.:

Making "glowing" vector image in Android Studio

1 Answers1