preface

Because many applications need some initialization transactions during startup, there is a certain blank delay when starting the application. Before, our general practice was to improve the startup experience by replacing the custom theme of Android: windowsbackground to display a default picture in time when the application starts.

In Android 12, the official added SplashScreen API , which enables a new application launch interface for all applications. The new startup interface is displayed instantaneously, so there is no need to customize Android: Windows background. The default style of the new launch page is to display the application icon in the middle, but it allows us to customize it so that the application can maintain its unique brand. Let's see how to use it.

Start screen implementation

In fact, SplashScreen has been used by default on Android 12. If there is no configuration, the App icon will be used automatically.

Of course, it is also allowed to customize the startup screen, the style in value-v31 XML can be configured in the main Theme of the App through the following properties:

<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:windowSplashScreenBackground">@android:color/white</item>
    <item name="android:windowSplashScreenAnimatedIcon">@drawable/anim_ai_loading</item>
    <item name="android:windowSplashScreenAnimationDuration">1000</item>
    <item name="android:windowSplashScreenBrandingImage">@mipmap/brand</item>
</style>

• Windowssplashscreenbackground sets the background color of the startup screen

• Windowssplashscreenanimatedicon startup icon. It is the picture displayed in the middle of the startup interface, or it can be animation

• Windowssplashscreenanimationduration sets the length of the animation. Note that the maximum time here can only be 1000ms. If the animation time is longer, the startup screen needs to be displayed on the screen for a longer time by means of code (which will be discussed below)

• Windowssplashscreenicon background sets the background color of the startup icon

• Windowssplashscreenbrandingimage sets the picture to display at the bottom of the startup screen. Official design guidelines recommend not using brand images.

Run the startup application to see the new startup screen, as follows:

Elements of animation

On Android 12, the picture displayed in the middle of the startup interface will have a circular mask, so you must pay attention to when designing the picture or animation. For example, in my example above, the animation is not completely displayed. In this regard, the official gave detailed design guidance as follows:

• The application icon (1) should be a vector paintable object, which can be static or animated. Although the duration of animation can be unlimited, we recommend that it not exceed 1000 milliseconds. By default, the launcher icon is used.
• The icon background (2) is optional and is useful when a higher contrast is required between the icon and the window background. If you use one Adaptive Icon , when the contrast between the icon and the window background is high enough, its background will be displayed.
• Like the adaptive icon, the foreground is obscured (3).
• The window background (4) consists of an opaque monochrome. If the window background is set to solid color, the background is used by default when the corresponding properties are not set.

Startup duration

By default, when the application draws the first frame, the startup screen will close immediately. However, in our actual use, some initialization operations are generally performed during startup. In addition, most applications will request to start advertising, which actually takes some time. Usually, these time-consuming operations are processed asynchronously. Can we make the startup screen close after these initialization are completed?

We can use viewtreeobserver Onpredrawlistener lets the app pause drawing the first frame until everything is ready, which will make the startup screen stay longer, as follows:

...
var isReady = false
...

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main_activity)
    ...
    
    val content: View = findViewById(android.R.id.content)
    content.viewTreeObserver.addOnPreDrawListener(
        object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                return if (isReady) {
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    false
                }
            }
        }
    )
}

In this way, when time-consuming operations such as initialization are completed, set isReady to true to close the startup screen and enter the application.

As mentioned above, the maximum time for configuring the startup animation can only be 1000ms, but the above code can make the startup screen stay longer, so the animation display time will be longer.

Close animation

When the startup screen is closed, it disappears directly by default. Of course, we can also customize it.

In the Activity, you can get it through getSplashScreen (pay attention to judge the version. If this function is not available in the lower version, it will crash), and then define the closing animation through its setOnExitAnimationListener, as follows:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
    splashScreen.setOnExitAnimationListener { splashScreenView ->
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L
        //Here, doOnEnd needs Android KTX library, that is, Android X core:core-ktx:1.7.0
        slideUp.doOnEnd { splashScreenView.remove() }
        slideUp.start()
    }
}

After adding the above code, the startup screen that originally disappeared directly becomes an upward exit.

Here, you can get the duration and start time of starting animation through splashScreenView, as follows:

val animationDuration = splashScreenView.iconAnimationDurationMillis
val animationStart = splashScreenView.getIconAnimationStartMillis

This calculates the remaining time to start the animation.

By the way, make complaints about the official website. The code is wrong here, and the start time is also obtained by using iconAnimationDurationMillis. Actually, it should be getIconAnimationStartMillis.

Lower versions use SplashScreen

You can only experience the official startup animation on Android 12. Obviously, you can't! The official Androidx SplashScreen compat library is provided, which is backward compatible and can display the startup screen with the same appearance and style on all Android versions (I reserve my opinion on this).

First, upgrade compileSdkVersion and rely on the SplashScreen library, as follows:

android {
   compileSdkVersion 31
   ...
}
dependencies {
   ...
   implementation 'androidx.core:core-splashscreen:1.0.0-alpha01'
}

Then in style The XML addition code is as follows:

<style name="Theme.App.Starting" parent="Theme.SplashScreen">
    // Set the splash screen background, animated icon, and animation duration.
    <item name="windowSplashScreenBackground">@android:color/white</item>

    // Use windowSplashScreenAnimatedIcon to add either a drawable or an
    // animated drawable. One of these is required.
    <item name="windowSplashScreenAnimatedIcon">@drawable/anim_ai_loading</item>
    <item name="windowSplashScreenAnimationDuration">1000</item>  # Required for
    # animated icons

    // Set the theme of the Activity that directly follows your splash screen.
    <item name="postSplashScreenTheme">@style/AppTheme</item>  # Required.
</style>

We have introduced the first three above. Here we have added a new postSplashScreenTheme, which should be set as the original theme of the application. In this way, this theme will be set to the Activity after the startup screen, so that the style can be kept unchanged.

Note that there are no windows splash screen icon background and windows splash screen branding image mentioned above, which is one of the differences from Android 12.

Then we can set this style to Application or Activity:

<manifest>
   <application android:theme="@style/Theme.App.Starting">
    <!-- or -->
        <activity android:theme="@style/Theme.App.Starting">
...

Finally, you need to call installSplashScreen in the startup activity before calling setContentView, as follows

class MainActivity : ComponentActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       val splashScreen = installSplashScreen()
       setContentView(R.layout.activity_main)
...

Then start the application on the lower version system and you can see the startup screen.

The step of installSplashScreen is very important. Without this line of code, postSplashScreenTheme cannot take effect. In this way, the Activity cannot use the previous style after the startup screen, which will cause serious Crash. For example, if there is an AppCompat component in the Activity, you need to use the AppCompat style, otherwise it will Crash.

Finally, note that there is still a circular mask on Android 12, so you need to follow the official design guidelines; However, this mask is not found in the lower version system, and the animation is invalid in the lower version. Only the first frame will be displayed, so I have unanimous reservations about the official style.

Existing splash screen migration

At present, most of the apps on the market have implemented their own startup pages. If you directly add SplashScreen, it will cause duplication, so we need to deal with the original startup pages. The specific processing should also be determined according to the implementation logic of each App's own startup page. Here, the official gives some opinions, which you can refer to: Migrate the existing splash screen implementation to Android 12 and later

summary

The official SplashScreen is a little late, but the effect is still good and it is very simple to use, but we must pay attention to the version. Although the Androidx SplashScreen compat library is backward compatible, it is still different from Android 12.

Pay attention to the official account number: BennuCTech, get more dry cargo!