Since I started android app development, lots of things have changed! From architecture to user experience, from the database to app size, the change is good but yet not enough. Yet today, developers have to struggle to make their app stand apart and more user-friendly. Surely the provided app components in Android Studio like a switch, checkbox, progress bar still doesn’t provide an attractive user interface. Developers need to add their modifications like the animation on tap, smooth flow of components, etc to add their flavor for the component.
The problems increase when your app has many modules or has complex architecture. For example, consider the Ola app, the app has a very complex architecture consisting of multiple modules and having a very heavy user base — so no silly approach can be adopted!
Adding animations or creating a smooth and attractive user interface for such an app is a hard nut to crack. Though there have been many libraries developed for this like — Sequent or Flubber, they haven’t proved much effective when it comes to custom views. Then there comes the use of Lottie, the most powerful library for animation in android, iOS, and web combined.
According to Airbnb github page, Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!
Complex to read? But it isn’t that difficult.
In simple words, we can export animation from Adobe After Effects and use them in our app, not it sound simple!
This exported Adobe After Effects files are called Lottie files and are freely available on the Lottie page.
Let us create a sample app and add an animated view with a Lottie file.
Create an empty screen android app in android studio. And create a raw folder in the res folder.
Next, add Lottie animation library to our android app, copy-paste this line in our app/build.gradle
Next, you can download any Lottie animation file from here.
For our sample app, I will be using this Lottie animation :
To download this Lottie file, go here and press: Download > Lottie JSON
Now we have 29390-your-order-is-confirmed.json file in our Downloads.
In our raw folder of the Android project, rename according to android naming standards and copy-paste this file.
In our activity layout, copy-paste this tag:
This will make our app looks somewhat like this:
Lottie makes it a lot easier to add complex animation to our apps. Thanks to Airbnb of course!
This android project is available on Github here.