Getting Started with Lottie Animations (Android)
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!
You can create your own animations using Adobe After Effects, or feel free to use the ones uploaded by other users on: https://lottiefiles.com/
For the purpose of this tutorial, we will be using one of the already uploaded animations. Without further ado, let’s get started ;)
Select an Animation
- Go to https://lottiefiles.com/ and select any animation of your choice. For this example, I’m going to choose 3 different animations:-
- Download the animations and rename them.. For example, the ones used here were renamed to “thumb_up.json”, “gradient_bg.json” and “toggle_switch.json” respectively.
Fire up Android Studio
- Create a new project.
2. Select Empty Activity.
3. Name your application. In this example, I’ve decided to go with LottiePlayground. Please ensure that the “Use AndroidX artifacts” feature has been enabled. Click on Finish.
4. Once the project is completely loaded, go to app level Gradle file and under dependencies, add
At the time of writing the latest version of Lottie is ‘3.0.0-beta1’.
5. Sync the project Gradle files.
6. Create a folder “assets” under app > src > main and paste the downloaded animations in it.
Get. Set. CODE!!
- Modify your colors.xml:
<?xml version="1.0" encoding="utf-8"?>
2. Modify your styles.xml:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
3. Modify your AndroidManifest.xml:
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
4. Write the following code in activity_main.xml:
5. Write the following code in MainActivity.java:
Well that’s pretty much it. Hit that ‘Run app’ button, then sit back while the code compiles and the APK installs on your device.
For the complete project files, visit:
Contribute to ssindher11/LottiePlayground development by creating an account on GitHub.github.com
To know more on how to use Lottie, visit:
Lottie supports hardware acceleration but it is disabled out of the box. Read this article to learn more about hardware…airbnb.io
Thank You for reading :) I would love to discuss and solve any of your queries.