How to add Splash Screen to your Android app using Kotlin

How to add Splash Screen to your Android app using Kotlin

What is Splash Screen

Splash screen is a screen that appears before the main app, the purpose of this screen is to give time to the app to load without making the user stuck in a black screen waiting without any response.

Do I need to have Splash Screen on my app?

If your app is simple and it’s not that big that needs time to load then, no, you don’t need to have a Splash Screen. But my opinion is that when an app has a Splash Screen, even it doesn’t need it, it looks more professional than an app that hasn’t.

Create SplashScreen.kt class

First, create a Kotlin class with the name ‘SplashScreen’

Create a class

Create Splash Screen’s layout

Now let’s create our layout by going to the res folder and right-click on the layout folder and go New>Layout resource file. Give it the name splash_screen, save it and paste the following code inside:

In our example, we have a background layout with a color and an ImageView on the center of the screen with a size 150dp x 150dp.

Splash screen’s layout

Set Splash screen as the first screen of our app

Now we need to make our Splash screen be the first screen when our app starts. To do that, we need to go to the AndroidManifest.xml file of our project and change the MainActivity to SplashScreen like that:

As you can see, after we replaced MainActivity with SplashScreen (lines 13-23), we added our MainAcivity as a normal activity (lines 25-28)

You also may have noticed, the Splash screen’s activity uses a theme called Theme.Transparent that we don’t have yet. Let’s go and add it!

Add Splash screen’s theme

Go to your styles.xml file and paste the following code inside your <resources>...</resources> tag like this:

This will make our splash screen to be in full screen without the status bar.

Last step!

At the final step, we have to add the timer for our Splash Screen. After the timer goes off, will open the MainActivity. Let’s go and add the following code to our SplashScreen.kt file:

In our example Splash screen will finish after 2000 milliseconds (2 sec), this is a good amount of time for a Splash screen. During this time you can initialize deep linking, app shortcuts e.t.c

ATTENTION: If your app uses backend, do not initialize the backend here. If the app running in the background for a long time and the user opens it again, it may crash. It’s safer to add it in the Application() (or MultiDexApplication()) file.

And that’s it! Done!

You can find the final project here

If you have any questions feel free to DM me on Twitter @johncodeos or leave a comment below!

Leave a Reply

avatar
  Subscribe  
Notify of

Stay Connected

Newsletter

Subcribe for weekly emails! Get my posts of the week right in your inbox!