Android How to integrate Lottie Files Animations

Lottie animations are widely used in Android development to enhance the user interface with smooth, high-quality animations. These animations can be easily integrated into Android applications, offering a lightweight alternative to traditional animations while maintaining excellent visual quality.

Lottie files are created using the Bodymovin plugin for Adobe After Effects, which exports animations as JSON files. These files can then be easily integrated into projects using the Lottie libraries available for iOS, Android, React Native, and web development.


In this example, we'll see how these animations can be integrated in an android with few examples.


1. Splash Screen Animation

Let's get started by designing a simple splash screen animation using lottie animation.
By default, Android automatically adds a Splash Screen to your app and it can be customised using SplashScreen API, but using Lottie animations SplashScreen API is not possible.{alertInfo}
  1. Add the lottie library by adding the dependency to your app's build.gradle and sync the project.
    build.gradle
    
    dependencies {
        ...
            
        implementation "com.airbnb.android:lottie:6.5.0"
    }
      
  2. Under res, create a new folder called raw by Right Clicking on res => New => Directory.
  3. Download this lottie animation JSON and add it to raw folder.
  4. Add the splash screen by creating a new empty activity and name it as SplashActivity
  5. Open the layout file of splash activity activity_splash.xml and do the below changes.
    • Lottie provides LottieAnimationView to play the animations. Add this view to your layout file.
    • Attach the JSON file using lottie_rawRes attribute.
    • You can use other attributes like lottie_autoPlay to auto play the animation and lottie_loop to loop the animation.
    activity_splash.xml
    
    <?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:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/intro"
        tools:context=".SplashActivity">
    
        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:lottie_autoPlay="true"
            app:lottie_rawRes="@raw/intro" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>
      
  6. Now the splash screen should start the main activity once the animation ends. To do this, we can add the animation listerner using addAnimatorListener method and start the main activity once the animation ends. Open SplashActivity and do the below changes.
    SplashActivity.kt
    
    package info.androidhive.lottieanimations
    
    import android.animation.Animator
    import android.annotation.SuppressLint
    import android.content.Intent
    import android.os.Bundle
    import androidx.activity.enableEdgeToEdge
    import androidx.appcompat.app.AppCompatActivity
    import androidx.core.view.ViewCompat
    import androidx.core.view.WindowInsetsCompat
    import info.androidhive.lottieanimations.databinding.ActivitySplashBinding
    
    @SuppressLint("CustomSplashScreen")
    class SplashActivity : AppCompatActivity() {
        private val binding by lazy(LazyThreadSafetyMode.NONE) {
            ActivitySplashBinding.inflate(layoutInflater)
        }
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            enableEdgeToEdge()
            setContentView(binding.root)
    
            binding.animationView.addAnimatorListener(object : Animator.AnimatorListener {
                override fun onAnimationStart(p0: Animator) {
    
                }
    
                override fun onAnimationEnd(p0: Animator) {
                    // start main activity once animation ends
                    startActivity(Intent(this@SplashActivity, MainActivity::class.java))
                    finish()
                }
    
                override fun onAnimationCancel(p0: Animator) {
    
                }
    
                override fun onAnimationRepeat(p0: Animator) {
    
                }
            })
        }
    }
    If you run the app now, you can see this beautiful splash screen animation.


2. Payment Screen Animation

Let's create one more example using the lottie animations. Assume the app has payments flow and we want to play a beautiful animation once the payment is done.
  1. Create another activity called PaymentActivity
  2. Download this JSON and add it to res => raw folder
  3. Open the layout file of payment activity activity_payment.xml and add the below code. Here we are adding LottieAnimationView along with few TextViews and a Button.
  4. Now open the PaymentActivity and do the below changes. Here we observe the animation progress using addAnimatorUpdateListener and when the animations completes 50%, the other views are shown on the screen.
    SplashActivity.kt
    
    package info.androidhive.lottieanimations
    
    import android.animation.Animator
    import android.animation.Animator.AnimatorListener
    import android.os.Bundle
    import android.util.Log
    import android.view.View
    import androidx.activity.enableEdgeToEdge
    import androidx.appcompat.app.AppCompatActivity
    import androidx.core.view.ViewCompat
    import androidx.core.view.WindowInsetsCompat
    import androidx.core.view.isVisible
    import info.androidhive.lottieanimations.databinding.ActivityPaymentBinding
    
    class PaymentActivity : AppCompatActivity() {
        private val binding by lazy(LazyThreadSafetyMode.NONE) {
            ActivityPaymentBinding.inflate(layoutInflater)
        }
    
        private val animationDuration = 100L
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            enableEdgeToEdge()
            setContentView(binding.root)
    
            var animatedStarted = false
            binding.animationView.addAnimatorUpdateListener { animation -&gt;
                if (animation.animatedFraction &gt; 0.5 &amp;&amp; !animatedStarted) {
                    animatedStarted = true
                    showMessage()
                }
            }
    
            binding.btnOkay.setOnClickListener { finish() }
        }
    
        private fun showMessage() {
            binding.message.animate().alpha(1f).setDuration(animationDuration)
            binding.transactionId.animate().alpha(1f).setDuration(animationDuration)
            binding.btnOkay.animate().alpha(1f).setDuration(animationDuration)
        }
    }
        

Let me know if you have any queries in the comments section below.

Cheers!
Happy Coding 🤗
Previous Post Next Post

نموذج الاتصال