Jetpack Compose: Create a Lottie Animation Screen and Advance to the Next Screen

Jetpack Compose: Create a Lottie Animation Screen and Advance to the Next Screen

Introduction

Lottie is a versatile, lightweight animation solution for websites, apps, documentation, and more. It streamlines the process of motion design by offering a simple way to create, edit, test, collaborate, and implement Lottie animations. In this article, we will explore how to incorporate a Lottie animation screen into an Android app using Jetpack Compose. Let's dive in.

Introduction to Lottie animations

Lottie animations are lightweight, scalable vector animations that can be easily integrated into websites, apps, and other digital platforms. Created by Airbnb, Lottie animations use JSON files exported from Adobe After Effects, allowing designers to create complex animations without increasing the file size significantly. These animations can be easily customized and controlled programmatically, making them a popular choice for enhancing user interfaces and user experiences.

Setting up the project

Create a new Android Studio project:-

Create a new, empty Android Studio Compose project. Give it a name and click on "Finish." Gradle will take a few moments to build your project, and once completed, your project will be successfully created.

Add Jetpack Compose dependencies:-

Next, add the necessary dependencies to the build.gradle(app) file for the project. For this article, we will use the default ones.

Add Lottie Compose dependencies:-

Now, add the following dependency to the build.gradle(app) file to import the Lottie library and use it in our project. Simply replace "$latestVersion" with the latest version available. At the time of writing this blog, it's 6.0.0. If you're reading this in the future, make sure to check for the corresponding latest version and use it.

implementation “com.airbnb.android:lottie-compose:$latestVersion”

Creating the Lottie Animation Screen

Downloading the JSON Lottie animation file and placing it in the project:-

Right-click on the res > New > Android Resource Directory.

Type raw to create a raw folder

Now head over to LottieFiles and download Your required Lottie JSON file. After downloading drag and drop it down to the raw folder you just created.

Create a composable function for the Lottie Animation Screen

Add LottieAnimation composable:

Create a new package named 'screen' in your root package, and then create a file called 'LottieScreen'. Additionally, create another package named 'navigation'. Within it, create an enum class called 'Screen'. In this class, add a list of your app's screens that you require. It is good practice to structure your project like this. Now, move to the LottieScreen file you just created and write the following code in it.

@Composable
fun LotttieScreen() {
// add your codes here
}

We need to create Lottie's composition and progress state in the same composable. Add the following codes in the same composable, refer to the comments for some explanations.

//remember lottie composition, which
// accepts the lottie composition result.

 val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.lottie)) //here 'lottie' is the JSON file downloaded from the Lottie's site for you it can be named different.
//also, here 'R' is your personal resource folder, make sure you select the correct one other wise it will give you error. 

// to control the animation
    val progress by animateLottieCompositionAsState(
        // pass the composition created above
        composition,

        // Iterates Forever, for this article we'll not use this, if you want you can
        iterations = LottieConstants.IterateForever,

        // pass isPlaying if you have created other wise you can also add this parameter in LottieAnimation composable later,
        // changing isPlaying will recompose
        // Lottie and pause/play
        isPlaying = isPlaying,

        // pass pass speed if you have created other wise you can also add this parameter in LottieAnimation composable later,
        // changing speed will increase Lottie
        speed = speed,

        // this makes animation to restart
        // when paused and play
        // pass false to continue the animation
        // at which it was paused
        restartOnPlay = false

Add optional UI elements (e.g., text, buttons):-

You can add a button to control the state of the animation or a simple text to describe it. In this case, we'll add a text. Now we need to add a text and lay down the Lottie composable on top of each other.

//surface composable allows you to setup things like background color or border and many more
  Surface(modifier = Modifier.fillMaxSize()) {
        LottieAnimation(composition = composition,  contentScale = ContentScale.FillBounds) //here you also can pass progress state or isPlaying which is by default a boolean and many more just press ctrl+p in windows. contentScale is to set the height of animation, FillBound set the animation size to fit the whole screen. There are some others like, Fit, Crop, etc.
        LaunchedEffect(Unit) { //LaunchedEffect is a coroutine which helps to release the load of running everything in main thread. 
            delay(7000) //Delays coroutine for a given time without blocking a thread and resumes it after a specified time.In this example, '7000' is the duration of your Lottie animation in milliseconds, your might be different assign a value according to that.


            navController.navigate(Screen.ReaderHomeScreen.name) //"Screen.ReaderHomeScreen.name" is the route of the screen you want to navigate to. In your case it can be something different. later we will see how to create it

        }

        Column(modifier = Modifier.padding(1.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Bottom) {
            ReaderLogo()

            Spacer(modifier = Modifier.height(2.dp))
            Text(text = "\"Read And  Change Yourself \"",
                style = MaterialTheme.typography.headlineSmall,
                color = Color.LightGray)

        }

    }



}

@Composable
fun ReaderLogo(modifier: Modifier = Modifier) {
    Text(text = "Lazy Reader",
        modifier = modifier.padding(bottom = 16.dp),
        style = MaterialTheme.typography.headlineSmall,
        color = Color.Green.copy(alpha = 0.7f) //alpha is the trancparency of the color and its assigned in float values
    )

}

Now move to MainActivity and create the composable function ReaderApp (mostly it's named like your app name) and call this composable from setcontent from MainActivity class.

@Composable
fun ReaderApp() {
    Surface(color = MaterialTheme.colorScheme.background,
        modifier = Modifier.fillMaxSize(), content = {
            Column(verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
                ReaderNavigation() // this function will be responsible for all of the navigation purposes 

            }
        })

}

Implementing navigation between screens:

Create Navigation:-

Now right-click on 'navigation' package> new > kotlin class/file > select file and name exact "ReaderNavigation()" (here type what you have named previously)

@Composable
fun ReaderNavigation(){
val navController = rememberNavController() //The NavController is the central API for the Navigation component. It is stateful and keeps track of the back stack of composables that make up the screens in your app and the state of each screen.
    NavHost(navController = navController, //Each NavController must be associated with a single NavHost composable. The NavHost links the NavController with a navigation graph that specifies the composable destinations that you should be able to navigate between
    startDestination = Screen.LottieScreen.name){ //in startDestination set the lottie screen like this first type folder name where its located for us me its "ReaderScreen" then select lottie screen then choose name
        composable(Screen.LottieScreen.name){
            LottieScreen(navController = navController) //composable requires that you provide a route and the composable that should be linked to the destination
        }

Now for this navigation to work we need to pass navController as a parameter in the LottieScreen composable which we have created below.

@Composable
fun LottieScreen(navController: NavController){
}

If you have done everything correctly, congratulations! You have successfully created a Lottie animation screen and transitioned to another screen. I appreciate your valuable time, and if this has been helpful, please leave a comment.