Error trying to test AnimatedVectorDrawable, "Unable to convert from x to z"

Question

I wanted to make AnimatedVectorDrawable, so my FAB may look somehow fabulous, like this one , with animation, etc.

I found this great tutorial on how to use and implement them, and then I found a very useful tool for converting SVG to Android-VectorDrawables and converted these two images: https://github.com/google/material-design-icons /blob/master/content/svg/design/ic_add_48px.svg https://github.com/google/material-design-icons/blob/master/action/svg/design/ic_done_48px.svg

Now this is the xml "code" I came up with:

hoods / vector _add.xml:

<?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="48" android:viewportHeight="48"> <group> <path android:pathData="M0 0h48v48h-48Z" /> <path android:name="add" android:fillColor="#ffffff" android:pathData="M38 26h-12v12h-4v-12h-12v-4h12v-12h4v12h12v7Z" /> </group> </vector> 

Anit / add _to_done.xml:

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M38 26h-12v12h-4v-12h-12v-4h12v-12h4v12h12v7Z" android:valueTo="M18 32.34l-8.34-8.34-2.83 2.83 11.17 11.17 24-24-2.83-2.83Z" android:valueType="pathType" /> </set> 

hoods / ic _add.xml:

 <?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vector_add"> <target android:name="add" android:animation="@anim/anim_plus_to_done" /> </animated-vector> 

If I ran this code, I just ended up with this error:

 Caused by: android.view.InflateException: Binary XML file line #3 Can't morph from M38 26h-12v12h-4v-12h-12v-4h12v-12h4v12h12v4Z to M18 32.34l-8.34-8.34-2.83 2.83 11.17 11.17 24-24-2.83-2.83Z at android.animation.AnimatorInflater.setupAnimatorForPath(AnimatorInflater.java:337) at android.animation.AnimatorInflater.parseAnimatorFromTypeArray(AnimatorInflater.java:283) at android.animation.AnimatorInflater.loadAnimator(AnimatorInflater.java:618) at android.animation.AnimatorInflater.loadObjectAnimator(AnimatorInflater.java:577) at android.animation.AnimatorInflater.createAnimatorFromXml(AnimatorInflater.java:529) at android.animation.AnimatorInflater.createAnimatorFromXml(AnimatorInflater.java:542 

I assume that the two paths in the two svg are too different, so Android cannot handle the animation on its own, and I need to do as several VectorDrawables for each animation control point.

... I probably completely left with this theory, but this is the most logical, I can come up with ..

I do not have much experience (and generally no experience whatsoever) working with Vectors and Illustrator, etc., so any help that you guys can come up with will be greatly appreciated.

Have a nice day, and Merry Christmas.

Regards, Mons.

Answer 1

The VectorDrawables you want to convert must be compatible, that is, they must have similar difficulties; the same length and number of commands (mentioned by pksink).

So, I decided that it was accepting the plus symbol and manually resizing in android studio until I got something like a check mark.

Plus Vector:

 <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp" android:height="24dp"> <group android:name="plus_group" android:pivotX="12" android:pivotY="12"> <path android:name="plus_path" android:strokeColor="@android:color/white" android:strokeWidth="3" android:pathData="M12,0L12,24M0,12,L24,12" /> </group> </vector> 

CheckMark Vector:

 <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:viewportWidth="24" android:viewportHeight="24" android:width="24dp" android:height="24dp"> <group android:name="check_group" android:pivotX="12" android:translateX="0" android:pivotY="12"> <path android:name="check_path" android:strokeColor="@android:color/white" android:strokeWidth="3" android:pathData="M20,0L06,20M0,14,L08,19" /> </group> </vector> 

Please note that they have the same number of teams. The checkbox does not look perfect, but you cannot notice if you put it in a floating button.

Extra tip: Move pathData to a string variable. Thus, it is easier to maintain consistency in object Animators.

Answer 2

If you want to change between arbitrary SVG images (or VectorDrawable ), you need to align the appropriate paths to make them compatible for morphing . This is a very tedious task, but there is a command line tool that can do this for you: VectAling

You just need to run the VectAlign tool from the command line, passing the source paths, and it will automatically create “morphing” sequences.

Usage example:

 java -jar vectalign.jar --start "M 10,20..." --end "M 30,30..." 

Output:

 -------------------- ALIGNMENT RESULT -------------------- # new START sequence: M 48.0,54.0 L 31.0,42.0 L 15.0,54.0 L 21.0,35.0 L 6.0,23.0 L 25.0,23.0 L 25.0,23.0 L 25.0,23.0 L 25.0,23.0 L 32.0,4.0 L 40.0,23.0 L 58.0,23.0 L 42.0,35.0 L 48.0,54.0 # new END sequence: M 48.0,54.0 L 48.0,54.0 L 48.0,54.0 L 48.0,54.0 L 31.0,54.0 L 15.0,54.0 L 10.0,35.0 L 6.0,23.0 L 25.0,10.0 L 32.0,4.0 L 40.0,10.0 L 58.0,23.0 L 54.0,35.0 L 48.0,54.0 

Now you can use these new sequences in your Android project and convert between them, as usual, using AnimatedVectorDrawable !

You can also transfer SVG files :

 java -jar vectalign.jar --start image1.svg --end image2.svg 

This is one example from the VectAlign demo :