Cloudzilla
Logo
arrow left
Back to Developer Education

Beginner's guide to Lottie animations in Android using Kotlin

Beginner's guide to Lottie animations in Android using Kotlin

Designing animations can be tedious and technical for most developers. Lottie is an open-source animation library developed by Airbnb. It renders Adobe After Effects with BodyMovin. <!--more--> BodyMovin is an Adobe After Effects plugin that exports animations to a JSON file. Lottie makes it easy to work with animations without downloading heavy animation files.

It helps developers to achieve a clean UI, therefore achieving a good user experience. Lottie is easy to use, and the files can be accessed on their website. Lottie is supported on mobile (Android, iOS, and React Native), web, and desktop applications.

Why use Lottie

  • Simple UI elements: Lottie is light and the JSON files exported are small-sized.
  • Dynamic scenes: you can tell a narrative across several shots, making it interactive.
  • Alter animations as you like: the animations offered on Lottie can be altered from speed to color to progress hence meeting the developer's need.
  • Improved user experience.
  • Pairs well across all mobile devices(in our case), even slow-performing ones, since it is lightweight.
  • The animations also have a clear resolution.

Prerequisites

The reader should have:

  • A basic knowledge of developing Android applications.
  • A solid understanding of Kotlin programming language.
  • Android Studio installed.

Goal

At the end of this tutorial, the reader should understand how to use and implement Lottie animations in Android applications.

Since the project is a bit wide, we shall only go through all the basics of Lottie animations on the app.

Step one: Create a new Android Studio project

Open Android Studio and select Create New Project - > Empty Activity and click Next. Fill in the required fields and click finish.

Step two: Choosing an animation file to use on your app

Head over to Lottie's website and choose the animations of your choice. Most of the animations are free, while others one has to pay to use them.

Download the .json file. In our project, let us create a res/raw folder. Save the .json animations there. On your android project, create a res/raw folder. Right-click on res folder, select New -> Resource package and name it raw. Save the .json animations inside that folder.

Step three: Adding Lottie dependencies to the project

In the build. gradle (project level), add the Lottie Animation library. Make sure you check out the latest library version and sync the changes.

//Lottie Animation
implementation 'com.airbnb.android:lottie:3.4.0'

We shall also use other non-related libraries for this project which can be found here.

Step four: Designing the project's layout

In this step, we will design our application's layout. The layout will only have three basic elements:

  • A Textview contains a heading.
  • Buttons will be used for navigation.
  • LottieAnimationView.
LottieAnimationView

The view is added just like any other element in the layout. Some of the attributes you will come across are like:

  • lottie_loop - A boolean to ensure that the animation stays in a loop.
  • lottie_speed - This determines the speed of the animation.
  • lottie_autoplay - A boolean that starts the animation.
  • lottie_url - The JSON URL from the website.

If you want your animations to rely on the internet, you can use the json URL from the animation on the official website. Saves you space on your app, but it will not work offline. The file is small, so downloading it is recommended.

  • lottie_rawRes - This contains the bundled animation on your app.
  • lottie_fileName - If you have added the JSON files to the assets folder, use this instead of lottie_rawRes.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="@dimen/margin_16">
  
<TextView
android:id="@+id/titleTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
android:textColor="@color/dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
  
<TextView
android:id="@+id/subTitleTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
android:textColor="@color/dark"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/titleTv"/>
  
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/img"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:adjustViewBounds="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.4"
app:lottie_loop="true"
app:lottie_speed="1"
tools:ignore="ContentDescription"/>
  
<TextView
android:id="@+id/descTV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textColor="@color/dark"
app:layout_constraintEnd_toEndOf="@+id/img"
app:layout_constraintStart_toStartOf="@+id/img"
app:layout_constraintTop_toBottomOf="@+id/img"/>
  
</androidx.constraintlayout.widget.ConstraintLayout>

You can also load the animation “programmatically” from the MainActivity.kt by:

val animationView:LottieAnimationView = findViewById(R.id.animation_view)
animationView.setAnimation("hello-world.json")
animationView.loop(true)
animationView.playAnimation()

This function will load the file and parse the animation.

Step five: Adding functionality to the application.

Since we use an adapter to display the animation's content, write the following code in your adapter's bind function:

fun bind(onBoardingPage: OnboardingPage) {
val res = root.context.resources
root.titleTv?.text = res.getString(onBoardingPage.titleResource)
root.subTitleTv?.text = res.getString(onBoardingPage.subTitleResource)
root.descTV?.text = res.getString(onBoardingPage.descriptionResource)
root.img.setAnimation(onBoardingPage.logoResource)
root.img. playAnimation()
}
  • .setAnimation - This sets the raw animations to the image view.
  • .playAnimation() - This plays the animation.

Next, in your Mainctivity.kt create a setupAnimation function and add the following:

fun setupAnimation(){
val animation = findViewById<LottieAnimationView>(R.id.progressBar)
animation.speed = 2.0F // How fast does the animation play
animation.progress = 50F // Starts the animation from 50% of the beginning
animation.addAnimatorUpdateListener {
// Called every time the frame of the animation changes
}
animation.repeatMode = LottieDrawable.RESTART // Restarts the animation (you can choose to reverse it as well)
animation.cancelAnimation() // Cancels the animation
}
  • .speed - To set the speed at which the animation plays.
  • .progress - To choose where the animation starts.
  • .repeatMode - Restarts the animation.

Errors experienced

When using a class that holds the animation files like this:

enum class OnboardingPage(
@StringRes val titleResource: Int,
@StringRes val subTitleResource: Int,
@StringRes val descriptionResource: Int,
@DrawableRes val logoResource: Int
) {
ONE(R.string.onboarding_slide1_title, R.string.onboarding_slide1_subtitle,R.string.onboarding_slide1_desc, R.raw.comp),
TWO(R.string.onboarding_slide2_title, R.string.onboarding_slide1_subtitle,R.string.onboarding_slide1_desc, R.raw.jump),
THREE(R.string.onboarding_slide3_title, R.string.onboarding_slide1_subtitle,R.string.onboarding_slide1_desc, R.raw.cycling)
}

You might come across a lint error in the adapter, on this line:

root.img.setAnimation(onBoardingPage.logoResource).

If you add the @SuppressLint annotation, the project will not run. The error does not necessarily affect the functionality of the app.

Output

Let us run the app.

App gif

You can check out the project on GitHub. In case of any clarification or any problem, do not hesitate to raise an issue in the same repository. Click here to download the app bundle.

References

Conclusion

Lottie Animations can be used all around the app, from splash screens, onboarding screens, empty state layouts, bottom navigations, and many other ways. Be sure to try out different ways to incorporate it into your app.

Happy coding!

Peer Review Contributions by: Briana Nzivu

Published on: Jun 20, 2021
Updated on: Jul 12, 2024
CTA

Start your journey with Cloudzilla

With Cloudzilla, apps freely roam across a global cloud with unbeatable simplicity and cost efficiency