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

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

,

Meet Jewel:Create IDE plugins in Compose

Jetpack Compose is the declarative UI toolkit for Android that makes it easy to create beautiful, responsive apps. However, until recently, there was no easy way to use Compose to create IDE plugins without too…
Watch Video

Meet Jewel:Create IDE plugins in Compose

Sebastiano Poggi & Chris Sinco
UX Engineer & UX Design Lead
Google

Meet Jewel:Create IDE plugins in Compose

Sebastiano Poggi & ...
UX Engineer & UX Des ...
Google

Meet Jewel:Create IDE plugins in Compose

Sebastiano Poggi ...
UX Engineer & UX Design L ...
Google

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
Compose is a relatively young technology for writing declarative UI. Many developers don’t even…
READ MORE
blog
When it comes to the contentDescription-attribute, I’ve noticed a couple of things Android devs…
READ MORE
blog
In this article we’ll go through how to own a legacy code that is…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

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

Menu