Android released official support to show the splash screen.
This new splash screen support is added in Android 12, but the same can be used in earlier versions of Android using the splash screen support library.
To demo various aspects of the splash screen API, I’ve created a sample app with Jetpack Compose (final splash screen preview).
Let’s begin!
Step 1
Let us start by adding the splash screen dependency.
implementation 'androidx.core:core-splashscreen:1.0.1'
Step 2
The next steps would be to create a splash screen icon and an optional brand image.
We will discuss later on how to create the splash screen icon and make it appear center on the screen—in the Extras section at the bottom of the screen.
Step 3
Once we have the image asset ready, we can apply the same using the splash screen theme.
<style name="Theme.Splash.Starting" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">
@color/splash_screen_background
</item>
<item name="windowSplashScreenAnimatedIcon">
@drawable/ic_splash_icon
</item>
<item name="windowSplashScreenAnimationDuration">
@integer/splash_screen_animation_duration
</item>
<item name="postSplashScreenTheme">
@style/Theme.App.NoActionBar
</item>
<!--Android 12 specific styles (put this in values-v31) -->
<item name="android:windowSplashScreenBrandingImage">
@drawable/ic_brand_icon
</item>
<!--Android 12 specific styles (put this in values-v31) -->
</style>
Anatomy of splash screen
Let’s take a look at the style attributes.
windowSplashScreenBackground — As you have probably guessed, it’s the background colour that will occupy the whole screen.
windowSplashScreenAnimatedIcon — This can either be a normal vector icon or an animated vector icon. Note: An animated vector icon will only show animation on Android 12+ devices, older API devices will simply show the static icon without any animation.
windowSplashScreenAnimationDuration — The duration of the animated icon. The recommended duration is 1,000 milliseconds.
postSplashScreenTheme — This theme is used once the app is loaded. It’s required because we will set the launcher activity theme as Theme.SplashScreen in the app manifest — which works great for showing a splash screen, an animated logo, and a brand icon. However, once the app is loaded, we would get an exception if we didn’t use Theme.AppCompat or Theme.MaterialComponents . Hence, this attribute comes to the rescue.
windowSplashScreenBrandingImage — Brand image to show bottom of the screen (only available from Android 12).
Step 4
Now set the launcher activity theme as Theme.Splash.Starting
<activity
android:name=".MainActivity"
android:exported="true"
android:label="@string/app_name"
android:theme="@style/Theme.Splash.Starting">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Step 5
And finally, inside MainActivity onCreate method add installSplashScreen()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
installSplashScreen()
setContent {
AndroidSplashScreenTheme {
Greeting("Android splash screen demo")
}
}
}
Other features
Now that we have completed setting up our new Android splash screen, we can take a look at the other features that come with it.
Control splash screen visibility.
The splash screen API provides support to keep the splash screen visible as long as we want it.
Let’s say we need to fetch some resources that are crucial to rendering our screen, and without those resources, there is no use showing the UI. In this case, we can defer showing our application’s UI until our resources are fetched and ready.
installSplashScreen().setKeepVisibleCondition {
mainViewModel.isScreenLoading.value
}
setKeepVisibleCondition
This method takes a callback which returns a boolean to tell whether to keep the screen on or not. True value indicates the splash screen should remain as is, and False would indicate dismissal of the splash screen.
SplashScreen API will regularly call this callback to check whether to keep the splash screen or dismiss it.
Animate screen content when the splash screen is dismissing
installSplashScreen()
.setOnExitAnimationListener { splashScreenViewProvider ->
// Animation code
}
Extras
Let us discuss how to create the splash screen image.
As we can see in the splash screen icon, section 1 is masked by section 3
If we apply our icon as is, it will zoom out and stretch out.
So how do we fix this? We need to create an icon that caters to this masked padding.
Let’s say we have a splash screen icon of 54x54, then we would be creating a wrapper layer with a size of 108x108 (double the actual icon) and placing our icon content in the centre of it.
Example
<?xml version="1.0" encoding="utf-8"?>
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:name="vector"
android:width="108dp"
android:height="108dp"
android:viewportWidth="108"
android:viewportHeight="108">
<!--Optional background spanning full 108x108 dp-->
<path
android:name="background"
android:pathData="M 0 0 L 108 0 L 108 108 L 0 108 Z"
android:fillColor="@color/splash_icon_background"
android:strokeWidth="1"/>
<!--Splash screen icon placed in the centre of the screen-->
<group
android:name="group_icon"
android:pivotX="54"
android:pivotY="54">
<path
android:name="path_pi"
android:pathData="M 30 44.591 L......."
android:fillColor="@color/splash_icon_color"
android:strokeWidth="1"/>
</group>
</vector>
That’s it, folks. Thanks for reading.
Top comments (0)