Bringing Life to Your Android Application With Lottie Animations
In this article, I will write about how you can very easily improve the User Experience of your Android Application by bringing animations into your app. For this, I will show you how to use the Lottie library.
Why add animations?
Animations are a very easy way to make the experience of using your app a lot more enjoyable to the user. I’m sure you have plenty of examples of apps you use every day, where the little animations used here and there add a very special look and feel to the app.
If you are a solo developer or working in a small team with few resources, adding animations in your app is a great way to bring life into your app, and differentiate it from the competition. If you’re working on a more established app and team, it’s a great way to strengthen your brand by adding a distinctive look to your application.
With animations, you can improve the look of a screen with no content (empty list, search with no result…). You can add custom loaders, which will change from the regular circular loader from the Material design library. You can design unique landing pages that can help you improve your conversion metrics.
Here are some custom animations used in the app I’m currently working on:
What is Lottie?
I’ve been using Lottie as my tool of choice for animations for a while now.
Lottie is a library created by the team at Airbnb. Heading to their official page, you will learn that:
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.
As you will see in this article, it’s very easy to add animations to your app, it can be done in a couple of minutes.
On top of the library, they also have a marketplace when everyone can find a lot of animations made by the Lottie community and creators. You have a selection of both free and paid animations, and you can also hire professional animators. It’s a great resource to find animations for your app in the case that you do not have a motion designer on your team. Head over to this page to see it for yourself.
In case you do have a motion designer in your team, you can also use Lottiefiles to collaborate with them. They’ll be able to upload their work to the website, and you’ll be able to preview it on your Android phone in seconds. Speaking from experience, it’s a great way to check that the animation provided by your designer will be displayed without problems on an Android app.
If you want to follow along with this tutorial and do not have an animation file yet, I’d recommend finding one of LottieFiles. You’ll need to download the animation as a json file.
For example: https://lottiefiles.com/1798-check-animation
As always when using content from the internet in an application, be mindful of the creative license associated with the resource you are using. Head over to https://lottiefiles.com/page/license for a look at the file’s license.
Let’s get coding!
Alright, now that we know what Lottie is, let’s start using it. You can head over to the official GitHub page of the Android implementation of the library to have all the details.
Start by importing the library in your project by adding
to your gradle file. At the time of writing, the latest version is 3.6.0.
With the library in use, you can now add your animation to your project. The animations are to be put in the raw resources directory of your project. If you do not have a raw directory yet, you can navigate to the res directory of your project in Android Studio, and add a new Android Resource Directory, named raw.
Once created, you can place in it the json file of the animation you want to use.
Now, in the XML file of your Activity, you can add a LottieAnimationView object, in which you’ll put the animation. To specify the animation you want to use, use the property lottie_rawRes. Enter the name of the json file set in the raw directory. In my example, the name will be “@raw/lottie_anim”.
Alternatively, you could add your animations in the assets directory of your project, and use the lottie_fileName property to specify which animation to use. I’ve found this great article that explains the advantages and drawbacks of each solution. From my point of view, having the compile-time checking of the resource makes the development easier. It also enables you to use different animations for different configurations, which can be of use when using animations with texts, which would need to be translated into different languages.
Now, if you’ve run the code written up until now, you should have seen the animation loaded in your app, but, it’s not being animated! Let’s look at some more properties to help us with that:
lottie_autoPlay → indicates whether or not the animation should play as soon as it’s loaded (false by default)
lottie_loop → indicates whether or not the animation should loop once finished (false by default)
lottie_repeatMode → indicates whether the animation should restart of reverse once finished (restart by default)
lottie_repeatCount → indicates how many times the animation will repeat itself.
By using the first 2 properties, both set to true, you’ll get a looping animation that will start as soon as the animation has been loaded. It can be used for a loading animation, for example, that can be run for an indeterminate amount of time.
Now, you can also control the animation programmatically. For example, you may want to have an animation start playing at a specific time, maybe when the user performs an action. To do so, you can use the playAnimation() function on the LottieAnimationView object to start the animation when you want. Additionally, the functions pauseAnimation() and resumeAnimation() can be useful for controlling the animation.
The progress parameter of the animation lets you control the animation’s progress. Set it to 0 to restart the animation from the beginning. For animations made out of multiple parts, you can use it for running one part of the animation after another (for example, imagine an onboarding flow with a few screens, and a single animation progressively advancing as the user goes through the flow).
Finally, for simple animations, you can also play a bit with the color, using the property lottie_colorFilter. It depends on the animation itself, so it might not work for animations taken from LottieFiles. But if you have a motion designer in house, they should be able to make animations in which you can easily modify the color.
Modifying the color of the animation can be useful when you have a common loader animation through the app and want to adjust its color depending on the screen it is on.
Head over to Lottie’s official documentation for more things to play with.
I hope you’ve found this article interesting, and that it showed you why and how to add animations in your applications, to give them more life and personality, and make them stand out from the crowd!
So go ahead and start bothering your motion designer at your company for custom animations, or head over to Lottie Files to find your perfect match. Here’s a very talented Motion Designer I personally recommend, she’s done high-quality animations for apps I’ve been working on in the past, and she’s a great professional: https://lottiefiles.com/neusvich
