Introducing Vectordrawable-Seekable

Last Updated: 5 Jul 2022

Alistair and Rhys working alongside each other

Using the new and improved AnimatedVectorDrawable to pause and seek your animations.

AnimatedVectorDrawable

Android SDK 21 introduced both the VectorDrawable and the AnimatedVectorDrawable. This allowed you to use vector assets within your app, and even animate them.

They've iterated on these since then, but AnimatedVectorDrawable was still missing something. You couldn't manipulate and control the animation. There was no pause or seek functionality.

Core-Animation

The Android team has been hard at work backporting the framework Animator APIs. They have created a separate unbundled AndroidX library called Core-Animation.

The Animator APIs have been around for some time. But they didn't provide the capabilities needed for this pause and seek functionality. So they needed to be unbundled and then iterated on.

Vectordrawable-Seekable

Once Core-Animation was available the Android team could create the Vectordrawable-Seekable library. This library revolves around the class SeekableAnimatedVectorDrawable.

Under the hood, this class uses the AnimatorSet and subsequently Animator from Core-Animation. These provide the pause and seek functionality.

How to

Create the vector

Firstly, you need a vector asset of the image you wish to animate. This works best if it is simple and optimised.

See these resources for information on optimising assets:

- https://www.brightec.co.uk/blog/creating-vector-drawables-android

- https://arturdryomov.dev/posts/optimizing-android-vector-images/

For this example I am going to use an Android:

This XML file should be placed in your res/drawable directory.

Notice the group names, as these allow us to reference each part of the image later. Notice also the pivot points defined. These define the pivot around which rotation would happen.

Create the animation

To define the animation itself you can create another XML file. This defines an ObjectAnimator.

This file goes into your res/anim directory.

You can see from the attributes that this is a rotation animation. It will repeat infinitely by going forward and then reversing and going backwards. It will rotate from 180° to 220° over 600 milliseconds each repeat.

Create `AnimatedVectorDrawable`

We can combine these two into an animated-vector. This can again be defined within an XML file.

This XML file should be placed in your res/drawable directory.

This file connects the image and animation. The drawable is defined near the top. The animation rotation is targeting the arm-left.

Using `AnimatedVectorDrawable`

You can now use this animated-vector to display your animation on the screen.

Either set it on your ImageView via:

app:srcCompat="@drawable/img_android_animated"

Or you can define it programmatically:

val drawable = AnimatedVectorDrawableCompat.create(this, R.drawable.img_android_animated)
imageView.setImageDrawable(drawable)
drawable.start()

Converting to `SeekableAnimatedVectorDrawable`

Instead of creating an AnimatedVectorDrawable from your XML, create a SeekableAnimatedVectorDrawable:

val drawable = SeekableAnimatedVectorDrawable.create(this, R.drawable.img_android_animated)
imageView.setImageDrawable(drawable)
drawable.start()

Now you have access to pause seek functionality.

Play/Pause

drawable.pause()
drawable.play()

Duration

drawable.totalDuration

Note for infinite animations this will return -1.

Current Time

drawable.currentPlayTime

This can be both gotten and set. If you set this value, the animation will be set to that time and continued if it was already running.

Conclusion

These new API's provide some interesting functionality. It unlocks some very cool and delighting animations.

Both Core-Animation and Vectordrawable-Seekable are in alpha at the time of writing. It is worth noting that Core-Animation is mostly a backport of the existing framework API's. So arguably it should be more stable than a usual alpha release.

https://developer.android.com/jetpack/androidx/releases/vectordrawable

https://developer.android.com/jetpack/androidx/releases/core

Now you can pause and seek to your heart's content.

Introducing Vectordrawable-Seekable

AnimatedVectorDrawable

Core-Animation

Vectordrawable-Seekable

How to

Create the vector

Create the animation

Create `AnimatedVectorDrawable`

Using `AnimatedVectorDrawable`

Converting to `SeekableAnimatedVectorDrawable`

Conclusion

Looking for something else?

Want to hear more?

Introducing Vectordrawable-Seekable

AnimatedVectorDrawable

Core-Animation

Vectordrawable-Seekable

How to

Create the vector

Create the animation

Create AnimatedVectorDrawable

Using AnimatedVectorDrawable

Converting to SeekableAnimatedVectorDrawable

Conclusion

Looking for something else?

Want to hear more?

Or, pick a topic:

Create `AnimatedVectorDrawable`

Using `AnimatedVectorDrawable`

Converting to `SeekableAnimatedVectorDrawable`