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.
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.
// I can't embed lottie animation in this page.
So, please check my site.
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.
Top comments (0)