Why is there a black and white screen

After clicking on the app icon on the desktop, it takes time to create the app process, initialize resources, and start the home page Activity (the home page in this case refers to the start page marked in the AndroidManifest) without the app process being created. This means that clicking on the icon does not immediately show the start page. In order to prevent users from feeling stuck, Google has Preview Window, which initializes a Window when the launch page is not drawn. The Preview Window is usually seen as a black or white screen.

How do you know if it’s black or white?

The black and white screen is a pre-loaded window whose properties can be changed in the Theme. Android: Theme =”@style/AppTheme”. This is the default theme. Look at the AppTheme, find the name=” Android :windowBackground” property, look under the property, to see if the screen is black or white, this property is the background to set the preview window. Black screen or white screen, the user experience is not good, so the solution is to make the background transparent or use an image as the boot background. These are very basic solutions, and they have some drawbacks, so if we want to make the user experience better, we need to make them more elegant.

How to solve the black and white screen gracefully

To solve the black and white screen, need to be combined with the launch page. At present, most apps have splash screen pages. Some are for loading advertisements, and some are for initializing some resources of the APP through splash screen pages. This article discusses the launch page with splash screen, taking netease Cloud Music’s processing of pre-loading Windows and splash screen pages as an example. Take a look at netease Cloud’s preloaded page and startup page.

The first page is preload, the second page is the splash screen, the splash screen only much preload page at the bottom of the page icon and netease cloud music this four word (is a whole, a picture), and the sense that gives a person is has always been preloaded page, but at the bottom of the icon and text will gradually appear, this process than a separate display images or more let a person can accept set to transparent. Let’s look at the code.

Styles file defines a custom Theme

<style name="AppTheme.lanuchTheme" >
      <item name="android:windowBackground">@drawable/launch_layout</item>
      <item name="android:windowFullscreen">true</item>
      <item name="android:windowNoTitle">true</item>
      <item name="android:windowContentOverlay">@null</item>
Copy the code

The launch_layout, top_img in the code, is an image of the “power of music.”

<? xml version="1.0" encoding="utf-8"? > <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/holo_red_dark"/>
  <item android:top="150dp">
      <bitmap android:gravity="top" android:src="@mipmap/top_img" />
  </item>
</layer-list>
Copy the code

The layout file for SplashActivity is

<? xml version="1.0" encoding="utf-8"? > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/bottom_imag"//bottom_imag is the bottom icon and text Android :layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp"
        />
</RelativeLayout>
Copy the code

Finally, in the AndroidManifest, set the lanuchTheme to the splash screen (SplashActivity below) and you’re done.

Note that since the SplashActivity layout does not have a background color, that is, a transparent color, and the only difference between the two pages is an image at the bottom, there is no need to write the content of the preloaded page again in the SplashActivity layout.

conclusion

The solution of black and white screen is to let the user feel that clicking the icon gets a response, the App starts smoothly, this process can give people a visual aesthetic, so much the better. Different application scenarios can have different solutions. It is not necessary to have a splash screen page, and it is not necessary to write an animation or other effects on the splash screen page as netease Cloud Music does. To understand the black-and-white screen, you can do the following homework

  • The principle of netease cloud music solution
  • See why you want to customize the theme and assign it to your Activity separately
  • Understand what Layer_list can do

Figure out these problems, to solve the black and white screen is not what difficult.