skwear skwear - 27 days ago 12
Android Question

VectorDrawable renders differently in phone than in Android Studio

I have some stylized text that I have converted into SVG paths for use in a

VectorDrawable
. I directly extracted the path data as a string of text from the .svg file to use as the path data in the
VectorDrawable
. They look perfectly fine in the Android Studio design window but when I run it on my phone it looks messed up. My phone is a HTC One M8 and is running stock Marshmallow. I have attached two screen shots of how they differ.

pathData
rendered in Android Studio:

pathData rendered in Android Studio

vs.
pathData
rendered on phone:

enter image description here

Here is the
path
resource from the XML file

<path
android:name="anger_word"
android:fillColor="#FFFFFF"
android:pathData="@string/anger_word" />


And here is the actual
pathData
, which is
@string/anger_word

http://pastebin.com/7MDLiwQh

What is happening here?

Thank you.

Answer

It may have been fixed now, but some initial versions of the VectorDrawable rendering code had some bugs parsing path data. IIRC especially with relative path commands. Relative path commands are the ones with lower case letters. Relative path commands seem to be the majority of the the commands in your path(s).

My advice would be to try converting the paths to use absolute path commands only (upper case letters). This may not be the problem, but it is something to try.

I don't know what editor you used to create your paths, but see if you can get it to output paths with absolute path commands.

If it can't, then you can search for a tool to do it. I believe Inkscape will do it. See the discussion in the following question. Note that it is primarily discussing the opposite conversion to what you need.

Is there a tool to convert SVG line paths from absolute to relative?

Also this question may be of help too.

Convert SVG Path to Absolute Commands

Comments