Make a difference in Android app development! Implementing animation using Lottie!

By /

Hello. I am zm soft, registered as a developer last year (end of ’23) and started releasing apps. I am planning to release an app for developers as well, so please check it out if you like.

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

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.

These animations are available on the official LottieFiles website. 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:

   <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.

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 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.

   <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.

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.

        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.

        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.

    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.

                    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.

45 thoughts on “Make a difference in Android app development! Implementing animation using Lottie!”

  3. Clydewiste

    Наиболее трендовые новинки мировых подиумов.
    Абсолютно все эвенты всемирных подуимов.
    Модные дома, бренды, haute couture.
    Самое лучшее место для трендовых людей.
    https://modavgorode.ru

    Reply
  5. binance

    I don’t think the title of your article matches the content lol. Just kidding, mainly because I had some doubts after reading the article.

    Reply
  6. LeroyHeink

    Очень важные новости моды.
    Важные эвенты мировых подуимов.
    Модные дома, бренды, haute couture.
    Самое приятное место для трендовых хайпбистов.
    https://modaizkomoda.ru

    Reply
  9. Donaldtig

    Очень трендовые новинки индустрии.
    Исчерпывающие мероприятия всемирных подуимов.
    Модные дома, бренды, высокая мода.
    Самое приятное место для трендовых людей.
    https://hypebeasts.ru/

    Reply
  39. MarcusSoste

    Бренд Balenciaga является знаменитым модных домов, который был основан в начале 20 века легендарным кутюрье Кристобалем Баленсиагой. Его узнают экстравагантными дизайнерскими решениями и авангардными кроями, которые часто бросают вызов стандартам индустрии.
    https://balenciaga.whitesneaker.ru/

    Reply
  40. DanielWix

    В нашем магазине вы можете приобрести кроссовки New Balance 574. Эта модель отличается удобством и современным внешним видом. New Balance 574 подойдут для повседневной носки. Выберите свою пару уже сегодня и почувствуйте разницу легендарного бренда.
    https://nb574.sneakero.ru/

    Reply
  41. BruceHah

    На данном ресурсе можно купить сумки от Balenciaga по доступной цене. Большой выбор позволяет найти сумку на любой вкус для любого. Заказывайте фирменные аксессуары этого знаменитого бренда быстро и просто.
    https://bags.balenciager.ru/

    Reply
  44. www.ecobij.nl

    Hi there! Do you know if they make any plugins to help with
    SEO? I’m trying to get my website to rank for some targeted keywords but I’m not
    seeing very good success. If you know of any please share.
    Thank you! You can read similar text here:
    Eco wool

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top