Your First Kotlin Android App: Polishing the App

It’s time to add a custom splash screen for Bullseye. A splash screen is a screen that is displayed before the app is fully loaded. This will make your app’s launch appear to be faster.

A splash screen is also known as a launch screen.

And it contains 4 parts:

• the app icon which can be animated
• the icon’s background which is optional,
• the masked out portion of the app icon, and
• the window background

Android 12 introduced a new SplashScreen implementation that has an animation sequence.

This includes:

• some smooth animation into the app when launched.
• Then the splash screen that shows your app icon is displayed for some time.
• Finally, the splash screen transitions into the app.

Prior to Android 12, a blank screen will be shown when the app is loading and you had to manually setup a splash screen. But Android 12 adds a splash screen using the new SplashScreen API as the default behaviour.

But we want our splash screen to work on older Android devices too.

For this, we’ll be using the core-splashscreen library that wraps the new SplashScreen implementation we just talked about. With this library, the new SplashScreen animation sequence and features will be able to work on older Android devices. We will be adding this library as a dependency in our project.

Let’s do that now.

Before you add the splash screen dependency, let’s see the current splash screen. I believe you noticed the splash screen display after we change the app icon from the previous episode.

Just run your app to see the splash screen.

You can see it shows up quickly with the icon we just added before the main screen is loaded and this is because I’m running on Android 13. If you’re running on Android 12, you’ll have to terminate your app and run it from the launcher because the splash screen wont be displayed.

Do note that running the app from the system launcher is not the same as running it from Android Studio. So you’ll always have to force close your app before testing out the steps in this episode if you’re on an device or emulator running Android 12 or earlier. And remember, you’ll only see this default splash screen on devices running Android 12 and up.

Alright, for older Android versions, first terminate your app. Then open it up from the launcher. And you can also see the default splash screen. If your target audience is users of Android 12 and up then you don’t need to do anything further. But you’ll customize this now and make the new splash screen implementation work on older devices. Let’s add the dependency now.

Open up the app module build.gradle file. The position doesn’t really matter but you’ll add in the core-splashscreen library below the navigation dependency for consistency.

Paste in the following code:

implementation 'androidx.core:core-splashscreen:1.0.1'

Then go ahead and click on the “Sync Now” link.

Let’s use the new splash screen feature in our app. Open up the themes.xml file. You need to create a new theme for the splash screen.

Enter the following code below the base application theme:

<!--    Splash Screen Theme-->
<style name="Theme.CustomSplashScreenTheme" parent="Theme.SplashScreen">

</style>

In here, you create a new theme that extends a parent theme called Theme.SplashScreen. The parent theme is provided by the core-splashscreen dependency we added and it contains some styling for the splash screen. For instance, it makes the splash screen full screen.

Next, paste in the following items inside the theme:

  <item name="windowSplashScreenBackground">@color/white</item>
  <item name="windowSplashScreenAnimatedIcon">@drawable/splash_icon</item>
  <item name="postSplashScreenTheme">@style/Theme.Bullseye</item>

Pretty straightforward from the item names but let’s break it down. First, we set the background color of the splash screen to white. Then we set the icon to the splash_icon inside the drawables folder. Finally, we set the theme that would be used after the splash screen window is closed. In this case, we set it back to the Bullseye theme which the main theme for our app.

You can see that the splash icon drawable is displayed in red. This is because the drawable does not exist in the project. Do note that the splash_icon has been added to the resources folder in the download materials. But mine is on my desktop as always.

Alright, open up the Resource Manager window. Then select “Import Drawables.” I’ll locate the file on my desktop. Then select the splash_icon image. Click “Open.” For the qualifier type, select density just like before. Leave it as medium density, then click on “Next.” Finally, tap the “Import” button to finish up the process. Close up the resource manager window. And the error is gone inside the themes.xml file.

That’s all for the splash screen theme. Let’s set it up in the Android Manifest file. Open it up.

Change the application theme to use the custom splash screen theme like so:

android:theme="@style/Theme.CustomSplashScreenTheme"

Finally head over to the MainActivity.kt file.

Then add the following function call as the first line of the onCreate method:

installSplashScreen()

This function is responsible for setting the theme to the postSplashScreenTheme which would be the full screen Bullseye theme that the main activity uses.

Run your app.

Cool!!! The splash screen is displayed as expected. You can also close it. And head over to the launcher and open up the app.

You can see that the splash screen is displayed for some time before the main activity loads up. And it would work on older Android versions as well.