Pre starting I'd like to tell that I'm using Vect Align library to morph the two images
The Icons
The start icon (SVG): https://storage.googleapis.com/material-icons/external-assets/v1/icons/svg/ic_menu_white_24px.svg
The end icon (SVG): https://storage.googleapis.com/material-icons/external-assets/v1/icons/svg/ic_close_white_24px.svg
The Path generated by Vect Align
Start path (drawer_path):
M 3.0,18.0 l 18.0,0.0 l 0.0,-2.0 l -18.0,0.0 l 0.0,2.0 L 3.0,18.0 m 0.0,-5.0 l 18.0,0.0 l 0.0,-2.0 l -18.0,0.0 l 0.0,2.0 L 3.0,13.0 M 3.0,6.0 L 3.0,6.0 L 3.0,6.0 L 3.0,6.0 L 3.0,6.0 L 3.0,6.0 L 3.0,8.0 L 21.0,8.0 L 21.0,6.0 L 3.0,6.0 L 3.0,6.0
End path (close_path):
M 19.0,6.41 l 0.0,0.0 l 0.0,0.0 l 0.0,0.0 l 0.0,0.0 L 17.59,5.0 m 0.0,0.0 l0.0,0.0 l 0.0,0.0 l 0.0,0.0 l 0.0,0.0 L 12.0,10.59 M 12.0,10.59 L 6.41,5.0 L 5.0,6.41 L 10.59,12.0 L 5.0,17.59 L 6.41,19.0 L 12.0,13.41 L 17.59,19.0 L 19.0,17.59 L 13.41,12.0 L 19.0,6.41
Screenshot of the issue
XML Files in the Project:
Vector File (ic_drawer.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="24"
android:viewportHeight="24">
<path
android:name="v"
android:fillColor="#FFFFFF"
android:pathData="@string/drawer_path" />
</vector>
Animated Vector File (ic_drawer_to_close.xml):
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_drawer">
<target
android:name="v"
android:animation="@anim/drawer_to_close" />
</animated-vector>
The Anim File (drawer_to_close.xml):
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="650"
android:propertyName="pathData"
android:valueFrom="@string/drawer_path"
android:valueTo="@string/close_path"
android:valueType="pathType" />
I hope someone helps me with this issue.