Final effect:

Ps: If the image size is too big to read, go to DemoREADME

preface

Recently, I wanted to implement a launch page, so I tried several commonly used apps in the mobile phone, and summarized the following points or points to note:

  1. Start the optimization

    In general,Cold startAt the timeApplicationOccurs during initializationBrief white or black screenHere you can make an optimization to improve the user experience.
  2. Fixed screen orientation

    When tested, most apps (with the exception of the Universe Bar) have a launch pageOnly portrait display is supportedIf the horizontal display of the picture will be stretched, affect the appearance.
  3. Tail ads – abnormity screen to full screen adaptation (Liu Haibing, water screen, etc.) usually start page will have a fan page ads, need to occupy the notification bar, usually you just need to set up a full screen theme to solve, but when encounter aliens screen (such as water screen, Liu Haibing, etc.) when they need to do some extra adaptation.
  4. If there is a virtual NavigationBar, you need to make an adaptation, otherwise by default, text or images at the bottom of the launch page will be covered by the virtual NavigationBar.
  5. Shielding the Back button

    When the startup page is displayedbackInvalid, but it can be pressedhomeKey to return to desktop.


Basic implementation

We’ll implement a base version first, then refine it bit by bit. Demo is implemented based on MVVM due to recent learning of architectural components, but it does not affect the content of this article.

  1. AppTheme.Splash:
<! -- Full-screen theme -->
<style name="AppTheme.Splash" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <! -- Set window Overeffect to disable window preview animation -->
    <item name="android:windowDisablePreview">false</item>
</style>
Copy the code
  1. Define our startup pageSplashActivityAnd in theAndroidManifest.xmlIn theSet a custom full-screen theme on:
public class SplashActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivitySplashBinding mBinding =
                DataBindingUtil.setContentView(this, R.layout.activity_splash);

        // Enter MainActivity after 2s delay
        new Handler(Looper.getMainLooper()).postDelayed(new Runnable() {
            @Override
            public void run(a) {
                Intent intent = new Intent(SplashActivity.this, MainActivity.class); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); startActivity(intent); finish(); }},2000); }}Copy the code
<activity 
    android:theme="@style/AppTheme.Splash"
    android:name=".splash.SplashActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>
Copy the code
  1. layoutYou can see it in the renderings. It’s just a picture.

Pixel:

You can see there’s a very clear white screen.

Start the optimization

The startup optimization here is actually to add a background to the white screen at startup, so that the user is unaware when using it, never causing an illusion of fast startup.

  1. drawableMake a background image under the folderlayer_launcher.xml:
<?xml version="1.0" encoding="utf-8"? >
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFF" />
        </shape>
    </item>

    <item android:bottom="25dp">
        <bitmap
            android:gravity="bottom|center_horizontal"
            android:src="@drawable/ic_launcher" />
    </item>
</layer-list>
Copy the code
  1. On the full screen theme AppTheme.Splash setting we have a custom background:
<style name="AppTheme.Splash" parent="Theme.AppCompat.Light.NoActionBar">.<! -- Set window background -->
    <item name="android:windowBackground">@drawable/layer_launcher</item>
</style>
Copy the code
  1. Set upwindowAfter the background,Start the page without setting the image:
<?xml version="1.0" encoding="utf-8"? >
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
           
        <TextView
            android:gravity="center"
            android:text="splash activity"
            android:background="#F00"
            android:layout_marginBottom="120dp"
            android:layout_gravity="center_horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <! -- <View-->
        <! -- android:layout_width="match_parent"-->
        <! -- android:layout_height="0dp"-->
        <! -- android:layout_weight="1" />-->
        
        <! -- <ImageView-->
        <! -- android:layout_width="80dp"-->
        <! -- android:layout_height="80dp"-->
        <! -- android:layout_gravity="center_horizontal|bottom"-->
        <! -- android:layout_marginBottom="30dp"-->
        <! -- android:scaleType="fitXY"-->
        <! -- android:src="@drawable/ic_launcher" />-->

    </LinearLayout>
</layout>
Copy the code

RedMi 3S:

Ok, as you can see, it feels much better after setting the background, but the addition of a big red TextView for better identification may still seem a bit obtrusive. = =

Ps: If your background image is stretched out of shape, try transferring the image to the drawable-xxhdpi file.

Fixed screen orientation – forces portrait

In androidmanifest.xml, set the screenOrientation attribute to Portrait for SplashActivity.

<activity
    android:name=".splash.SplashActivity"
    android:screenOrientation="portrait"
    android:theme="@style/AppTheme.Splash">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

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

Special screen full screen adaptation

First of all, let’s take a look at the current implementation of the code on the XiaoMi CC9e:



Extra fit
There are two types of adaptation

  • For Android P(9.0) and above, Google has officially provided us with a solution.
  • Android O(8.0) and below mobile phones, because there is no official adaptation at this time, so only according to the specific model to view the corresponding manufacturer to provide us with the solution of the document.

Android P adaptation

According to the document, we just need to add one more in the full screen theme windowLayoutInDisplayCutoutMode attribute and value of shortEdges can, just because it is just out of Android P, So you need to copy a theme to values-v28/styles. XML and set this property:

<! -- values-v28/styles.xml -->
<?xml version="1.0" encoding="utf-8"? >
<resources>.<style name="AppTheme.Splash" parent="Theme.AppCompat.Light.NoActionBar">.<! -- Android P screen adaptation can achieve full screen effect -->
       <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>
Copy the code

Android O adapter

Unfortunately, the device resources are limited, the real phone in hand only a Redmi 3S and Xiaomi CC9e (droplet screen Android Q), perfect to avoid this situation. = = But I have seen the solution in a blog (sorry I can’t find the link to the original blog) (not verified), you can check it by the way:

<activity
    android:name=".splash.SplashActivity"
    android:screenOrientation="portrait"
    android:theme="@style/AppTheme.Splash">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>

    <! -- Allows drawing to the bangs of Oppo and Vivo models -->
    <meta-data
        android:name="android.max_aspect"
        android:value="2.2" />

    <! -- Allow drawing to the Fringe area of Huawei Bangs -->
    <meta-data
        android:name="android.notch_support"
        android:value="true" />

    <! -- Allows drawing to the fringe area of xiaomi Bangs -->
    <meta-data
        android:name="notch.config"
        android:value="portrait" />
</activity>
Copy the code

Full screen adaptation

Do you think this is really okay? too young too simple ! , the effect after implementation of the scheme above (XiaoMi CC9e) :

The little black article
ious
TextView
Extend to the top of the screen



API 21
newvalues-v21/styles.xml
values-v28/styles.xml 

<! -- values-v21/styles.xml -->
<?xml version="1.0" encoding="utf-8"? >
<resources>.<style name="AppTheme.Splash" parent="Theme.AppCompat.Light.NoActionBar">.<! Set statusBarColor to transparent -->
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    
    </style>
</resources>
Copy the code

XiaoMi CC9e:

The virtualNavigationBarKeep out the problem

Let’s take a look at the current code running on Pixel:



logo
Add the following properties to a full-screen theme 

<style name="AppTheme.Splash" parent="Theme.AppCompat.Light.NoActionBar">.<! - after 5.0, added a windowDrawsSystemBarBackgrounds attributes, whether to sign this window is responsible for rendering system background, we set it to false, so when it is drawn windowBackground, It's going to be above NavigationBar. -->
    <item name="android:windowDrawsSystemBarBackgrounds">false</item>
</style>
Copy the code

Also, you need to add styles. XML under values-v21 and values-v28. Pixel:


Shielding the Back button

Overwrite SplashActivity’s onBackPressed method to do nothing:

public class SplashActivity extends AppCompatActivity {...@Override
    public void onBackPressed(a) {
        // Mask the back key}}Copy the code

The last

The Demo link

It turns out there’s so much stuff in a launch page. There must be something in the Demo that hasn’t been adapted. If you find something wrong or inadequate in the article, please correct it.

Refer to the article

  • Splash adaptor solves the problem of stretching startup diagrams
  • Android fringe screen, water drop screen full screen adaptation scheme
  • Support display cutouts
  • Android’s immersive status bar summary
  • Android full screen startup page adaptation has some pits