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.
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
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.
You will need to add a transparent image in the drawable folder.
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.
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.
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.
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:
Thanks for reading, if you have my articles feel free to subscribe to my newsletter or share the article.
