Open In App

Animated Splash Screen in Android Using Jetpack Compose

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Jetpack Compose is Android’s advanced toolkit for creating materialistic UI in a very simpler form. It does not require any kind of XML files in Android Studio also it helps to create native applications as well. It is recently launched in the Android Studio Arctic Fox version. Jetpack Compose Functions are declared as:

@Composable
fun MessageCard(name: String) {
    Text(text = "Hello $name!")
}

Preview Compose Functions:

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard("Android")
}

Splash Screen

Splash Screen is usually the first screen that represents your application through the logo or name of the application. It stays for few seconds and then automatically leads you to your main screen. You can use your logo or any kind of informative text that signifies your application.

Animated Splash Screen

Animated Splash Screen looks pretty attractive to users as the logo or any kind of text can be animated to make it more interesting. Jetpack Compose provides a variety of APIs to decide which Animations to be performed. In this project, we are going to use Animatable API to implement our splash screen. You can customize your animation effect as well as the delay time according to your preference.

Animated Splash Screen using Jetpack Compose

A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Jetpack Compose.

Requirements:

  • Android Studio Arctic Fox Version
  • Kotlin
  • Image (.png)

Step By Step Implementation

Step 1: Create a New Project

Create a new project in Android Studio using Empty Compose Activity and select the language as Kotlin. Click Finish.

Step 2: Add Dependency

Adding Navigation dependency into build.gradle(:app) file located in Gradle Scripts folder.

implementation “androidx.navigation:navigation-compose:2.4.0-alpha06”

Step 3: Add Image to Drawable Folder

Add an image/logo (.png) into drawable folder. The naming convention of an image should be in lowercase without any symbols or numbers or space.

Step 4: Working with the MainActivity.kt file

Create a Composable Function for Navigation

Kotlin




@Composable
fun Navigation() {
    val navController = rememberNavController()
    NavHost(navController = navController,
        startDestination = "splash_screen") {
        composable("splash_screen") {
            SplashScreen(navController = navController)
        }
        // Main Screen
        composable("main_screen") {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text(text = "Main Screen", color = Color.Black, fontSize = 24.sp)
            }
        }
    }
}


Create a Composable Function for Splash Screen

Kotlin




@Composable
fun SplashScreen(navController: NavController) {
    val scale = remember {
        androidx.compose.animation.core.Animatable(0f)
    
      
    // AnimationEffect
    LaunchedEffect(key1 = true) {
        scale.animateTo(
            targetValue = 0.7f,
            animationSpec = tween(
                durationMillis = 800,
                easing = {
                    OvershootInterpolator(4f).getInterpolation(it)
                })
        )
        delay(3000L)
        navController.navigate("main_screen")
    
      
    // Image
    Box(contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()) {
            Image(painter = painterResource(id = R.drawable.gfglogo),
                contentDescription = "Logo",
                modifier = Modifier.scale(scale.value))
    }
}


Go to the MainActivity.kt file and refer to the following code. Below is the complete code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin




package com.example.splashscreenjc
  
import android.os.Bundle
import android.view.animation.OvershootInterpolator
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import kotlinx.coroutines.delay
  
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
                Surface(color = Color.White, modifier = Modifier.fillMaxSize()) {
                    com.example.splashscreenjc.Navigation()
            }
        }
    }
}
@Composable
fun Navigation() {
    val navController = rememberNavController()
    NavHost(navController = navController,
        startDestination = "splash_screen") {
        composable("splash_screen") {
            SplashScreen(navController = navController)
        }
          
        // Main Screen
        composable("main_screen") {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text(text = "Main Screen", color = Color.Black, fontSize = 24.sp)
            }
        }
    }
}
@Composable
fun SplashScreen(navController: NavController) {
    val scale = remember {
        androidx.compose.animation.core.Animatable(0f)
    }
      
    // Animation
    LaunchedEffect(key1 = true) {
        scale.animateTo(
            targetValue = 0.7f,
              // tween Animation
            animationSpec = tween(    
                durationMillis = 800,
                easing = {
                    OvershootInterpolator(4f).getInterpolation(it)
                }))
        // Customize the delay time
        delay(3000L) 
        navController.navigate("main_screen")
    }
      
    // Image
    Box(contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()) {
            // Change the logo
            Image(painter = painterResource(id = R.drawable.gfglogo), 
                contentDescription = "Logo",
                modifier = Modifier.scale(scale.value))
    }
}


Output:



Last Updated : 08 Sep, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads