Splash Screen API in Android
Tags: android, jetpack
Published: 2021-11-19 19:06:44

💡 In this article, we will explore and learn how to build a splash screen with SplashScreen API, which was introduced in Android 12.

## What is a Splash Screen?

A Splash Screen is the first view that is shown to a user as soon as you tap on the app icon. It can be used while loading data or for branding market purpose. If you notice a blank white screen (for a short moment) after tapping on an app, it means it doesn't have a splash screen.

## Overview

- Android 12 added the SplashScreen API.
- Enables a new app launch animation for all apps when running on a device with Android 12+.
- Smooth and fluid app start transition.
- Backward compatible with Androidx SplashScreen compat library.

![Gmail Splash Screen example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsdmisr92f5v1pr1rtk5.gif)

## Elements and mechanics of the animation

![Elements of the Splash Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puuqtv3t7gdushh02fow.png)

- The app icon (1) should be a vector drawable (static or animated).
- The icon background (2), which is optional.
- As with adaptive icons, one-third of the foreground is masked (3).
- The window background (4) consists of a single opaque color.
- The enter animation isn't customizable.
- The exit animation can be customized.

## Before implementing on Android ≤ 11

![Before implementing on Android 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iit89z6uays5ecdxzpqc.gif)

## Before implementing on Android 12

![Before implementing on Android 12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sukywlews32v0q9a71p2.gif)

## Implementing

Let's see the steps to implement the Splash Screen in our Android app.

### Setup

```gradle
android {
   compileSdkVersion 31
   ...
}
dependencies {
   ...

   // Splash Screen
   implementation 'androidx.core:core-splashscreen:1.0.0-alpha02'
}
```

Add the Splash Screen compat library, so it will work for Android version ≤ 11.

### Style

```xml
<style name="Theme.App.Starting" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/...</item>
    <item name="windowSplashScreenAnimatedIcon">@drawable/...</item>
    <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>
    <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
    <item name="postSplashScreenTheme">@style/Theme.App</item>
</style>
```

- `windowSplashScreenBackground` will change the background color.
- `windowSplashScreenAnimatedIcon` is the vector icon, which might be animated.
- `android:windowSplashScreenIconBackgroundColor` is the background color of the icon. It's using the `android:` from SDK 31 (Android 12) because it only works for Android 12 right now, let's keep an eye to see if the stable library will make it work for Android ≤ 11.
- `android:windowSplashScreenBrandingImage` is the branding image. The same as previous, only works for Android 12.
- `postSplashScreenTheme` is the theme of the app after the Splash Screen goes out.


### Manifest

Add the theme for your `application` or `activity` tag.

```xml
<application
    android:theme="@style/Theme.App.Starting"
    ...
```

### MainActivity

```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val splashScreen = installSplashScreen() // Before setContentView
    setContentView(R.layout.activity_main)
}
```
If we don't `installSplashScreen` we'll get an Exception:
```
java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
```
### Animation

It's possible to handle the exit animation for the Splash Screen, in the example below the Splash Screen moves down.

```kotlin
splashScreen.setOnExitAnimationListener { splashScreenProvider ->
    val splashScreenView = splashScreenProvider.view
    ObjectAnimator.ofFloat(
        splashScreenView,
        View.TRANSLATION_Y,
        0f,
        splashScreenView.height.toFloat()
    ).apply {
        interpolator = BounceInterpolator()
        duration = 1000L
        doOnEnd { splashScreenProvider.remove() }
        start()
    }
}
```
Keep in mind that when adding some custom exit animation we **must** manually remove the splash screen.

### Longer period

It's possible to keep the Splash Screen while the app is fetching some initial data. For this purpose, use the `setKeepVisibleCondition` from `splashScreen`. Just return `true` to `isReady` when you would like to dismiss the Splash Screen.

```kotlin
var isReady = false

// Simulate some request
lifecycleScope.launchWhenCreated {
    delay(10000L)
    isReady = true
}

splashScreen.setKeepVisibleCondition { !isReady }
```

## Result

## After implementing on Android ≤ 11

![After implementing Splash Screen for Android 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7z9o06e0uqbd9zlsnbm.gif)

## After implementing on Android 12

![After implementing Splash Screen for Android 12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/um3v8xfxlix9ienewvpp.gif)

---

That's pretty much it to support Splash Screen in your app, will you give it a try?