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> |
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> |
values-31/themes.xml
You will need to add a transparent image in the drawable folder.
| <?xml version="1.0" encoding="utf-8"?> | |
| <shape/> |
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") | |
| } |
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.
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) | |
| } | |
| } | |
| } | |
| } |
Job Offers
OUR VIDEO RECOMMENDATION
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) | |
| } | |
| } | |
| } |
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:
This article was originally published on proandroiddev.com on July 18, 2022
