Jetpack Compose Navigation Using Enum Class with Basic Splash Screen

Tamer Sarioglu
Mobillium
Published in
3 min readSep 28, 2022

Hi again friends. Jetpack compose is already growing fast and today I want to show you how to add basic splash screen to your project and navigation through pages with screen names which stored in enum class. Let’s code :)

Meoww

First let’s start a new project with Jetpack Compose.

Before do any coding add dependency on this page to your app level gradle:

https://developer.android.com/jetpack/compose/navigation

Then do some changes in MainActivty.kt as i show you below.

We don’t need anything more here. Just need to call NavigationWithEnumClassNavigation() function and we decide later which screen is shown first.

At this point, as you see NavigationWithEnumClassNavigation() is causing an error. Because we didn’t create this yet. Let’s create this file and create a composable function in it named NavigationWithEnumClassNavigation() as shown below.

In this composable function we are going to code our navigation controller and navigation host. Shown as below;

We defined our startDestination and navController. Basically here, we are defined our starting point and navController. That allows us to create our routes as composables. Then we navigate to our first screen, the SplashScreen. But there is problem here. There is no SplashScreen and Screens file yet. Lets create those;

That’s it. If you do all above instructions correctly, you should able to see this;

If you couldn’t, don’t worry. I put this project on GitHub.

You did a great job. Congratulate yourself!!

Ok. Now begin to code our SplashScreen. Shall we ? Let’s go:

First of all we need a logo of our basic app. Almost every app has their own logo which is shown at the beginning for couple of seconds and then HomeScreen, LoginScreen, CreateUserScreen etc. is open. I create it for you of course :)

This is just a text logo. We put this into some Surface and other Text composable for better look. Something like that;

Ok, now we have complete basic logo with beautiful circle border background with it. We need an animation for the user entertainment. Some companies choose animations in their splash screens some don’t. It’s completely their own choice. There is no rule about this. Our basic animation should like this in my opinion. Remember you can always change animation by your own.

After all this coding our SplashScreen should look like this.

Here you are. You did another great job so far :) But our work is not done yet. You see some error on our Splash Screen. Because there is no HomeScreen and there is no enum variable in Screens class as HomeScreen. Create those as you did before. Here you go. Run the app.

Thank you for your interest and I hope it helped.

For detailed information check those documentations;

https://developer.android.com/jetpack/compose/navigation

https://developer.android.com/develop/ui/views/launch/splash-screen

Project Link: https://github.com/TamerSarioglu/NavigationwithEnumClass

See you soon :)

--

--