Icon animation can be achieved using animated-vector
First define your icons as vector drawings. For example, let me check the box for cross-animation, as found here . We will animate ic_tick to ic_cross .
ic_cross.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="120dp" android:height="120dp" android:viewportWidth="@integer/viewport_width" android:viewportHeight="@integer/viewport_height"> <group android:name="@string/groupTickCross" android:pivotX="@integer/viewport_center_x" android:pivotY="@integer/viewport_center_y"> <path android:name="@string/cross" android:pathData="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4" android:strokeWidth="@integer/stroke_width" android:strokeLineCap="square" android:strokeColor="@color/stroke_color"/> </group> </vector>
ic_tick.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="120dp" android:height="120dp" android:viewportWidth="@integer/viewport_width" android:viewportHeight="@integer/viewport_height"> <group android:name="@string/groupTickCross" android:pivotX="@integer/viewport_center_x" android:pivotY="@integer/viewport_center_y"> <path android:name="@string/tick" android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" android:strokeWidth="@integer/stroke_width" android:strokeLineCap="square" android:strokeColor="@color/stroke_color"/> </group> </vector>
Then we create animators for each of the steps. valueFrom indicates the start point of the animation, and valueTo end result of the animation. interpolator is a type of interpolation, and you can find much more in Android docs. duration indicates the duration of the animation.
tick_to_cross.xml
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:propertyName="pathData" android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4" android:duration="@integer/duration" android:interpolator="@android:interpolator/fast_out_slow_in" android:valueType="pathType"/>
Now, using the animated vector, we animate the vector. Here, <target android:name indicates the purpose the animation should run on, and android:animation tells the animation.
avd_tick_to_cross.xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_tick"> <target android:name="@string/tick" android:animation="@animator/tick_to_cross" /> </animated-vector>
There are several restrictions on the ability to animate between portable vectors, but they can be hacked one way or another if you have a clear idea of what needs to be animated and how the animation should go.