How to add Lottie Animation in an Android app

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

// Lottie dependency
def lottieVersion = "3.4.0" implementation "com.airbnb.android:lottie:$lottieVersion"

chevron_right


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 JOSN file: src/main/assets
  • A zip file: src/main/assets

Below is the XML code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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"/>

chevron_right


Step 4:(optional) Adding controls to animation:

  • Adding custom progress: Here the initial and the final value for progress is customized.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Custom animation speed or duration.
    ValueAnimator animator
        = ValueAnimator.ofFloat(0f, 1f);
    animator
        .addUpdateListener(animation -> {
            animationView
                .setProgress(
                    animation
                        .getAnimatedValue());
        });
    animator.start();

    chevron_right

    
    

  • Adding Animation listener: Different listeners can be added with the lottie animations.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Declaring the animation view
    LottieAnimationView animationView
        = findViewById(R.id.animationView);
    animationView
        .addAnimatorUpdateListener(
            (animation) -> {
                // Do something.
            });
    animationView
        .playAnimation();
      
    if (animationView.isAnimating()) {
        // Do something.
    }

    chevron_right

    
    

  • Output:

    Reference: https://github.com/airbnb/lottie-android

    Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.