Black and white screen to start APP reason solutions

When we start the APP worked hard to create their own desktop, always see a black screen or white screen phenomenon, which makes the experience of not feeling well, and see why manufacturers of APP does not have this phenomenon? There is a problem we must solve, if not BUG, ​​as the user experience is very important.

1. APP causes of the black / white screen startup

First of all, we need to know when a APP starts, there will be nothing on the screen. In our APP, the display on the screen naturally each View, and we both are called the View setContentView () method, passing in our layout file in the Activity onCreate () method, which is what we theoretically Activity content should see. But the Android system when you start a new Activity, firstly not draw content Activity, let's take a look at the structure of an Activity UI.

We can see that there is an Activity periphery of PhoneWindow in ContentView, DecorView, TitleView, when plotted Activity will first draw of the three View, then ContentView not loaded in, so we could not see anything, system the screen will be filled with the default theme background color, bright line theme filled with white, dark lines filled with black theme, there have been black / white screen phenomenon before the Activity starts.

2. The method to solve the black / white screen

Just said, the system will populate the subject of the default background color of the screen, then the solution to this problem should start from the background screen. The thought of the background, the first reaction is to set the background ContentView in layout, but the system will not be loaded ContentView, then what will be able to adjust the screen before the system background to draw it?

Note that the system will populate the subject of the default background color, so the theme will be loaded before rendering, we can change the theme of purpose. APP is generally a first start of the Activity are Splash, Splash does not need as a title bar, and generally is full screen. Then we can modify the theme, probably in two ways:

1. The theme becomes transparent, so that loaded before ContentView out, we will see the desktop through the Activity starts, there will be black / white screen phenomenon. Then remove the title bar, the Activity is set to full screen, the effect is very good, the disadvantage is that if you start an Activity is complex and time consuming operation, then there will be a feeling of delay.

<style name="AppTheme" parent="android:Theme.Light.NoActionBar">  
    <item name="android:windowIsTranslucent">true</item>  
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowActionBar">false</item>  
    <item name="android:windowBackground">@android:color/transparent</item>  
    <item name="android:WindowFullscreen">true</item>
</style>

2. The theme is set to a picture, the title bar removed, the Activity is set to full screen, which is so loaded before ContentView out, we can see a default background image, but the picture screen adaptation of the issues we need to consider theme in the background image will be automatically stretched, distorted or may cause problems of imbalance.

<style name="AppTheme" parent="android:Theme.Light.NoActionBar">  
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowActionBar">false</item>  
    <item name="android:windowBackground">@drawable/bg_splash</item>  
    <item name="android:WindowFullscreen">true</item>
</style>

3. Background display optimization

Here again the above solutions are optimized to reduce bad experience when users. (PS: Of course you can not do this optimization, if you want to flicker boss, the training and preparation pot Android system, mobile phone hardware configuration, UI does not match the drawing to the screen, and so on)

3.1 optimization method

The method in question is that a sense of severe delay, then we need to do is to try to speed up the startup speed Splash, in Splash is not a member of any logical operation, and the Application in any of the data and the initialization method of open-source framework should not be called when after Splash initiate a full, each thread can be promoter initialization operation in Splash of onResume () method, so that users would rather wait in the background, do not let users think looking at the phone's desktop phone crashed.

3.2 Method Two optimization

Method II problem in that image distortion or stretching may cause imbalance, such that the interface is not beautiful. The simplest way is to establish various drawable folder, to cover all types of screen sizes, each folder stuffed UI to do to make a reasonable background. In this way it is super silent, larger workload UI, but you also can not cover all screen sizes, such as this:

So how you can have a better user experience? This time we need is drawable.

3.2.1 drawable type

In Android, we can use a custom xml drawable, use the most is the background of the scene, some of the default icon for the Android system are also used xml realize, of course, that involves some knowledge of the vector.

First, let's look at the type of drawable, there are several BitmapDrawablecommon: ShapeDrawable, StateListDrawable, LevelListDrawable, LayerDrawable, TransitionDrawable, ScaleDrawable, AnimationDrawable, InsetDrawable, NinePatchDrawable, ClipDrawable, VectorDrawable, .

Here I used LayerDrawable to solve the problem of drawing pictures, devoted to the analysis of each drawable write an article after the other drawable.

3.2.2 LayerDrawable solve the image is stretched

Why LayerDrawable solve stretch the image problem? This should LayerDrawble nature to start:

1. XML tags for layer-list

2. Hierarchical collection of Drawable

3. May comprise a plurality of item, each item represents a Drawable

4. item can by android: drawable direct reference resources

5. by item in android: specify a position with respect to the top of the parent node, etc.

Hierarchical multiple Drawable overlay, and you can specify the location of each Drawable, and the layout is not like? Some simple layout display can be used LayerDrawble to complete, but only Drawable plug into the text what does not.

Then we can look at a screen adaptation of good background on how to complete the change. Firstly, a drawable layer-list of file types in bg_splash.xml drawable folder, and then write the following code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg"/>
    <item android:top="175dp">
        <bitmap android:gravity="top" android:src="@drawable/logo"/>
    </item>
</layer-list>

We put in a layer-list in the two item: The first is a background of the entire page, the picture may be, but I suggest using a solid color ShapeDrawable, to some extent, reduce memory overhead and no need to consider issues like distorted picture ; second is a Bitmap, <bitmap>the label is inserted into an image according to the image size, thus avoiding on-screen image is stretched, by android:topspecifying an offset distance to the top of the item, the same can also specify android:bottom, android:left, android:rightto locate the item the position and then to <bitmap>the android:gravityset top, so that logo can be displayed at the top. With such a screen can be adapted and will not be distorted background on the well, in accordance with the method two set android:windowBackgroundcan be.

3.2.3 style theme optimization

In accordance with the method set two, the whole App will use we make of bg_splash as a background, this time if you do not set the background for each Activity or when using the virtual keyboard, then enter the App will see on the screen do not appear in the control bg_splash position, causing the user's confusion or resentment.

We know Activity also can set a theme, then we can give Application Set a default theme AppTheme, then to SplashActivity set a theme SplashTheme our full-screen with the background, so you can quickly display the startup background in our SplashActivity, go to App in, it will not appear in the background start another Activity, the final styles and AndroidManifest files are as follows:

styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorPrimary">@color/colorPrimary</item>
  <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  <item name="colorAccent">@color/colorAccent</item>
  <item name="android:windowBackground">@color/colorDefaultBg</item>
</style>

<style name="SplashTheme" parent="AppTheme">  
  <item name="android:windowFullscreen">true</item>
  <item name="android:windowBackground">@drawable/bg_splash</item>
</style>

AndroidManifest.xml
<application android:name=".MyApplication"
  android:theme="@style/AppTheme"
  android:supportsRtl="true"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:allowBackup="true">

  <activity android:name=".SplashActivity"
    android:theme="@style/SplashTheme"
    android:screenOrientation="portrait"
    android:configChanges="orientation|screenSize|keyboardHidden">

    <intent-filter>

      <action android:name="android.intent.action.MAIN"/>
      <category android:name="android.intent.category.LAUNCHER"/>

    </intent-filter>

  </activity>

</application>