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.
Let me know if you have any queries in the comments section below.
Cheers!
Happy Coding 🤗
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}
- 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" }
- Under res, create a new folder called raw by Right Clicking on res => New => Directory.
- Download this lottie animation JSON and add it to raw folder.
- Add the splash screen by creating a new empty activity and name it as SplashActivity
- 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>
- 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) { } }) } }
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.- Create another activity called PaymentActivity
- Download this JSON and add it to res => raw folder
- 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.
activity_payment.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="#00DEB2" tools:context=".PaymentActivity"> <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="@dimen/done_width" android:layout_height="@dimen/done_width" android:layout_marginTop="150dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:lottie_autoPlay="true" app:lottie_loop="false" app:lottie_rawRes="@raw/payment_done" /> <TextView android:id="@+id/message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="-50dp" android:alpha="0" android:gravity="center_horizontal" android:text="@string/payment_successful" android:textColor="#38C172" android:textSize="22dp" android:textStyle="bold" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/animation_view" /> <TextView android:id="@+id/transaction_id" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:alpha="0" android:gravity="center_horizontal" android:text="Transaction ID: 49290020000293" app:layout_constraintTop_toBottomOf="@id/message" /> <com.google.android.material.button.MaterialButton android:id="@+id/btn_okay" android:layout_width="wrap_content" android:layout_height="wrap_content" app:cornerRadius="40dp" app:backgroundTint="#000000" android:layout_marginTop="@dimen/activity_padding" android:text="HOME" android:alpha="0" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/transaction_id" /> </androidx.constraintlayout.widget.ConstraintLayout>
- 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 -> if (animation.animatedFraction > 0.5 && !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 🤗