VectorDrawable

Since Android API 21 (Support Library backports to Android API 7 and above), we can create vector images easily by the VectorDrawable. Before we dive into animating a VectorDrawablelet's have a deeper understanding of its attributes.

We are going to add a FAB (floating action button) to our DetailActivity.kt.

activity_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout ...>

    <!-- ImageView avatar --> 
    <!-- TextView name --> 
    <!-- Second background View --> 

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent" />

    <!-- Guidelines --> 

</android.support.constraint.ConstraintLayout>

And we're also going to add a new vector asset.

With the same way we're also going to add a done icon (✔)

Let's have a look at the pathData attribute. The string contains numbers, which are the coordinates and letters which are the commands. The letters can be either capital, which means that the coordinates are absolute or small, which means that the coordinates are relative

ic_done.xml

<vector android:height="24dp"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FFFFFF" 
        android:pathData="M9,16.2L4.8,12l-1.4,1.4L9,19 21,7l-1.4,-1.4L9,16.2z"/>
</vector>

Some of the most used commands are:

• M/m --> moveto --> The "moveto" commands establish a new current point. The effect is as if the "pen" were lifted and moved to a new location.

• L/l --> lineto --> Draws a line from the current point to the given (x,y) coordinate which becomes the new current point

• H/h --> horizontal lineto --> Draws a horizontal line from the current point (cpx, cpy) to (x, cpy)

• V/v --> vertical lineto --> Draws a vertical line from the current point (cpx, cpy) to (cpx, y)

• C/c --> curveto --> Draws a cubic Bézier curve from one point to a given, using another pair of coordinates as the control point.

• Z/z --> closepath --> Close the current subpath by drawing a straight line from the current point to current subpath's initial point. Since the Z and z commands take no parameters, they have an identical effect.

To morph one icon into another, must have the same count of commands as well as the same count of parameters per command.

That is the most difficult part of path morphing. But fortunately we have Shape Shifter for this. Shape Shifter is a web-app that simplifies the creation of icon animations for Android, iOS, and the web. So to find the correct paths we're going to import our icons in Shape Shifter.

We are going to select the path data option

At the toValue we're going to copy paste the pathData from our edit icon

And this is the reason why we need Shape Shifter for creating our paths!

Once done, we need to delete the pencil path from the image

And finally we export it as animated vector drawable, which we then add to our res>drawable directory.