How to play beautiful lottie animations in Android Jetpack compose.

Have ever seen something like this in a app?

Yes, and you thought how would mobile developers do that in a app?

Well there is a best library for that to run a smooth lottie animations in your app with jetpack compose. Here is how you can do that?

There are mainly four types of animations :-

1. Single shot animation
2. User interaction animation
3. Infinite animation
4. Fix times Animation

Note :- Before starting code implementation we will need a lottie animation which will be in Json format. If you want to try out free lottie animations and want to download it in Json then check out this website :- https://lottiefiles.com/

1. Single shot Animation

Firstly we will make a new folder in res folder called raw. In that we will store our Json file.

After that we will use this dependency in our app level gradle file :-

//Lottie
    implementation "com.airbnb.android:lottie-compose:6.0.0"

After that we will make a variable called as composition something like this :-

val composition by rememberLottieComposition(spec = LottieCompositionSpec.RawRes(R.raw.person))

In that we will use rememberLottieComposition method from library. it will define our composition file which will be load in our app.

After that we will use LottieAnimation function to load our Json file :-

LottieAnimation(
    composition = composition,
    modifier = Modifier
        .size(300.dp)
)

And That’s it we did it!! our animation will run smoothly.

This is very simple animation which will be run single time.

But, what if we want something like infinite animation or when user will interact we will play animation? To do that we will move to our second part.

2. User interaction Animation

Now we will add some new variables. Firstly we will add a variable called isPlaying something like this :-

var isPlaying by remember { mutableStateOf(true) }

and after that, inorder to store progress we will add new variable called progress :-

val progress by animateLottieCompositionAsState(
                composition = composition,
                isPlaying = isPlaying )

When animation start our progress will be 0f and when our animation will stop our progress will be 1f.

After that we will add new lamda in our LottieAnimation function something like this :-

LottieAnimation(
      composition = composition,
      modifier = Modifier
          .size(300.dp),
      progress = { progress } 
)

progress lamda will track and store real-time progress in progress variable.

Now we will assume that when user will press a button animation will be restart. To do that we will add new Button something like this :-

Button(
  onClick = { isPlaying = true}
) 
{ Text(text = "Play again") }

And lastly we will add LauchedEffect method in our code something like this :-

LaunchedEffect(key1 = progress) {
                if (progress == 0f) {
                    isPlaying = true
                }
                if (progress == 1f) {
                    isPlaying = false
                }
            }

As you can see our LauchedEffect method will be called every time our progress changed and we will check two things in that. If our progress is 0f that means our animation will start to play and if our progress is 1f that means our animation is complete.

Now whenever user will press the button Animation will restart.

3. Infinite Animation

This one is very easy all you have to do is to add this 2 lines in progress lamda :-

if (progress == 1f){ isPlaying = true }

something like this :-

LottieAnimation(
      composition = composition,
      modifier = Modifier
          .size(300.dp),
      progress = {
          if (progress ==1f){ isPlaying = true }
          progress
      }
  )

And that’s it you are good to go.

4. Fix times Animation

Now what if we want to run our animation for fix times like 2 times or 5 times?

To do that there will be only line of code need in your app :-

val progress by animateLottieCompositionAsState(
                composition = composition,
                isPlaying = isPlaying,
                iterations = 2
            )

We will use iterations variable and we will assign any integer number and it will run that many times.

Note :- do not assign nagative number in to iterations variable it will crash your app.

Github Repo :- https://github.com/HeetKanabar/Lottie-App/tree/master

Inspiration :- https://www.youtube.com/watch?v=zA4BU4Q785o

Library :- https://github.com/airbnb/lottie