preface

I believe those who have done Android know that when an APP starts, the interface will first display a white screen or a black screen, then enter the welcome page, pause for a while and finally enter the APP home page. So what is this black screen or white screen? What is the best solution to it? Today let’s seriously discuss this little problem.

Click to get the demo of this project

Historical reasons

When the system starts an APP, Zygote process will first create a new process to run the APP, but the process takes time to create. Before the process is created, the interface is in a state of suspended animation, which is very embarrassing, because users will think that the APP has not been clicked and click again, which greatly reduces the user experience. Android needs to provide timely feedback to avoid this embarrassment. The system then displays a white or black screen depending on the theme color set in your manifest file. The black (and white) screen is officially called a Preview Window.

Ok, now we understand that The Preview Window is intentionally designed to improve the user experience. So if it’s not ocD, it might not be a problem.

But I guess most of you are obsessive-compulsive patients like me: how could such an ugly black screen appear on my APP?? !!!!!!!!!

So, let’s talk about the solution to this problem.

The solution

Android’s choice to display a black screen or a white screen varies depending on the theme you set. That is, although your code is not executed, your configuration files are read in advance and used to display the Preview Window interface.

So, the entry point for our solution is the manifest file for the entire APP, or more specifically, the theme configuration file.

Plan one: turn the clock back on history

The Preview Window is disabled as follows:

style.xml

<style name="APPTheme" parent="@android:style/Theme.Holo.NoActionBar">
   <item name="android:windowDisablePreview">true</item>
</style>Copy the code

You can disable Preview Window by setting the APPTheme to be the theme of the Activity you start. Similar effects can also be achieved by setting the Preview Window to be fully transparent.

As a result, when you click on the APP, the interface doesn’t respond for a while, and then you enter the APP.

I personally strongly don’t recommend doing this, because all of a sudden you’re knocking back the user experience that Android is trying to improve.

Solution 2: Customize Preview Window

Specific methods are as follows:

style.xlm

<style name="APPTheme" parent="@android:style/Theme.Holo.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_icon</item>
</style>Copy the code

Also set the theme to the theme of the Activity that is launched, and windowBackground is the Preview Window that will be shown. A splash_icon can be a whole image, as many people on the Internet do. It can also be an XML file that can parse image resources. It seems that only layer-list can do this because it can overlay multiple drawables.

splash_icon.xml

<? xml version="1.0" encoding="utf-8"? > <layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"> <item android:drawable="@color/white"/> <item> <bitmap android:gravity="center" android:src="@drawable/qq"/> </item> </layer-list>Copy the code

After this setting, when you click on the APP, it will immediately enter your configuration screen, and then launch the welcome page, which looks like this

So, what’s the difference or disadvantage of setting the Preview Window directly as an image versus as an XML file? I’ll keep you in suspense. First of all, this solution has solved the monotonous and ugly problem of the original Preview Window and further improved the user experience on the basis of the original. However, our apps all have the Huan (Guang) ying (gao) page, and it is inevitable to jump from the Preview window to the Huan (Guang) Ying (gao) page, so the switch between the two interfaces will be very abrupt.

Therefore, obsessive-compulsive, we try to make the switch between the two interfaces into a change of the interface, so as to further improve the display effect, how to make the switch between the two interfaces look like changes in the same interface? The answer: animation.

This is where the difference between images and XML files comes in, as the latter can help us achieve animation more accurately.

Option 3: Customize the Preview Window enhancement

Without further ado, let’s see what happens


The animation implementation above is actually very simple, nothing more than the combination of shrinkage, movement and gradient (I only use it as an example for everyone’s reference), the specific animation code details will not talk about, interested can go to Github to see the demo of this project, we focus on talking about ideas.

One thing to be clear about here is that the Preview window is only a static image, and it does not show the animation itself. The animation here is actually shown after entering the welcome page. When the interface jumps from the Preview Window to the welcome page, the welcome page must first show the same interface as the Preview Window, making it look as if the interface has not been switched. Then slowly switch to the welcome page.

Then, we’ll talk about why the way we set up the XML helps us achieve more accurate animations. It’s because the Preview Window and the welcome page are exactly the same as they appear at the beginning. This is only possible with the XML layout.

Start page well, and make sure the sake, should be ok for delivery, but there’s a small problem need your attention, that is we give the Preview Window to set the background picture if you don’t make processing, images will always exist in memory, so, when we enter to the welcome page, don’t forget to set the background picture is empty:

SplashActivity.java

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        // Set the window background to empty
        getWindow().setBackgroundDrawable(null);
        super.onCreate(savedInstanceState);
    }Copy the code

That’s it for the Android launch page.

Click to get the demo of this project

Afterword.

1. In this article, the principle of the Android startup page is not explained from the Android Framework layer code, but it may be mentioned in the framework layer article later. But I think the framework layer code is probably not what you want to focus on, so I think this article should be appropriate.

2. Recently, I am going to leave the company and want to change my environment. If you have any offer related to Android, please kindly give me an internal promotion. The coordinate is Shenzhen or Guangzhou. Android has been developed for two years, I can do both Android native and React-Native

errata

no

The last

This is the final hd rendering, the file is too big for you to load, so I’ll leave it at the end.