Blog Infos
Author
Published
Topics
,
Published

An Android Splash Screen is the first screen that is visible to the user when the app is launched. In this post, we will create an animated splash screen with the help of Lottie (an awesome animation library for Android) and Navigation-Compose.

Adding Dependencies

Let us add Navigation-Compose and Lottie to your app level build.gradle file.

dependencies{
....
implementation 'com.airbnb.android:lottie-compose:5.2.0'
implementation 'androidx.navigation:navigation-compose:2.5.0'
...
}

app/build.gradle

 

Theme

We will have to set the background colour and the system bar colours in order for use to play our animations nicely. We will add the below properties to the themes.xml file

<style name="Theme.AnimatedSplashScreen" parent="android:Theme.Material.Light.NoActionBar">
<item name="android:statusBarColor">@color/black</item>
<item name="android:windowBackground">@color/black</item>
</style>
view raw themes.xml hosted with ❤ by GitHub

values/themes.xml

 

If you are targeting Android SDK 31 and higher, you will need to create a new file called themes.xml in the values-31 folder.

<style name="Theme.AnimatedSplashScreen" parent="android:Theme.Material.Light.NoActionBar">
<item name="android:statusBarColor">@color/black</item>
<item name="android:windowBackground">@color/black</item>
<item name="android:windowSplashScreenAnimatedIcon">@drawable/transparent_image</item>
</style>
view raw themes.xml hosted with ❤ by GitHub

values-31/themes.xml

 

You will need to add a transparent image in the drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<shape/>
view raw transparent.xml hosted with ❤ by GitHub

drawable/transparent_image.xml

 

Navigation

Start by creating a sealed class that will hold the routes to the different paths the nav graph can navigate to. Since this is an example we will be creating a small one which will have routes to only two screens. i.e the splash screen and the home screen.

sealed class Screens(val route: String) {
object Splash : Screen("splash_screen")
object Home : Screen("home_screen")
}
view raw routes.kt hosted with ❤ by GitHub

Next, we will set up our navigation graph. We can do this by creating a new file called Navgraph.kt which will be responsible for maintaining the graph for our screens.

@Composable
fun SetupNavGraph(navController: NavHostController) {
NavHost(
navController = navController,
startDestination = Screen.Splash.route
) {
composable(route = Screen.Splash.route) {
SplashScreen(navController = navController)
}
composable(route = Screen.Home.route) {
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
contentAlignment = Alignment.Center
) {
Text(text = "Hello World", color = Color.Black)
}
}
}
}
view raw navgraph.kt hosted with ❤ by GitHub

Now to link this to the main activity. This is straight forward we can do this by simply calling SetupNavGraph in our main activity like-wise.

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
AnimatedSplashScreenTheme {
val navController = rememberNavController()
SetupNavGraph(navController = navController)
}
}
}
}
view raw MainActivity.kt hosted with ❤ by GitHub

Job Offers

Job Offers


    Delivery Lead / Scrum Master (m/w/d)

    Deutsche Post IT Services (Berlin) GmbH
    Berlin
    • Full Time
    apply now

    Android Entwicklerin Echtzeitkommunikation

    sipgate GmbH
    Germany
    • Full Time
    apply now

    Senior Android Engineer – BILD (m/f/d)

    Axel Springer National Media & Tech
    Berlin
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

Hype Driven Development: How I learned to stop worrying and love the failures

Ash Davies
Senior Android Developer
@ Snapp Mobile GmbH

Hype Driven Development: How I learned to stop worrying and love the failures

Ash Davies
Senior Android Devel ...
@ Snapp Mobile GmbH

Hype Driven Development: How I learned to stop worrying and love the failures

Ash Davies
Senior Android Developer
@ Snapp Mobile GmbH

Jobs

SplashScreen

Now let us build the screen which will play our animation and then navigate to the home screen. We will simply add a Lottie view and load a .lottie file in the view.

@Composable
fun SplashScreen(navController: NavHostController) {
Box(
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colors.primary)
) {
val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.logo))
val logoAnimationState =
animateLottieCompositionAsState(composition = composition)
LottieAnimation(
composition = composition,
progress = { logoAnimationState.progress }
)
if (logoAnimationState.isAtEnd && logoAnimationState.isPlaying) {
navController.navigate(Screen.Home.route)
}
}
}
view raw SplashScreen.kt hosted with ❤ by GitHub

In the above code, we create a composition which will be used by our Lottie view. We can directly assign a file logo.lottie from the raw folder in the resources. We then create a state variable to observe the animation of the composable which we will later use to check if the animation has been completed or not.

Lastly, just add the LottieAnimation view and assign the composable and the progress and we are done. When the state changes to playing and is at the last frame we simply navigate to the next composable and there we have it.

You can find the full working code here:

Feel free to drop a clap or comment or reach out to me on LinkedInTwitterWebsite.

This article was originally published on proandroiddev.com on July 18, 2022

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
blog
Expandable views are a common way to hide details of a visualised data structures.…
READ MORE
blog
Compose is part of the Jetpack Library released by Android last spring. Create Android…
READ MORE
blog
Working with user interfaces sometimes is not an easy job. On Android you have…
READ MORE

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.

Menu