One, foreword

The startup page is essential in Android development, but we often see a blank screen or a black screen after startup, and then the picture of the startup page will be displayed. This article will analyze the reasons for this phenomenon, and give solutions

1.1 Causes of blank or Blank Screen Startup

The application TAB in androidmanifest.xml sets the theme to a white screen if the theme type is Light and a black screen if the theme type is Dark.

1.2 Further Analysis

When the system starts an app, the Zygote process forks an app child. When the process is created, it creates a window when the activity starts. This window displays the background color or image using the windowBackground set in the Theme. If you follow the code when using Light or Dark, you can see that the default windowBackground Settings are white and black.

### 2. Launch page — General practice

2.1 Creating an Activity: SplashActivity

class SplashActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?). {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)
        Handler().postDelayed({
            startActivity(Intent(this,MainActivity::class.java))
            finish()
        },3000)}}Copy the code

2.2 Create background for the startup page: splash_background.xml

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

Here are the attributes of bitmap:

  • android:antialias

    Boolean value. Enable or disable anti-aliasing.

  • android:dither

    Boolean value. Enable or disable bitmap jitter when the pixel configuration of the bitmap is different from that of the screen (for example: ARGB 8888 bitmap and RGB 565 screen).

  • android:filter

    Boolean value. Enable or disable bitmap filtering. Use filtering when a bitmap is shrunk or stretched to give it a smooth appearance.

  • android:gravity

    Define bitmap gravity. Gravity indicates where an object is placed in its container when the bitmap is smaller than the container.

    Must be the following one or more (use ‘|’ space) constant values:

    value instructions
    top Place an object on top of its container without changing its size.
    bottom Place an object at the bottom of its container without changing its size.
    left Place the object on the left edge of its container without changing its size.
    right Place the object on the right edge of its container without changing its size.
    center_vertical Place an object in the vertical center of its container without changing its size.
    fill_vertical Extend the vertical size of the object as needed to fully fit its container.
    center_horizontal Place an object in the horizontal center of its container without changing its size.
    fill_horizontal Extend the horizontal size of the object as needed to fully fit its container.
    center Center an object on the horizontal and vertical axes of its container without changing its size.
    fill Extend the vertical size of the object as needed to fully fit its container. This is the default value.
    clip_vertical An additional option that can be set to have the top and/or bottom edges of child elements clipped to their container boundaries. Clipping is based on vertical gravity: top gravity clipping the upper edge, bottom gravity clipping the lower edge, neither side clipping at the same time.
    clip_horizontal Additional options that can be set to have the left and/or right sides of child elements clipped to their container boundaries. Clipping is based on horizontal gravity: left gravity clipping the right edge, right gravity clipping the left edge, neither side clipping at the same time.
  • android:mipMap

    Boolean value. Enable or disable mipMap prompt. For more information, see setHasMipMap(). The default value is false.

  • android:tileMode

    Define tiling patterns. When tiling mode is enabled, the bitmap is repeated. Gravity is ignored when tiling mode is enabled.

    Must be one of the following constant values:

    value instructions
    disabled Uneven shop map. This is the default value.
    clamp Copies the edge color when the shader draws outside its original bounds
    repeat Horizontal and vertical repeat shaders for the image.
    mirror Repeat the image of the shader horizontally and vertically, alternating the mirrored images so that adjacent images are always connected.

2.3 Create a style for the launch page: SplashTheme

<style name="SplashTheme" parent="AppTheme">
  <item name="windowNoTitle">true</item><! -- No title -->
  <item name="android:windowFullscreen">true</item><! - the full screen - >
  <item name="android:windowIsTranslucent">true</item><! -- Translucent -->
  <item name="android:windowBackground">@drawable/splash_background</item>
</style>
Copy the code

2.4 Set the style for SplashActivity in androidmanifest.xml

<activity android:name=".SplashActivity"
          android:theme="@style/SplashTheme">
  <intent-filter>
    <action android:name="android.intent.action.MAIN"/>

    <category android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>
</activity>
Copy the code

Through the above 4 steps can solve the problem of opening the APP blank screen or black screen.

Best practices

3.1 Scenario 1: There is only one picture or picture + text in the middle of the screen

To do this, note that bitmap uses gravity as center to center images and text

3.2 Scenario 2: Pictures or text in the middle and bottom of the screen

This type of layout, such as weibo, can be cut into the top and bottom of the image, or cut the image up, down, left and right so that the whole image is centered

Method 1: Cut the picture into the picture in the center of the screen and the picture at the bottom

Splash_background.xml requires a different notation

<?xml version="1.0" encoding="utf-8"? >
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <! -- Overall background color -->
    <item>
        <color android:color="@color/white"/>
    </item>
    <! - the top -- -- >
    <item>
        <bitmap android:gravity="center"
                android:src="@drawable/splash_center"/>
    </item>
    <! -- -- -- > at the bottom of the
    <item>
        <bitmap android:gravity="bottom|center_horizontal"
                android:src="@drawable/splash_bottom"/>
    </item>
</layer-list>
Copy the code

When there is a virtual navigation bar at the bottom of the phone, the bottom picture will be blocked to make the navigation bar transparent:

class SplashActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?). {
        window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION)
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)
        Handler().postDelayed({
            startActivity(Intent(this,MainActivity::class.java))
            finish()
        },3000)}}Copy the code

The * * window. AddFlags (WindowManager. LayoutParams. FLAG_TRANSLUCENT_NAVIGATION) * * is the key

Method 2: Set the image to Background instead of windowBackground

  • Style Settings:
<style name="SplashTheme" parent="AppTheme">
  <item name="windowNoTitle">true</item>
  <item name="android:windowFullscreen">true</item>
  <item name="android:windowIsTranslucent">true</item>
  <item name="android:windowBackground">@android:color/white</item>
  <item name="android:background">@drawable/splash_background</item>
</style>
Copy the code

Use background to set the background image

  • Splash_background. XML Settings:
<?xml version="1.0" encoding="utf-8"? >
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"/>
    <item>
        <bitmap android:gravity="clip_vertical|clip_horizontal"
                android:src="@drawable/splash_screen"/>
    </item>
</layer-list>
Copy the code

Use the bitmap gravity attribute, use clip_vertical | clip_horizontal to cut out pictures

Note: when using the second way cannot use Windows. AddFlags (WindowManager. LayoutParams. FLAG_TRANSLUCENT_NAVIGATION), this can lead to the picture is drawing