Error while trying to test AnimatedVectorDrawable, "Can't morph from x to z" Error while trying to test AnimatedVectorDrawable, "Can't morph from x to z" xml xml

Error while trying to test AnimatedVectorDrawable, "Can't morph from x to z"


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

You just need to run the VectAlign tool from the command line passing your original paths and it will automatically create "morphable" sequences.

Example of usage:

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 morph between them as usual using an AnimatedVectorDrawable!

You can also pass SVG files:

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

This is one of the samples from the VectAlign demo:

enter image description here


The VectorDrawables you wish to morph must be compatible, meaning they must have simlar complexities; similar length and number of commands (this was mentioned by pksink).

This way I ended up solving this is taking the "plus" symbol and modifying is the dimensions manually in android studio until I had something that resembled a checkmark.

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>

Notice that these have the same number of commands. The checkmark does not look perfect, but you cannot notice if you put it in a floating action button.

Additional tip: Move the pathData to a string variable. That way, it's easier to maintain consistency in your objectAnimators.