[Android] Design and implementation of immersive status bar in APP

1. Introduction to the immersive status bar

After android4.4, api provides the realization of transparent status bar and the realization of immersive mode. According to the official android development website, there is actually no immersive status bar, only Tranlucent Bar (transparent status bar) and Immersive Mode (immersive mode). The following is an excerpt from the official website https://developer.android.com/training /system-ui/immersive
Insert picture description here

explanation:
1. Immersive full-screen mode
Hide the status bar, make the screen full-screen, and let Activity receive all touch events (of the entire screen);
2. Make the system bar
transparent, make the layout invade the system bar After that, you must start the fitSystemWindows property to adjust the layout, so you don’t pay attention to being covered by the system bar; the
following quoted a picture on the Internet
Insert picture description here
can see from the above picture, in fact, in most cases, what we require is a transparent status bar, not Immersive mode.

Second, the realization method of the transparent status bar

2.1 Use style

The following methods can be used in the style after value-19

values-v19/style.xml
<style name="ImageTranslucentTheme" parent="AppTheme">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

values-v21/style.xml
     <!--5.0以后需要把颜色设置为透明，否则导航栏默认浅灰色-->
     <style name="ImageTranslucentTheme" parent="Theme.AppComat.Light.DarkActionBar">
         <item name="android:windowTranslucentStatus">false</item>
         <item name="android:windowTranslucentNavigation">true</item>
         <item name="android:statusBarColor">@android:color/transparent</item>
     </style>

It should be noted that after adding a new theme, you must set the theme with the same name in the styles under the default values at least, so as to ensure that the device running under 4.4 will not crash. Then add android:fitSystemWindows="true" to the layout of the activity.

2.2 After android5.0, it can be achieved by setting the color of the status bar

This method is much simpler than the previous method, but it is only suitable for applications with a solid color navigation bar or status bar, otherwise you still need to use the above scheme.
The following is an introduction to the properties to be modified.
Insert picture description here
If the application needs a toolbar, statusbar, and a similar immersive mode, then after 5.0, you can use the method of directly modifying the status bar and toolbar color, as shown below:

     <style name="AppTheme" parent="android:Theme.Materail.Light">
         <item name="android:colorPrimary">@color/colorPrimary</item>
         <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
         <item name="android:colorAccent">@color/colorAccent</item>
     </style>

Note that this method is not really implemented, but is simulated by changing the color.

2.3 Code implementation

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (Build.VERSION.SDK_INT >= 21) {
    
    
	View decorView - getWindow().getDectorView();
	int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
			| View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
	decorView.setSystemUiVisibility(option);
	getWindow().setStatusBarColor(Color.TRANSPARENT);
}
ActionBar actionBar - getSupportActionBar();
actionBar.hide();

Three, immersive mode

In fact, the so-called immersive mode is the full-screen mode. Here is how to implement it.

    注意：该方法确实可以做到完全沉浸式，即时有虚拟导航栏。但是要注意的是，有的情况下，可能不能隐藏虚拟导航栏，所以就需要把View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION去掉，这样，虚拟导航栏还在，但是状态栏是隐藏的。

    类似浏览器的需求，全频模式和视频的全屏播放，全屏模式在有导航栏的手机上需要显示导航栏。但是全屏播放需要隐藏导航栏，所以就需要在两个模式切换的时候，重新调用设置的方法，其中的却别就是是否要隐藏虚拟导航栏。

super.onWindowFocusChanged(hasFocus);
if (hasFocus && Build.VERSION.SDK_INT >= 19){
    
    
	View decorView = getWindow().getDecorView();
	decorView.setSystemUiVisibility(
		View.SYSTEM_UI_FLAG_LAYOUT_STABLE
		| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
		| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
		| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
		| View.SYSTEM_UI_FLAG_FULLSCREEN
		| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
}

Fourth, the transparent status bar stepped on the pit

If you implement a transparent status bar in the code, it may be that the style set at the beginning is not transparent, and there will be a jitter problem on some phones, because the entire layout area has changed after the page is loaded. Add in code

View.SYSTEM_UI_FLAG_LAYOUT_STABLE

Will get better,