Animations in Android
  • Introduction
  • About us
  • Basic animations
  • ConstraintLayout: Core concepts
  • I like to move it, move it!
  • Step 1
  • Step 2
  • Step 2: Solution
  • Step 3
  • Step 3: Solution
  • Step 4
  • Step 4: Solution
  • Step 5
  • Step 5: Solution
  • Step 6
  • Step 7
  • Step 7: Solution
  • Step 8
  • Step 8: Solution
  • MotionLayout
  • Party time!
  • Shared element transition
  • Adding a RecyclerView
  • Activity transitions
  • Adding a second Activity
  • Adding the shared element transition
  • You made it!
  • VectorDrawable
  • VectorDrawable: Solution
  • Using the VectorDrawable
  • RecyclerView item animation & self-contained MotionScene
  • Creating a self-contained MotionScene
  • Creating a self-contained MotionScene : Solution
  • Adding animations in the RecyclerView items: Step 1
  • Adding animations in the RecyclerView items: Step 2
  • RecyclerView animations step 2: Solution
  • Physic based animations
  • Implement a spring animation
  • Spring animation: Solution
  • The finish line!
Powered by GitBook
On this page

VectorDrawable: Solution

If you had some troubles with it, here's the XML files of the animated drawables from Shape Shifter

avd_done_edit.xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="done"
                android:pathData="M 9 16.2 L 4.8 12 L 3.4 13.4 L 9 19 L 21 7 L 19.6 5.6 L 9 16.2 Z"
                android:fillColor="#FFFFFF" />
        </vector>
    </aapt:attr>
    <target android:name="done">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:duration="300"
                android:valueFrom="M 3.4 13.4 L 6.2 16.2 L 9 19 L 21 7 L 19.6 5.6 L 9 16.2 L 9 16.2 L 4.8 12 L 3.4 13.4 M 18.216 5.784 L 18.216 5.784 L 18.216 5.784 L 18.216 5.784 L 18.216 5.784 C 18.216 5.784 18.216 5.784 18.216 5.784 L 18.216 5.784 C 18.216 5.784 18.216 5.784 18.216 5.784"
                android:valueTo="M 3 17.25 L 3 21 L 6.75 21 L 17.81 9.94 L 14.06 6.19 L 10.373 9.877 L 6.687 13.563 L 3 17.25 L 3 17.25 M 20.71 7.04 L 20.71 7.04 L 18.88 8.87 L 15.13 5.12 L 16.96 3.29 C 17.35 2.9 17.98 2.9 18.37 3.29 L 20.71 5.63 C 21.1 6.02 21.1 6.65 20.71 7.04"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in" />
        </aapt:attr>
    </target>
</animated-vector>
avd_edit_done.xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="edit"
                android:pathData="M 3 17.25 L 3 21 L 6.75 21 L 17.81 9.94 L 14.06 6.19 L 3 17.25 Z M 20.71 7.04 C 21.1 6.65 21.1 6.02 20.71 5.63 L 18.37 3.29 C 17.98 2.9 17.35 2.9 16.96 3.29 L 15.13 5.12 L 18.88 8.87 L 20.71 7.04 Z"
                android:fillColor="#ffffff" />
        </vector>
    </aapt:attr>
    <target android:name="edit">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:duration="300"
                android:valueFrom="M 3 17.25 L 3 21 L 6.75 21 L 17.81 9.94 L 14.06 6.19 L 10.373 9.877 L 6.687 13.563 L 3 17.25 L 3 17.25 M 20.71 5.63 L 18.37 3.29 C 17.98 2.9 17.35 2.9 16.96 3.29 L 15.13 5.12 L 18.88 8.87 L 20.71 7.04 L 20.71 7.04 C 21.1 6.65 21.1 6.02 20.71 5.63"
                android:valueTo="M 3.4 13.4 L 6.2 16.2 L 9 19 L 21 7 L 19.6 5.6 L 9 16.2 L 9 16.2 L 4.8 12 L 3.4 13.4 M 18.216 5.784 L 18.216 5.784 C 18.216 5.784 18.216 5.784 18.216 5.784 L 18.216 5.784 L 18.216 5.784 L 18.216 5.784 L 18.216 5.784 C 18.216 5.784 18.216 5.784 18.216 5.784"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in" />
        </aapt:attr>
    </target>
</animated-vector>

We can also delete our original drawables: ic_edit.xml and ic_done.xml

PreviousVectorDrawableNextUsing the VectorDrawable

Last updated 6 years ago