Android How to integrate Lottie Files Animations

byRavi Tamada -
0
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 🤗
Tags

You may like these posts

Previous Post Next Post

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