Your First Kotlin Android App: Polishing the App

Transcript: 22. Add a Custom Splash Screen

You’ve setup up our app icons and looked at how to change the display name if there’s a need to. It’s time to add a custom splash screen.

A splash screen is a screen that is displayed before the main activity is 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.

But there’s a problem: “We want our splash screen to work on older Android devices too.”

For this, we’ll be using a 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.

Now you might be asking yourself what a dependency is, right?

Well, Android cannot include everything that every developer wants.

So it allows other developers to add functionalites that are not bundled into the core of android. These functionalities are packaged into something called a library and added to the android project as dependencies.

We already talked about dependecies in the last course when we enabled viewBinding in the build.gradle file.

The whole idea behind dependency is to make your apps use pluggable libraries that you can add or remove depending on if you need them.

You want to use Google Maps? Then you add the google maps dependency. You want to use Stripe payments? Then you add the stripe payment dependency. Even ConstraintLayout we have been using in this learning path is also a dependency added into our project.

Okay, now you understand the concept of dependencies in Android, it’s time to add the core-splash screen library. Let’s do that now.

Before you add the splashscreen dependency let’s see the current splash screen. Make sure your app is not running because the splashscreen wont be displayed.

Then go ahead and open up your app from the launcher. You can see a default splash screen with an icon. You’ll customize this now and make the new splashscreen implementation work on older devices. Let’s add the dependency now.

You add dependencies to your android app in the build.gradle file. Open up the Gradle Scripts header in the project view of the window toolbar. You have two build.gradle files: one for the project and the other for the app module. Open up the one for the app module which is the second one in the list of files.

If you remember, this is the file where we enabled viewBinding in the first course of this learning path.

Now scroll down to the end of the file. You can see the dependencies group at the end. And inside it you have different dependencies that your app depends on. For example, the constraintlayout dependency which lets us use constraintlayout in our app.

Okay, to add in the core-splashscreen library, paste in the following code at the end of the list:

implementation 'androidx.core:core-splashscreen:1.0.0-beta02'

Now if you look at the top of the window, you’ll see a link telling you to sync this file. You always need to sync the gradle script with the application whenever you make changes to this file. This is important because syncing downloads the dependencies and registers them in the app.

Alright, go ahead and click on the “Sync Now” link. And if you look at the status bar below, you can see this action downloads the dependency, configures and then builds the project. Cool!!! 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-splash dependency we added and it contains some styling for the splash screen. For instance, it makes the splash screen fullscreen.

Next, add the following items in the theme:

...
  <item name="windowSplashScreenBackground">@color/white</item>
  <item name="windowSplashScreenAnimatedIcon">@drawable/splash_icon</item>
  <item name="postSplashScreenTheme">@style/Theme.Bullseye.NoActionBar.FullScreen</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 fullscreen theme which the main activity uses.

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. I’ll show you another way to add a drawable.

I’ll head over to my desktop.

Then copy the splash_icon image. Head back to Android Studio. Then paste it inside drawables folder. Choose the mdpi folder as the directory to store this file. Then click the OK button. Click OK once again on the next screen to use the default file name. 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"

Then also set the about activity to use the base application theme:

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

You do this because you want to make sure the about actvitiy has an action and status bar.

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 fullscreen theme that the main activity uses.

Run your app.

Then close it. And head over to the launcher and open up the app. Voila!!! you can see the splash screen is displayed for some time before the main activity loads up. And it would work on older Android versions.