Lottie on Android: Part 2— Animation listeners

This series of articles follows as a result of Connie Reinholdsson and I’s talk ‘Three approaches to animations on Android’ at the CodeMobile Developer Conference 2019, where we evaluate three approaches to animations including the Android framework, Video and Airbnb’s Lottie library.

• Lottie on Android: Part 1 — The basics
• Lottie on Android: Part 2 — Animation listeners (you’re here)
• Lottie on Android: Part 3 — Dynamic properties

The Github repository with all the examples from this series can be found here. The Lottie animation used in this tutorial is by LottieFiles and can be found here.

Animation Listeners

Lottie, like Android’s own animations, includes a listener to allow you to receive updates on the progress of the animation as it’s playing. With this information you can react to events like when the animation starts, ends and any stage in-between.

Some use cases could be:

• Hiding the animation when it reaches the end.
• Adjusting the speed of the animation at certain points, think dynamic interpolator.
• Other UI or behaviour reacting to progress, e.g. moving to the next screen once the animation finishes.

Above is an example of the listener, the valueAnimator parameter is actually the Android SDK’sValueAnimator class.

The ValueAnimator class gives you the current state of the animation, including it’s current play time.

Coding time

Example 1 — Animation Percentage

Alriiight, so lets try out this listener. For this first example lets simply surface the progress of the animation as a percentage.

Here we have the animatedValue field a value between 0 and 1 and multiplied it by 100 to give us a value between 0 and 100.

Example 2—Short circuiting animation

Next up lets try a progress spinner that morphs into a tick but control when that morph happens 😲

For this lets use a different Lottie animation:

This animation starts as a loading spinner then morphs into a tick. We are going to “short circuit” the animation so when it hits 40% of the way through we will reset it back to 0 keeping the loading spinner going.

This results in a nice way to dynamically extend the length of an animation and end it when we are ready. 👍

In this article we have explored Lottie’s animation listener and some of the possibilities it enables. To find out more exciting tools to use in Lottie, check out the next articles in this series.

Thank you for reading, it would be great to hear your feedback! ✌️