Notes on the pitfalls of Android immersive status bar

Some friends may think that the term "immersive status bar" is inappropriate. However, most of the "immersive status bar" mentioned on the Internet now basically refers to the "transparent status bar", so we will not discuss whether it is right or wrong here (in fact, sometimes when there are too many wrongs, they become right). Everyone knows that it is a "transparent status bar", and this effect will be called the "immersive status bar" below.

Before Android 4.4, all apps were unable to set the background color of the status bar. They all followed the system (black background status bar). A black status bar did not match the app at all. In order to provide better interaction effects, Google provided a method to set an immersive status bar after Android 4.4. The interface of apps that support the immersive status bar looks a bit more high-end, so the Android client of Suishuji also supported the immersive status bar at the beginning of the year. In the process of realizing the immersive status bar effect, I stepped on a lot of pitfalls, so I record them here. The following figure is a comparison of the effects before and after setting the immersive status bar on the Android client of Suishuji:

Comparing the two effects, it is obvious that the one with the immersive status bar below looks more coordinated and more beautiful.

2- How to implement an immersive status bar

2.1-Implementation for Android 4.4 and above

Since the immersive status bar setting is only available after Android 4.4, we need to adapt to systems above Android 4.4. There are two ways to implement the immersive status bar in Android 4.4, one is to set it in the resource file, and the other is to set it in the code.

2.1.1-Set the immersive status bar in the resource file

First, we need to modify values/styles.xml and add an empty style that inherits from BaseTheme.

Then add the following code to the styles.xml file in the values-v19 directory (if there is no such file in the project, create one. The resource files in this directory will be read in systems above 4.4):

Then set the App theme to AppTheme. Note: The android:windowTranslucentStatus attribute was introduced in v19.

2.1.2-Set in code

It is more convenient to implement in code. We only need to add a FLAG TRANSLUCENT STATUS flag in BaseActivity.

After setting up through the above two methods, the effect diagram is as follows:

We will find that only through the above settings, the Toolbar will be pushed into the status bar. Usually people will think of using the fitsSystemWindows property to solve this problem.

fitSystemWindows Official description: Boolean internal attribute to adjust view layout based on system windows such as the status bar. If true, adjusts the padding of this view to leave space for the system windows. Will only take effect if this view is in a non-embedded activity. Simple description: The purpose of this attribute is to allow the view to adjust its layout according to system windows (such as the status bar). If the value is true, the view's padding property will be adjusted to leave space for system windows (that is, a top padding equal to the height of the status bar will be added to the view).

Let's try to set the fitsSystemWindows property of Toolbar to true. The layout code is as follows:

The comparison of the above code on Android 4.4 and Android 5.0+ is as follows:

From the comparison chart above, we can see that the status bar is fully transparent on Android 4.4, while it is semi-transparent on Android 5.0+.

Note: On some 4.4 systems, the status bar is not completely transparent, but gradient.

2.2-Implementation for Android 5.0 and above

The immersive status bar effect has been achieved above, but if it is run on a machine with Android 5.0 or above, you will find that the status bar of most phones will be translucent.

Some apps have this semi-transparent status bar effect on Android 5.0 and above, such as QQ. However, some products and designs want to unify the style and achieve a fully transparent status bar. So what can we do? Since Android 5.0, we have provided an API to set the status bar color, so we can set the color of the status bar ourselves.

After adding the above code, run it on Android 5.0+ to see the effect. The status bar has become completely transparent, which is the same as the effect of Android 4.4 in the above picture. I will not attach the picture here.

2.3-Set the status bar font color on Android 6.0 and above

The default font color of the status bar of most mobile phones is white. If the color of the Toolbar or the interface header is lighter, the white text on the status bar is not very clear. After Android 6.0, we can use code to set the color of the status bar font to black. The code is as follows:

3- Pitfalls

I thought the immersive status bar had been perfectly implemented above, but I didn't expect to find a series of pitfalls during testing.

3.1- Toolbar is pushed up when soft keyboard pops up

If there is an EditText or other input box in the interface, you will find that when the software disk pops up, the contents in the Toolbar are pushed up, as shown in the following figure:

Why is this? After research, it was found that it was the fitsSystemWindows attribute that caused the problem. If a View sets fitsSystemWindows=true, this View will be pushed up by the software disk. Therefore, fitsSystemWindows cannot be used indiscriminately, as there will be unexpected pitfalls. Can we not use fitsSystemWindows? Of course we can. As mentioned earlier, the function of fitsSystemWindows=true is to add padding to the View with a value equal to the height of the status bar, so why don't we manually add padding to the Toolbar? We remove the fitsSystemWindows attribute on the Toolbar and set the Toolbar's padding. The code is as follows:

Remove the fitsSystemWindows attribute of Toolbar and add the above code, the Toolbar will be normal when the soft keyboard pops up. Currently, the Android project of Suishouji uses code to add padding instead of the fitsSystemWindows attribute.

3.2- When the soft keyboard pops up, the input boxes such as EditText will be covered by the software disk

In the example picture above where the Toolbar is pushed up by the software disk, we will find another problem, that is, when the soft keyboard pops up, the EditText does not pop up but is covered by the soft keyboard.

It is said above that after adding the fitsSystemWindows attribute to the Toolbar, it will be pushed up by the soft keyboard. So, can we add a fitsSystemWindows attribute to the input box to solve the problem of the input box being covered? Give it a try!

After trying it, I found that it worked, but the height of the input box changed. In fact, the padding of the input box increased the height of the status bar. Obviously, this is not a good solution. Later, I found a solution on stackoverflow: Solution to FLAG TRANSLUCENT STATUS causing the input box to be covered by the soft keyboard

We made some adjustments to it, the code is as follows:

Add the above class, and then add the following code after setContentView in the onCreate method of Activity:

Then run it, the input box can be pushed up normally, and the layout of the input box is not affected.

The principle of this solution is to set a listener for the root layout of the interface. When the size of the interface changes, such as when the keyboard pops up, reset the height of the root layout and then call requestLayout to redraw the interface.

Currently, Android version of SwiftNote uses this solution, and no other problems have been found so far.

3.3-Huawei EMUI3.1 Pitfalls

If you run the above immersive code on a phone with EMUI 3.1 system (such as Huawei Honor 7), you will find that there is no immersive effect at all. The status bar is transparent and displays the color on the desktop, as shown below:

After verification, it turned out to be the problem of EMUI3.1 system. Many apps also had immersive effects in EMUI3.0, but they no longer had the effect in EMUI3.1. If there was no immersive effect in EMUI3.1, it would be fine if it was black like before 4.4, but the transparent desktop color was really ugly. Later, I found that removing the following code can make it have an immersive effect.

The effect is as follows:

However, its status bar is not completely transparent, but gradient like some 4.4 systems, but it is better than showing the desktop color. Here we add a judgment, if it is not EMUI3.1 system, call clearFlags to clear FLAG TRANSLUCENT STATUS. The specific code is as follows:

3.4-CoordinatorLayout+AppBarLayout scrolling hides the navigation bar and encounters the pit of immersive status bar

This pitfall is mainly encountered when meeting financial management headlines.

Requirement background: The headline function needs to implement a two-level TabLayout navigation. The first level is the Toolbar (headlines, products, and discoveries), and the second level is the TabLayout for switching between the various columns in the headlines. The effect that needs to be achieved is that in the headline fragment, sliding the post list can hide and display the first-level navigation Toolbar. When the first-level navigation Toolbar is displayed, swiping left and right switches the first-level navigation Tab (i.e. headlines, discoveries, and products). When the first-level navigation Toolbar is hidden by swiping up and scrolling the post list in the headline fragment, swiping left and right switches the second-level navigation Tab (i.e. various columns in the headlines). The effect is shown in the figure below.

To hide and show the Toolbar when scrolling the list, the first thing that comes to mind is CoordinatorLayout+AppBarLayout. Based on the immersive effect already implemented in the project, add and modify the layout in the Activity:

The layout is to add a TabLayout as the primary navigation tab in the Toolbar. Then use a ViewPager to add three Fragments to the ViewPager, namely the headlines, products, and discovery fragments. Among them, the headlines fragment is nested with TabLayout and ViewPager. Based on the immersive implementation, a padding of the status bar height is added to the AppBarLayout in the code. I thought it was done, but I found that after running, after swiping up to hide the AppBarLayout and then pulling down, it will exceed the pull-down range, that is, when pulling down, there will be an extra blank space of the status bar height, the effect is as shown at the top of the figure below:

After continuous attempts and explorations, I found that adding the following flag to the Activity is enough:

Well, good, the sliding problem has been solved. But I was always uneasy and felt there was a pitfall. Later I found out that there was indeed a pitfall. After adding this flag, some Huawei phones with virtual buttons had the problem of virtual buttons blocking the bottom layout. It was verified that this problem only occurred in EMUI3.1 (EMUI3.1 again, I can't complain anymore). Finally, after all the twists and turns, I finally found a way to effectively solve the sliding problem after CoordinatorLayout+AppBarLayout and setting paddingtop for AppBarLayout.

I thought the above solution was perfect without any problems, but I didn't expect there was still a pitfall. Soon after testing, I found a problem in the existing network: when the input box in WebView gets the focus and the soft keyboard pops up, a black block the size of the soft keyboard appears at the bottom layout when exiting the interface. As shown in the following figure:

After investigation, it was found that this problem was caused by the above code. There was no other way but to remove the above code and find another solution to deal with the sliding problem of CoordinatorLayout+AppBarLayout and setting paddingtop for AppBarLayout. Later, it was found that adding the following code in the onCreate method of Activity can perfectly solve this problem.

4- Conclusion

The above are the pitfalls and solutions encountered in the process of implementing the immersive status bar in the Suishouji Android project. After the status bar effect is finally implemented in Suishouji Android, the effect diagram on different models is as follows:

After developing the immersive status bar, I found several pitfalls that need to be paid attention to: 1. Be careful when using fitsSystemWindows=true, there are many pitfalls. For example, when the soft keyboard pops up after the input box in WebView gets the focus, there will be jitter, and which View will be pushed up when the soft keyboard pops up if fitsSystemWindows=true is set; 2. Do not use WindowManager.LayoutParams.FLAG LAYOUT NO_LIMITS, which will cause the virtual keys under the EMUI3.1 system to block the layout.