Lottie Animation in Android using Kotlin

Lottie is a library that allows developers to easily add animations to Android apps. It uses animations created with Adobe After Effects and exported as JSON files, and allows developers to play them back natively on Android devices.

Here are some examples of how to use Lottie in an Android app using Kotlin:

1. Adding Lottie to an Activity or Fragment:

To use Lottie in an Activity or Fragment, you first need to add the Lottie library to your project’s dependencies in the build.gradle file:

implementation 'com.airbnb.android:lottie:$lottieVersion'

where $lottieVersion is the version number of the Lottie library.

Then, you can add a LottieAnimationView to your layout file, like this:

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_rawRes="@raw/my_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

This creates a LottieAnimationView that loads the animation from the raw resource my_animation, and automatically starts playing and looping the animation.

2. Playing, pausing, and stopping animations:

You can control Lottie animations programmatically using the LottieAnimationView class. Here are some examples:

val animationView = findViewById<LottieAnimationView>(R.id.animation_view)

// Start playing the animation
animationView.playAnimation()

// Pause the animation
animationView.pauseAnimation()

// Resume the animation after it has been paused
animationView.resumeAnimation()

// Stop the animation and reset it to the beginning
animationView.cancelAnimation()

3. Loading animations from assets or URLs:

In addition to loading animations from raw resources, you can also load them from assets or URLs using the setAnimation or setAnimationFromUrl methods:

// Load an animation from the assets folder
animationView.setAnimation("my_animation.json")

// Load an animation from a URL
animationView.setAnimationFromUrl("https://example.com/my_animation.json")

4. Listening for animation events:

You can listen for events that occur during the playback of a Lottie animation using an AnimatorListener:

animationView.addAnimatorListener(object : Animator.AnimatorListener {
    override fun onAnimationStart(animation: Animator) {
        // Animation started
    }

    override fun onAnimationEnd(animation: Animator) {
        // Animation ended
    }

    override fun onAnimationCancel(animation: Animator) {
        // Animation cancelled
    }

    override fun onAnimationRepeat(animation: Animator) {
        // Animation repeated
    }
})

5. Changing the speed and progress of an animation:

You can change the playback speed of a Lottie animation using the setSpeed method:

// Double the playback speed of the animation
animationView.setSpeed(2f)

You can also change the progress of the animation using the setProgress method:

// Set the animation to play from the halfway point
animationView.progress = 0.5f

6. Using Lottie animations as drawable resources:

You can use Lottie animations as drawable resources in your app, which allows you to easily use them in ImageView or ImageButton elements:

<ImageView
    android:id="@+id/animated_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_animation" />

This creates an ImageView that displays the Lottie animation my_animation as a drawable resource.

7. Creating and using dynamic animations:

You can also create Lottie animations programmatically and use them in your app. Here’s an example:

// Create a new LottieAnimationView
val dynamicAnimationView = LottieAnimationView(context)

// Set the animation using a JSON string
dynamicAnimationView.setAnimation("my_dynamic_animation.json")

// Add the animation view to your layout
myLayout.addView(dynamicAnimationView)

This creates a new LottieAnimationView and sets its animation using a JSON string. You can also create animations from JSON files stored in assets or downloaded from a URL.

8. Adding interactions to Lottie animations:

You can add interactions to Lottie animations by attaching a LottieListener to the animation view. This allows you to trigger code when specific events occur during the animation, such as when it starts, ends, or loops:

// Attach a LottieListener to the animation view
animationView.addLottieListener(object : LottieListener {
    override fun onStarted() {
        // Code to run when the animation starts
    }

    override fun onFinished() {
        // Code to run when the animation ends
    }

    override fun onLooped(count: Int) {
        // Code to run when the animation loops
    }
})

9. Controlling the repeat count of an animation:

By default, Lottie animations repeat indefinitely. You can control the number of times an animation repeats by setting the repeat count using the repeatCount property:

// Set the animation to repeat 3 times
animationView.repeatCount = 3

10. Using Lottie animations with RecyclerView:

You can use Lottie animations with RecyclerView to create dynamic animations in list or grid views. Here’s an example of how you can use Lottie animations in a RecyclerView adapter:

class MyAdapter(private val items: List<MyItem>) :
    RecyclerView.Adapter<MyViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false)
        return MyViewHolder(view)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        val item = items[position]

        // Set the Lottie animation for the view holder
        holder.animationView.setAnimation(item.animationResId)
        holder.animationView.playAnimation()
    }

    override fun getItemCount(): Int {
        return items.size
    }
}

class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val animationView: LottieAnimationView = itemView.findViewById(R.id.animation_view)
}

This creates an adapter for a RecyclerView that displays a list of items, where each item has a Lottie animation associated with it. The Lottie animation is loaded and played when the item is bound to a view holder.

Overall, Lottie is a versatile library that can be used in many different ways to add animations to your Android app using Kotlin. By experimenting with these examples and exploring the Lottie documentation, you can discover even more ways to use this powerful library.