Android Animations with Airbnb’s Lottie
Ever tried implementing some nice and catchy animations to make your app’s user experience cool but you got turned off because of some limitations or how sometimes long and tiring it can get? Plus some physics stuff, arghh😫, nah!
I bring you good news, Lottie has been here for you all the while!
What is Lottie?
Lottie is an iOS, Android, React Native, and Web library that renders Adobe After Effects animations in real time exported as JSON with Bodymovin, allowing apps to use animations as easily as they use static images.
Basically, you can display animations using just a generated JSON file and an XML tag!!!
Lottie libraries and plugins are available for free Web, iOS, Android, Flutter,React Native, Xamarin, NativeScript, Windows, Vue, Angular, QT, Skia, Framer X, Sketch for free.
I know what you are thinking, WOW!!!
How do I use Lottie in my android app?
- Add the dependency to your app’s gradle file and sync project.
Versions 2.8.0 and above are only compatible with AndroidX projects.
If you are using AppCompat, kindly use version “2.7.0” and below, you can check the releases here, or to migrate to AndroidX, use Google’s migration guide.
2. Design your animation yourself or download the one you need.
Go to https://lottiefiles.com, create an account and search through the endless animations, you can select and edit the colors, or you can have the UI/UX designer on your team to design them.
Click on the download button on the top right to download the JSON, or click on ‘Edit Layer Colors’ to (what the button says😼).
3. Create a `raw` resource directory in your project, copy and paste the JSON file to the folder.
Fun Fact: Google Home and Google Assistant apps use Lottie for their animations.
4. Add the LottieAnimationView to your XML Layout file
app:lottie_rawRes points to the JSON animation to be used.app:lottie_loop sets the animation to either play infinitely(like a gif) or once.app:lottie_autoPlay makes the animation play automatically when the view is visible on the screen (most times in onCreate)
That’s all!!
Oh, wait, We can also access our animation in our code.
Why Lottie?
- Lottie saves a huge amount of memory compared to PNG sequences. (Especially with the new Lottie 3.0)
- Designs can be easily created with any graphics tool and exported as JSON.
- One design for every platform: Android, iOS, Windows, ReactNative, Web.
- Little or no coding involved in simple animations.
- Straightforward code for complex view animation manipulation.
I hope you understand the basic implementation of Lottie and how to use it.
Happy Coding and Animating!!
