How to add Lottie Animation in an Android app - GeeksforGeeks

06 Oct, 2021
This article is about enhancing the User Interface of the mobile application by adding Lottie animation files into our mobile app. The Lottie animations are free to use vector animation files. These animation files can be found at the official site here. Many famous applications use this such as Uber, Netflix, Google, Airbnb, Shopify, etc.Below is an example of Lottie Animation: 
Dynamic properties of Lottie Animations
These can be used to give the app a theme.
These can be added in response to any event such as error, success, etc.
These can be animated to a single part of the animation in response to any user.
Responding to view sizes or other values not known at design time.
Advantages of Lottie
It supports a larger set of After Effects features.
Developers can set the progress to add the animation to a gesture, event, etc.
Masks are anti-aliased.
Developers have the freedom to change speed and color of a specific part of an animations dynamically.
Approach: Step 1: Add this dependency into the App level gradle module of the project and then sync the gradle with the project. This library enables us to use Lottie’s animations:  
Java
// Lottie dependencydef lottieVersion = "3.4.0" implementation "com.airbnb.android:lottie:$lottieVersion"
Step 2: Choose any animation from here and download the JSON file of animation  
Downloading the JSON animation file
Step 3: Now include the XML code into the layout file where you want to show the animation. Here the file name for JSON file is assumed to be animation. Different methods through which Lottie can take JSON files
A JSON animation: src/main/res/raw  
A JSON file: src/main/assets  
A zip file: src/main/assets  
Below is the XML code:  
XML
<com.airbnb.lottie.LottieAnimationView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:id="@+id/animation_view"            app:lottie_rawRes="@raw/animation"            app:lottie_autoPlay="true"            app:lottie_loop="true"/>
Step 4:(optional) Adding controls to animation:  
Adding custom progress: Here the initial and the final value for progress is customized. 
Java
// Custom animation speed or duration.ValueAnimator animator    = ValueAnimator.ofFloat(0f, 1f);animator    .addUpdateListener(animation -> {        animationView            .setProgress(                animation                    .getAnimatedValue());    });animator.start();
 
 
Adding Animation listener: Different listeners can be added with the lottie animations.  
Java
// Declaring the animation viewLottieAnimationView animationView    = findViewById(R.id.animationView);animationView    .addAnimatorUpdateListener(        (animation) -> {            // Do something.        });animationView    .playAnimation(); if (animationView.isAnimating()) {    // Do something.}
Output:  
Reference: https://github.com/airbnb/lottie-android 
gulshankumarar231
Android-Animation
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Create and Add Data to SQLite Database in Android?
Broadcast Receiver in Android With Example
Resource Raw Folder in Android Studio
Services in Android with Example
Android RecyclerView in Kotlin
For-each loop in Java
Object Oriented Programming (OOPs) Concept in Java
Arrays.sort() in Java with examples
Reverse a string in Java
HashMap in Java with Examples