preface

Support for this immersive style spans several versions of Android, with full support at the system level not being available until Android 6.0, and some of this immersive style has been around since Android 3.0. From 3.0 to 6.0, there were five major releases, each with more or less optimized features. So if we want a perfectly immersive implementation that supports as low a version as possible, it’s going to be a very challenging task, with all sorts of compatibility issues. To keep you from getting sidetracked, I’m going to break down the new features in each version in order to give you a sense of how this immersive style has evolved.

3.0 (API 11)

Remember how we hid the status bar in the code before Android 3.0? I think those who have done Android development in the early days should be familiar with the following code.

getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
Copy the code

Prior to 3.0, we didn’t have an API for the status bar. If we want to hide the status bar to achieve full screen effect, we can only achieve full screen by setting the Window TAB. Later on Android 3.0 (API 11), a void setSystemUiVisibility (int visibility) method was added to View. This method comes with two properties: STATUS_BAR_HIDDEN and STATUS_BAR_VISIBLE. And it also joined the OnSystemUiVisibilityChangeListener to monitoring system of the UI changes. This opens up an era of status bar manipulation on Android, and sets the stage for all kinds of gameplay to come. But in 3.0 you can only show or hide the status bar, nothing else.

4.0 (API 14)

Later, in 4.0, the function for status bar operations was expanded. The STATUS_BAR_HIDDEN added in 3.0 was replaced by SYSTEM_UI_FLAG_LOW_PROFILE. STATUS_BAR_VISIBLE is also changed to SYSTEM_UI_FLAG_VISIBLE. A new TAB SYSTEM_UI_FLAG_HIDE_NAVIGATION has also been added. Developers have more control over the system UI.

SYSTEM_UI_FLAG_LOW_PROFILE is called low profile mode. You can set this TAB to darken ICONS in the status bar or navigation bar and to make unimportant ICONS disappear. Suitable for some full screen operations, such as games, reading, etc. Let’s take a look at the effect of setting this tag. On the left is the default style, and on the right is the appearance after setting this label. It is obvious that some ICONS in the status bar are hidden and become somewhat translucent, and the three buttons in the navigation bar are also hidden. In addition, whenever there is any interaction on the page, the tag is cleared and the style is restored.





The name SYSTEM_UI_FLAG_HIDE_NAVIGATION means that the bottom navigation bar can be hidden by setting this TAB. The bottom navigation bar has been available on Android since version 4.0. Again, if the user has any interaction with the page, the label is cleared and the style is restored.

4.1 (API 16)

In version 4.1, the Android team has further enhanced setSystemUiVisibility and added the following properties to version 4.0:

SYSTEM_UI_FLAG_FULLSCREEN full screen, visual effect and WindowManager LayoutParams. FLAG_FULLSCREEN. If your app requires full-screen mode only for certain pages, use this TAB. Because this label is easier to clear.

SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN / SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

These two properties are similar to the FULLSCREEN and HIDE_NAVIGATION properties mentioned above, but with a LAYOUT added. The difference is that these two properties don’t actually hide the status bar or navigation bar, just extend the entire layable area of the content into it. The layout of the Toolbar shown below extends below the status bar.





SYSTEM_UI_FLAG_LAYOUT_STABLE This View is usually used in conjunction with the properties mentioned above to ensure that the View will not be rearranged when the system controls are hidden. That is, when you manually hide the status bar or navigation bar, all views stay where they are.

4.4 (API 19)

For the status bar in the version mentioned above, you can only do show or hide. It’s not quite as immersive as we want. We want the status bar to be more consistent with the content on the page below, and not to lose the status displayed, as shown below.





immersion

We’ve been able to do this since Android 4.4, with API 19 adding two style properties that allow you to make the background of the status bar or navigation bar transparent.

android:windowTranslucentStatus
android:windowTranslucentNavigation
Copy the code

When you set these two properties, it’s important to note that they work differently on Android 4.4 than they do on Android 5.0 and later. For a practical demonstration, add the following code to styles. XML in the values-v19 directory.

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

AppTheme is set to the AppTheme and runs on Android 4.4 and 5.0 respectively. We should see the following effect





We will see the effect on 4.4 is different from that on 5.0, with full transparency on 4.0 but slightly shaded on top and even translucency on 5.0. This is probably because when the Android team implemented this style in 4.4, they didn’t take into account the fact that the background of the status bar might be white, and we couldn’t change the color of the status bar content in 4.4. They discovered this in 5.0, but probably too late to add the ability to change the color of the content in the status bar, so they changed the default style to translucent to avoid the problem of having a light background. The above is purely personal speculation.

In addition to the above two attributes, two additional tags have been added to API 19

“SYSTEM_UI_FLAG_IMMERSIVE” and “system_UI_FLAG_navigation” and “SYSTEM_UI_FLAG_FULLSCREEN” are both cleared when the user interacts with the screen in any way. Later, if you want to hide the purpose, you have to reset it. This TAB is added to prevent this from happening. When you set this TAB, it will only clear when you swipe from the top of the screen or swipe up from the bottom of the screen. Other normal interactions will not change.

“SYSTEM_UI_FLAG_IMMERSIVE_STICKY”, which is similar to “SYSTEM_UI_FLAG_IMMERSIVE”, However, this TAB will cause SYSTEM_UI_FLAG_HIDE_NAVIGATION and SYSTEM_UI_FLAG_FULLSCREEN to be cleared temporarily, not permanently, and then automatically restored after a while.

5.0 (API 21)

It’s been three years since you could first operate the status bar with version 3.0 (released in 2011), and you could set the color of the status bar with version 5.0 (released in 2014). In those three years, developers have never been able to create a perfectly immersive app experience. By version 5.0, the following two attributes were added.

android:statusBarColor
android:navigationBarColor
Copy the code

With the above two style properties, we can change the status bar and navigation bar to any color you want. So we’re going to implement the immersive style mentioned at the beginning of 4.4 above on 5.0 by first setting the SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN tag.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    getWindow().getDecorView().setSystemUiVisibility(
        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN );
}
Copy the code

Then add a line in the style to make the status bar background transparent

<item name="android:statusBarColor">@android:color/transparent</item>
Copy the code





In doing so, however, we find that the Toolbar partially overlaps with the status bar. To solve this problem, we need to use fitSystemWindows (corresponding method: setFitsSystemWindows). This property is set on the view so that the view can consider the space for the system UI when calculating its size. As we in the layout of the Toolbar to join the android: fitsSystemWindows = “true”

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:background="#00AEFF"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
Copy the code

This allows the upper part of the Toolbar to have a status bar section (similar to the padding) for this immersive effect. Now we’re ready for an immersive UI. But Android left us with a big problem: we couldn’t set the color of the content in the status bar. As a result, if your page style is light, the content in the status bar is basically invisible. This problem was not solved until 6.0.

6.0 (API 23)

6.0 joined SYSTEM_UI_FLAG_LIGHT_STATUS_BAR labels and android: windowLightStatusBar style attributes, finally you can change the color of the content of the status bar. When set, the contents of the status bar will be dark so that they can be seen even on a light background, as shown below





Afterword.

One of the biggest pains of Android development is compatibility issues, and if you’re trying to build an APP with an immersive UI style, you’re going to struggle with compatibility issues. A feature whose implementation is spread across different versions, even if the new version of Android adds a new feature, you can’t use it because newer versions of Android are notoriously slow to cover. It also feels like evidence that Google’s Android team is lacking in technical product design.

Author’s brief introduction Peng Tao (@ Peng Tao me) to make technology to understand and interesting personal blog: pengtao. Me Jane books: www.jianshu.com/u/f9246f419… GitHub:github.com/CPPAlien