Android: Launch page - Best practice

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

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Android: Launch page — Best practice

One, foreword

1.1 Causes of blank or Blank Screen Startup

1.2 Further Analysis

2.1 Creating an Activity: SplashActivity

2.2 Create background for the startup page: splash_background.xml

2.3 Create a style for the launch page: SplashTheme

2.4 Set the style for SplashActivity in androidmanifest.xml

Best practices

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

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

Android: Launch page — Best practice

One, foreword

1.1 Causes of blank or Blank Screen Startup

1.2 Further Analysis

2.1 Creating an Activity: SplashActivity

2.2 Create background for the startup page: splash_background.xml

2.3 Create a style for the launch page: SplashTheme

2.4 Set the style for SplashActivity in androidmanifest.xml

Best practices

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

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

Related Posts

Programmer 35 life and death milestone! Forced to be helpless to change…..

Design Pattern — Factory Pattern (2)

Capture of data in Flutter