The seemingly complicated immersive experience design is actually a messy relationship between the System UI and the user layout (setContentView) :

  • StatusBar system StatusBar
  • NavigationBar system NavigationBar

The Internet is littered with articles about “immersive status bars,” and without poking fun at whether the term “immersive status bar” is true or not, any article will tell you that there are two key things to an immersive experience:

  • window.decorView.systemUiVisibility = SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or SYSTEM_UI_FLAG_LAYOUT_STABLE
  • window.statusBarColor = Color.TRANSPARENT

Running the code, you get the “immersive status bar” effect. But I believe most people are confused:

  • SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 和 SYSTEM_UI_FLAG_LAYOUT_STABLEWhat is?
  • Why make the status bar color transparent? Can’t I set other colors?

And all sorts of “immersive status bar” potholes you might encounter next:

  • Bull shit! The user layout overlaps the status bar information
  • The interactive buttons are blocked by the phone’s “bangs.
  • The color of the text on the status bar, such as the time, is black against the blue background of the status bar

Before we explain the implementation of immersive experience and the adaptation of the special-shaped screen, we need to make up the class to learn some basic knowledge:

All kinds of Flag

STATUS_BAR_HIDDEN

/** * Android 3.0 (API 11) added ** * deprecated, now equivalent to SYSTEM_UI_FLAG_LOW_PROFILE */
public static final int STATUS_BAR_HIDDEN = SYSTEM_UI_FLAG_LOW_PROFILE;
Copy the code

STATUS_BAR_VISIBLE

/** * Android 3.0 (API 11) added ** * has been deprecated and is now equivalent to SYSTEM_UI_FLAG_VISIBLE */
public static final int STATUS_BAR_VISIBLE = SYSTEM_UI_FLAG_VISIBLE;
Copy the code

SYSTEM_UI_FLAG_VISIBLE

/** * Android 4.0 (API 14) added ** to make the system UI(status bar, etc.) visible, * this is the default. * /
public static final int SYSTEM_UI_FLAG_VISIBLE = 0;

Copy the code

SYSTEM_UI_FLAG_LOW_PROFILE

/** * Android 4.0 (API 14) has added a "low profile" mode. This is not the traditional "low profile" mode. * I prefer to call it "low profile" mode. * Some ICONS in the status bar and/or navigation bar may darken */
public static final int SYSTEM_UI_FLAG_LOW_PROFILE = 0x00000001;

Copy the code

SYSTEM_UI_FLAG_HIDE_NAVIGATION

/** * Android 4.0 (API 14) added ** If SYSTEM_UI_FLAG_LOW_PROFILE is set, * Try setting this Flag to request that the navigation bar be temporarily hidden, * this will cause the basic navigation controls (the three Diamond buttons on Android for domestic users) to disappear * This is extremely useful for making full use of the device screen, * * Tip: Google considers the navigation control so important that this Flag only temporarily hides the navigation control * any action by the user will cause the navigation control to reappear and clear the Flag bit */
public static final int SYSTEM_UI_FLAG_HIDE_NAVIGATION = 0x00000002;
Copy the code

SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

/** * Android 4.1 (API 16) adds a LAYOUT keyword compared to SYSTEM_UI_FLAG_HIDE_NAVIGATION. * Use this Flag to hide the system UI. * Instead, the user's layout extends below the System UI, * causing the user's layout to be overwritten (this can be circumvented by using the fitSystemWindows(Rect) method) */
public static final int SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION = 0x00000200;
Copy the code

SYSTEM_UI_FLAG_FULLSCREEN

/** * Android 4.1 (API 16) added ** Full screen mode, where the user's content view will cover the entire screen, * this means that non-critical screen decorations (such as the status bar, not including the navigation bar, Google believes the navigation bar is a very important system UI) will be hidden * and WindowManager LayoutParams. FLAG_FULLSCREEN different is: * * 1. If used with Window#FEATURE_ACTION_BAR_OVERLAY, the ActionBar is also hidden * 2. This FLAG is easier to clear: it is cleared when you interact with the system UI (dropdown displays notifications) or when you jump to another application
public static final int SYSTEM_UI_FLAG_FULLSCREEN = 0x00000004;
Copy the code

SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

/** * Android 4.1 (API 16) add ** * add system_UI_flag_layout_navigation * This FLAG is different from SYSTEM_UI_FLAG_FULLSCREEN in that it extends the user's layout to the bottom of the system status bar. * This causes the user's layout to be overwritten by the system status bar. (Use the fitSystemWindows(Rect) method to avoid this problem.) * /
public static final int SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN = 0x00000400;
Copy the code

SYSTEM_UI_FLAG_LAYOUT_STABLE

/** Android 4.1 (API 16) added ** This FLAG bit is usually used with other flags to indicate that the system expects the View's insets to be fixed * this means that even if the current window's FLAG changes affect the layout of the UI, * The location of the user interface does not change. * * The FLAG interface will not change if used alone. * /
public static final int SYSTEM_UI_FLAG_LAYOUT_STABLE = 0x00000100;
Copy the code

SYSTEM_UI_FLAG_IMMERSIVE

/** * Android 4.4 (API 19) add ** this FLAG is used for SYSTEM_UI_FLAG_HIDE_NAVIGATION, * if we use SYSTEM_UI_FLAG_HIDE_NAVIGATION, * Then the SYSTEM_UI_FLAG_HIDE_NAVIGATION FLAG will be cleared for any user interaction with the system * this FLAG will not be cleared unless you swipe down from the top of the screen. * /
public static final int SYSTEM_UI_FLAG_IMMERSIVE = 0x00000800;
Copy the code

SYSTEM_UI_FLAG_IMMERSIVE_STICKY

/** * Android 4.4 (API 19) Added ** This FLAG is different from SYSTEM_UI_FLAG_IMMERSIVE; * SYSTEM_UI_FLAG_IMMERSIVE only applies SYSTEM_UI_FLAG_HIDE_NAVIGATION, * SYSTEM_UI_FLAG_IMMERSIVE_STICKY * SYSTEM_UI_FLAG_HIDE_NAVIGATION * SYSTEM_UI_FLAG_FULLSCREEN * * Another difference is that the FLAG will be briefly cleared after interacting with the system UI, and * will be automatically restored after a while. * /
public static final int SYSTEM_UI_FLAG_IMMERSIVE_STICKY = 0x00001000;
Copy the code

The System UI color

In terms of time span, the System UI of the Android System has gone through the following stages:

In Android 4.4, you can make the background of the status bar or navigation bar transparent

Android 4.4 only allows you to make the background of the status bar or navigation bar transparent by adding the following code to the Theme of the Application:

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>
Copy the code

This style does not look the same on Android 5.0 or above:

Below 5.0 displays a gradient translucent effect;

Above 5.0 this gradient effect is removed.

With Android 5.0, you can now set the color of the status bar or navigation bar

Thanks to Google’s Material Design language in Android 5.0, Android developers will finally be able to set the status bar and navigation bar to any color you want, simply by calling the following methods:

/** * Android 5.0 (API 21) added ** set the status bar color to {@codeColor}. * It is worth noting that this method conflicts with the previously mentioned "transparent status bar", * this means that if "transparent status bar" is set, * calling the method again is invalid. * /
public abstract void setStatusBarColor(@ColorInt int color);

/** * Android 5.0 (API 21) added ** set the navigation bar color to {@codeColor}. * It is worth noting that this method conflicts with the previously mentioned "transparent navigation bar", * this means that if "transparent navigation bar" is set, * calling the method again has no effect. * /
public abstract void setNavigationBarColor(@ColorInt int color);
Copy the code

With Android 6.0, you can now set ICONS and font colors in the status bar

The default color of the font and icon in the status bar of the Android system is light (white). If the App status bar is designed with light color, users may be blind to see all kinds of information in the status bar. This awkward spot wasn’t resolved until After Android 6.0.

Android 6.0 added Flag to change the color and style of status bar content:

/** * Android 6.0 (API 23) added ** set the status bar text icon to "Light" mode, * generally, the status bar text icon color to black. * /
public static final int SYSTEM_UI_FLAG_LIGHT_STATUS_BAR = 0x00002000;
Copy the code

Or you can achieve the same effect by setting the following in Style:

<style name="AppTheme" parent="Theme.AppCompat">
     <item name="android:windowLightStatusBar">true</item>
</style>
Copy the code

With all this in mind, we can do…

With a full understanding of the various Android SystemUI features described above, you can achieve the immersive experience that most apps on the market call. Let’s take a look at a few 🌰.

Pages with complex backgrounds/textures

A common UI design in the market is to make the status bar transparent, while allowing the user’s layout to invade the bottom of the status bar.

The code is as follows:

	private fun translucent(a){ supportActionBar? .hide()valdecorView = window? .decorView decorView?.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN window?.statusBarColor = Color.TRANSPARENT }Copy the code

The effect is as follows:

The user layout has a solid color background at the top

And like the design of alipay, the top of the user layout is a solid color background. The common idea is to set the color of the statusbar to the same color and the user layout does not occupy the statusbar.

The code is as follows:

	private fun translucent(a){ supportActionBar? .hide() window? .statusBarColor = Color.TRANSPARENT }Copy the code

After setting the status bar color, don’t forget to set the dark/light mode for the status bar icon based on the color of the status bar: decorView? SystemUiVisibility = View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR Status bar Light mode: The status bar icon is colored (black). If the status bar icon is not set, the status bar icon is colored (white).

Class A e-book reader

Similar to reading on wechat, users want to be fully engaged in reading e-books without being affected by the changes in the system status bar information, while at the same time being able to call out the system status bar and App menu at any time. Like this:

decorView
systemUiVisibility
system ui flag 

   /** * dynamically change systemUiVisibility ** for decorView based on the visible parameter passed@paramWhether to display status bar */
    private fun changeSystemUI(visible: Boolean){
        var newVis = (View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR)
        llActionBar.visibility = View.VISIBLE
        if(! visible) { newVis = newVis or (ImageView.SYSTEM_UI_FLAG_LOW_PROFILE or ImageView.SYSTEM_UI_FLAG_FULLSCREEN or ImageView.SYSTEM_UI_FLAG_HIDE_NAVIGATION) llActionBar.visibility = View.GONE }valdecorView = window? .decorView decorView?.systemUiVisibility = newVis }Copy the code

The effect is as follows:

conclusion

This article is just a brief introduction to the foundation of System UI in Android View system, about notch in Android P adaptation knowledge and a variety of domestic customized room systems (MIUI, EMOTION UI, Fly Me…). The adaptation of the system UI and the perforated screen is limited by space, which will be discussed in detail in the next article.

In a word,

The road ahead is long; I see no ending, yet high and low I will search; The revolution has not yet succeeded, comrades still need to work hard!