Lottie on Android: Part 2— Animation listeners

Matt Carron
Jul 2, 2019 · 3 min read
Image for post

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.

Image for post
Image for post

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.

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.

Image for post
Image for post

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. 👍

Image for post
Image for post

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! ✌️

Compare the Market

The people behind comparethemarket.com and the Meerkat App

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store