Make a difference in Android app development! Implementing animation using Lottie!
Tags: android, androiddev, kotlin, animation
Published: 2024-04-01 13:37:09

Hi. I am zm soft, registered as a developer last year (end of ’23) and started releasing apps. I released an app for developers as well, so please check it out below link.
[![Get it on Google Play](https://play.google.com/intl/ja/badges/static/images/badges/en_badge_web_generic.png)](https://play.google.com/store/apps/details?id=com.andro.zm.tools.androidtesterspayforward&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1)

Do you use animation in your apps? Just a little animation can make an app easier to understand and look better, right? So, today, I would like to talk about how to display animation in android apps.

-   [LottieAnimation](#lottieanimation)
    -   [What kind of animations can be displayed Types of Animations](#what-kind-of-animations-can-be-displayed-types-of-animations)
    -   [The point is ease of use](#the-point-is-ease-of-use)
    -   [Easy Implementation of Lottie](#easy-implementation-of-lottie)
-   [Basic Lottie Usage](#basic-lottie-usage)
    -   [Specific implementation examples and code](#specific-implementation-examples-and-code)
-   [Precautions and Troubleshooting](#precautions-and-troubleshooting)
-   [Finally](#finally)

## LottieAnimation

I use LottieAnimatiin, an animation display library. I use it because it is relatively easy to display lightweight animations.

### What kind of animations can be displayed Types of Animations

The first good thing about this library is the wide variety of animations available for free. For example, the following animations are available.

// I can't embed lottie animation in this page.
So, please check [my site](https://zmsoft.org/blog/2024/02/28/1592).

These animations are available on the official [LottieFiles website](https://lottiefiles.com/). There are also many paid animations, but you can use just the ones that come up in the free search. Basically, I don’t have the skills or energy to create animations from scratch, so when I want something to move, I first think about what I can use from this site. For example, the following animation can be used to show the user the common click points on the first display. I actually used this animation on the right to guide the user through the process.

### The point is ease of use

It is also fairly simple to implement. For example, if all you need to do is display an animation in a fixed layout, simply define it in the following way and it will work. It is nice to be able to work without having to implement logic.

### Easy Implementation of Lottie

The implementation of Lottie is very simple. Simply embed the animation in a specific layout and it works without any additional logic.

**Example implementation:**

```xml
   <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_id"
        app:lottie_rawRes="@raw/your_lottie_animation"/>
```

## Basic Lottie Usage

Follow the steps below to use Lottie.

-   Incorporating the library (modifying build.gradle)
-   Acquisition and placement of animation files
-   Setting up the layout files
-   Customizing animations

### Specific implementation examples and code

Below I provide specific implementation examples for using Lottie. This includes how to import libraries, place animation files, set up layout files, and customize animations.

**Include in build.gradle/Include libraries:**  
First, import libraries to make lottie usable.  
If there are no problems with the combination of libraries, use the latest environment.

```gradle
dependencies {
    implementation 'com.airbnb.android:lottie:3.4.0'
}
```

**Placement of animation files:.**  
Download the animation file (.json) of your choice from the official [LottieFiles website](https://lottiefiles.com/) and place it in the res/raw folder of your application. Find the animation you want to use, save it to your workspace, and then click the download button. The download is free, but user registration is required. Place the animation in the raw folder. If you do not have a folder, please create one. The file name should be changed arbitrarily according to the android naming conventions (if you do not follow the conventions, you can change the file name). (If you do not follow the rules, an error message will be displayed as shown below.)

**Layout file configuration:.**  
Add a LottieAnimationView to the XML layout so that it can reference the downloaded animation file.

**Customize Animation:.**  
Customize the animation behavior as needed. In the animation settings, you can do the following

-   Loop playback
-   Specify the number of loop times
-   Specify playback speed (including reverse playback)

If you add dynamic processing, you can play/stop at any time you want and even change the playback speed.

First, let’s look at how to specify static. Each of the following specifications will change the animation behavior.

```xml
<com.airbnb.lottie.LottieAnimationView android:id="@+id/lottie_id" android:scaleType="centerCrop" app:lottie_autoPlay="true" app:lottie_loop="true" app:lottie_speed="0.15" app:lottie_rawRes="@raw/your_lottie_animation"/>
```

In this example, the file your\_lottie\_animation.json is played automatically and repeatedly at 0.15x playback speed.

Next is the dynamic process.

```kotlin
lottieAnimationView.playAnimation()
```

Playback can be performed using the above process. In addition to playback, you can also change settings to change speed, such as stop. You can also set a listener as shown below to detect the end of playback and process it.

```kotlin
    lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
        override fun onAnimationStart(animation: Animator) {
            // Processing at the start of animation
        }
        override fun onAnimationEnd(animation: Animator) {
            // Processing at the end of animation
        }
        override fun onAnimationCancel(animation: Animator) {
            // Processing when animation canceled
        }
        override fun onAnimationRepeat(animation: Animator) {
            // Processing when animation repeated
        }
    })
```

## Precautions and Troubleshooting

Lottie is very useful, but there are a few caveats. In particular, repositioning of objects does not always seem to work as expected. I will also discuss stack overflow issues related to processing at the end of an animation and behavior after onPause.

**Troubleshooting example 1:.**
I had an implementation problem that caused a stack overflow in the way the end-of-animation process was handled. Specifically, there was a problem with the way the animation was played in reverse when it reached the end, and the way the playback and reverse playback were repeated. The playAnimation() call was restarted by changing the direction of playback at the end of playback, which caused the stack to clog up and the application to crash each time it played, resulting in rejection of updates from the PlayStore. We solved the problem by posting to the main thread and reloading the queue as follows.

```kotlin
        lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(animation: Animator) {
                // Processing at the start of animation
            }

            override fun onAnimationEnd(animation: Animator) {
                // Processing at the end of animation
                lottieAnimationView.speed = lottieAnimationView.speed*(-1) // Reverse speed for reverse playback
                lottieAnimationView.post {
                    // POST because of stack overflow due to recurrence call if called directly.
                    if(isAttachedToWindow) {
                        lottieAnimationView.playAnimation()
                    }
                }
            }

            override fun onAnimationCancel(animation: Animator) {
                // Processing when animation canceled
            }

            override fun onAnimationRepeat(animation: Animator) {
                // Processing when animation repeated
            }
        })
```

**Troubleshooting example 2:.**
Another thing to be careful about is the processing after onPause(). You should stop animation in the background to avoid unwanted behavior.

```kotlin
    override fun onResume(owner: LifecycleOwner) {
        super.onResume(owner)
        // start
        lottieAnimationView.playAnimation()
    }

    override fun onPause(owner: LifecycleOwner) {
        lottieAnimationView.cancelAnimation()
        super.onPause(owner)
    }
```

However, this was not sufficient when processing at the end of an animation, for example. It is necessary to be aware of the behavior when the background animation is turned almost simultaneously with the end of the animation. Even if playback is stopped to prevent animation in the background, depending on the timing, onAnimationEnd or other actions may be performed after the animation goes to the background. Therefore, touching the UI without checking for this can lead to exceptions or application crashes. Therefore, it was necessary to check if the parent view had not been detached and reprocess it, as shown in the following section of the aforementioned code.

```kotlin
    if(isAttachedToWindow) {
        binding.lottieBackground.playAnimation()
    }
```

## Finally

Lottie is a powerful tool for improving your app’s UI. It has a wide variety of animations available for free and is simple to implement. If you understand the caveats and address them appropriately, you can reap great benefits in app development. There are some caveats, but overall it is a great library that is very easy to use and has many resources available for free. It will definitely help improve the look and feel of your apps, so please give it a try.