• Exploring Android 12: Splash Screen
  • By Joe Birch
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: Kimhooo
  • Proofreader: Samyu2000,PassionPenguin

Explore the ANDROID 12: Splash screen

With the release of Android 12 beta, we can now get a look at the new features offered by the latest version of Android. Among the new features, I noticed the introduction of the Splash Screen API in this release — which not only provides a standardized way for applications to present a Splash Screen, but also improves the user experience when launching applications. I’m in the process of launching the Compose Academy app and making sure everything works in the Android 12 API — so this is a great opportunity to learn about the API surrounding the splash screen.

You might think you’ve seen a lot of great app splash screens! However, there are still many times when you need to create your own splash screen class. Such a splash screen should only be used to display the brand of the product, or to handle slightly more complex functions, such as performing application initialization and fetching data before the user enters the application. There are also cases to consider where the application doesn’t even have some form of splash screen — the user may start the application either cold or hot, so the user experience is less smooth. As an example, let’s see what the application looks like when you launch if you don’t set some kind of splash screen:

Personally, the user experience is not so good! As I waited for the app to launch, the screen was blank, without any brand images — not the best experience to bring users into our app.

Many applications use the Android :windowBackground property in a theme to set what is displayed in this white space when the program is opened. However, this is not an officially sanctioned practice, but a measure taken to avoid showing a blank screen.

Now, while this doesn’t make a smooth transition to our application, it definitely looks better than before! The only thing to note here is that since this is just applying some themes to the background of the window, the startup time will remain the same — so if we’re doing some sort of application setup, we’ll still need to add some other changes to support these requirements.

In the Android API 26, we see the Android: the introduction of windowSplashScreenContent attribute. This property can be used to set something to a splash screen. While still not enough to handle the application initialization that might be required during this time, it certainly provides a smoother display of the splash screen and entry to the application.

Now on Android 12, we have a new splash screen API. Without using any of the further customizations provided by these apis, we can see that, except this time out of the box, the user experience remains similar to that of using the new properties in API 26:

While this doesn’t look very different from the properties we saw in API 26, in Android 12 we have access to more properties and also allow for deep customization of the splash screen. These properties allow us to customize the splash screen in a way that was not possible with earlier versions.

In the next section, we’ll look at how you can use these properties to customize the splash screen of your application.

Display splash screen

While in previous VERSIONS of the API we needed to provide some form of resource as a theme property for our window content or splash screen content, in Android 12 we no longer need to do that. Therefore, it is important to understand this API. By default, your initiator Activity will display this new splash screen — so if you’re currently displaying a custom splash screen in your application, you’ll need to accommodate these changes in Android 12.

Although the splash screen API provides a set of properties that you can use to fine-tune the splash screen appearance, if you don’t set values for these properties, default values and resources in your application will be used. For example, here is the default splash screen when I launch my app on a device running Android 12:

When it comes to the display of the splash screen, we can see something happening — the application icon appears at the top of the background color. In my application, I used an adaptive icon, and it looks as if the splash screen directly uses the XML reference to the adaptive icon to display the corresponding icon on the screen. I know this because when I change the background layer color of the launch icon, this is reflected in my splash screen.

Setting the background color

As we saw above, the splash screen will use the default background color *. In some cases, we may want to override it — perhaps to match the brand color, or when the app icon is displayed above the default background color, the overall picture is ugly and needs to be avoided. In either case, you can use windowSplashScreenBackground attribute to override the default color.

<item name="android:windowSplashScreenBackground"># 000000</item>
Copy the code

I’m not entirely sure what color I used for this background color yet, I’ll update this post once I do!

Setting the launch icon

In some cases, you may not want to use the application icon for the icon displayed on the initial screen. If you want to display content as an alternative to this content, you can use the android: windowSplashScreenAnimedIcon attributes to perform the operation. I find the name a bit misleading, because the icon can actually be a reference to one of two things:

  • Static vectors draw reference – used to display static resources instead of default application ICONS

  • Animation vectors are drawable – used to display animated graphics instead of default application ICONS

This enables you to replace the default icon (your application icon) displayed in the initial screen with the relevant resource. If you are using animation resources, you need to ensure that the duration of the splash screen does not exceed 1000 milliseconds. While the approach here depends on the type of animation you’re using, there are some general considerations to keep in mind:

  • If you are using an animation that has only one action from start to finish, you should make sure that the animation lasts no more than 1,000 milliseconds.

  • If you use an infinite loop animation, make sure the animation doesn’t break once the time limit of 1,000 milliseconds is reached. For example, an infinitely rotating item doesn’t “behave badly” when cut off in a time limit, but cutting off the distortion between two shapes might make the transition between the splash screen and your application feel less smooth.

Once we have the asset we want to use for the initial screen icon, we can apply it:

<item name="android:windowSplashScreenAnimatedIcon">@drawable/ic_launcher_foreground</item>
Copy the code

As shown above, our icon asset will be displayed in the center of the splash screen. Using it completely removes any default properties and styles from what was previously displayed in our splash screen.

Set the icon background color

As we saw above, providing a custom icon allows us to change the default icon displayed on the initial screen. However, as we can see above, this may not always produce the best results. The icon I used there had no background layer, so it was a little tricky to see the icon on the background color used for the initial screen. While we can customize the background color of the splash screen, we may not want or be able to change this setting here. In these cases, we can use the android: windowSplashScreenIconBackgroundColor attributes to provide for the icon background color.

<item name="android:windowSplashScreenIconBackgroundColor">@color/black</item>
Copy the code

After applying this option, we will see a shape background applied to our icon, using the color we defined in the properties above. This is hard to test, but for my device, it matches the shape of the app icon I set in the system Settings. Right now, this is not something you can cover for the initial screen. If you need to customize here, the best approach is to create a drawable object that already has the background layer as part of the asset.

Set brand image

The brand image is an optional source of static images that can be displayed at the bottom of the splash screen. It will be displayed at the same time as the splash screen is on the screen.

<item name="android:windowSplashScreenBrandingImage">@drawable/logo_text</item>
Copy the code

Although the design guide states that the use of brand images in the splash screen is not recommended, it is provided if you need to show this visual component. Personally, I think this adds a nice touch to the splash screen, but in fact in most cases the splash screen won’t be on for long enough for the user to receive everything on the screen. If you have not done any customization to override the exit time of the splash screen, the splash screen will appear for about 1 second. When the splash screen launches, users are naturally drawn to the icon displayed in the center of the screen — any extra content on the screen can be overwhelming and, in most cases, may not be visible. Having said that, it’s important to consider whether your application really needs to leverage this brand equity in its splash screen.

Customize splash screen time

By default, the splash screen will appear for about 1,000 milliseconds — until the first frame of our application is drawn. However, many applications use their splash screen to initialize default application data or perform asynchronous tasks to configure the application. In these cases, we can prevent the first frame of the application from being drawn so that our splash screen remains in the view. We can do this by using the ViewTreeObserver OnPreDrawListener — returning false before we are ready to go through the splash screen. Returning false here will stop us.

val content: View = findViewById(android.R.id.content)
content.viewTreeObserver.addOnPreDrawListener(
    object : ViewTreeObserver.OnPreDrawListener {
        override fun onPreDraw(a): Boolean {
            return if (isAppReady) {
                content.viewTreeObserver.removeOnPreDrawListener(this)
                true
            } else {
                false}}})Copy the code

Access the splash screen

The Activity class has a new getSplashScreen function that you can use to access the Activity’s initial screen. As mentioned earlier, the splash screen will only be displayed for your application’s initiator activity — so accessing it elsewhere will have no impact.

You can see the full example in the official documentation, but for now splashScreen only provides programming access to the existing animations used to apply the listener to the initial screen. This means that you can listen for when the splash screen animates the content of your application, allowing you to customize this transition.

splashScreen.setOnExitAnimationListener { splashScreenView ->
    ...          
}
Copy the code

conclusion

With an understanding of the splash screen API, I’m now fully assured that the Compose Academy application works correctly. In most cases, you probably don’t need to do much to get your application started right out of the box.

In the future, it’s likely that more applications will be able to customize the splash screen — having these apis now means there’s a platform to open things up to developers. However, it’s impossible to create a universal implementation, and I think Google still wants to enforce some kind of standard for splash screens (rather than letting developers have a free hand). Anyway, I’m excited to see how developers apply these new apis 😃

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.