How to add Splash Screen in Android using Kotlin

Last updated on: June 13, 2022

What is Splash Screen

The splash screen is a screen that appears before the main app. The purpose of this screen is to give time for the app to load without making the user stuck on a black screen waiting without any response.

Do I need to have a Splash Screen on my app?

If your app is simple and it’s not that big that needs time to load then 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.

Creating the SplashScreen.kt class

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

Creating the 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:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        android:id="@+id/splash_bg"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        android:gravity="center">


    <ImageView
            android:id="@+id/splash_logo"
            android:layout_width="150dp"
            android:layout_height="150dp"/>

</LinearLayout>Code language: HTML, XML (xml)

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

Setting the 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:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.johncodeos.splashscreenexample">

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">

        <activity
                android:name=".SplashScreen"
                android:label="@string/app_name"
                android:theme="@style/Theme.Transparent">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name=".MainActivity"
                  android:label="@string/app_name"
                  android:theme="@style/AppTheme">
        </activity>
    </application>

</manifest>Code language: HTML, XML (xml)

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, that the Splash screen’s activity uses a theme called Theme.Transparent that we don’t have yet. Let’s go and add it!

Adding the Splash screen’s theme

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

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="Theme.Transparent" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowBackground">@android:color/black</item>
    </style>

</resources>Code language: HTML, XML (xml)

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

Adding Timer for the Splash Screen

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

class SplashScreen : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.splash_screen)

        findViewById<ImageView>(R.id.splash_logo).setImageResource(R.drawable.splash_screen_logo)

        val homeIntent = Intent(this@SplashScreen, MainActivity::class.java)
        Handler(Looper.getMainLooper()).postDelayed({
            //Do some stuff here, like implement deep linking
            startActivity(homeIntent)
            finish()
        }, SPLASH_TIME_OUT.toLong())
    }

    companion object {
             const val SPLASH_TIME_OUT = 2000
    }

}Code language: Kotlin (kotlin)

In our example, the 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

Note: If your app uses backend, do not initialize the backend here. If the app is 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.

You can find the final project here

If you have any questions, please feel free to leave a comment below