Example of Android Immersive Status Bar Implementation

The design of immersive status bars in the application market is increasingly common (as shown in the figure below), with the status bar and navigation bar having the same color. Android in4.4began to support this effect, and}}4.4below, the status bar is just a black frame and cannot be controlled. At the same time,4.4And5.0 and above versions have different support for this effect, so to achieve this effect, you can use4.4are grouped together,5.0 and above are grouped together. Next, we will step by step implement this effect in4.4And5.0 and above to achieve the effect shown below.

Navigation bar issues

In Android, there are currently two commonly used ways to implement the top navigation bar: one is through Toolbar, and the other is through the way of custom View. Both methods have their advantages and disadvantages. Toolbar is the official specification, which is more convenient for developers to use, but has poor scalability and cannot achieve some special display effects. On the other hand, by using the custom method, more display effects can be supported, but more code needs to be written. Both methods also have differences in achieving status bar immersion.

Remove Title

The default theme of Toolbar has a title. When we use Toolbar without removing the title, the application will crash and report the following error.

Therefore, when using Toolbar, we need to add the following attribute configuration to the style

<item name="windowNoTitle">true</item>

Of course, we can also remove the title dynamically through code, but when our theme inherits from Theme.AppCompat, it is not possible to remove the title through code.

Custom navigation bar

When we have not set the windowNoTitle attribute, there is a title above the navigation bar. It is obviously contrary to our goal of achieving immersive navigation bars, so to achieve immersive navigation bars,

<item name="windowNoTitle">true</item>This configuration is indispensable.

Set the status bar to transparent

After removing the title, can we achieve the effect mentioned above?

At this time, we find that the status bar is still black and not immersed, so we need to set the status bar to transparent.

<item name="android:windowTranslucentStatus">true</item>

This property only works when4.4And higher than4.4This property can be configured in terms of version, but it cannot be used in lower versions. After configuring this property, the execution effect is as shown in the figure below.

Solve the problem of the navigation bar being moved up

At this time, the Toolbar has been moved up as a whole, causing some of its functions to enter below the status bar, including the content of the navigation bar, which has also moved to the position within the status bar. It is obviously not in line with our initial requirements. How can we solve this problem? By adding the fitSystemWindows attribute to the Toolbar, we can leave a height at the top of the toolbar, allowing the content part of the Toolbar to be separated from the status bar.

 <android.support.v7.widget.Toolbar
    android:id="@"+id/toolbar"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
  </android.support.v7.widget.Toolbar>

Get the final effect we want to achieve

Custom navigation bars have a similar implementation.

fitsSystemWindows attribute

The previous settings for Toolbar were the addition of the fitSystemWindows attribute in the Toolbar. So, what will happen when we add this attribute to the outermost layout where the Toolbar is located?

<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@"+id/activity_toolbar"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true"
tools:context="com.example.netease.toolbardemo.activity.ToolbarActivity">
  <android.support.v7.widget.Toolbar
    android:id="@"+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
  </android.support.v7.widget.Toolbar>
</RelativeLayout>

After execution, you can see the same effect as before when the status bar transparency was not set.

So, how does the fitSystemWindows work? From the above experiment, it is not difficult to find that this attribute plays a very critical role in controlling the immersive status bar.

Next, let's conduct an experiment to verify the role of this attribute. Add a Button at the bottom of the layout where the Toolbar is located.

<android.support.v7.widget.Toolbar
    android:id="@"+id/toolbar"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
  </android.support.v7.widget.Toolbar>
  <Button
    android:text="Test"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color"/colorAccent"
    android:layout_alignParentBottom="true"/>

What will happen when we set this attribute to the button?

<Button
    android:text="Test"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color"/colorAccent"
    android:layout_alignParentBottom="true"/>

By comparison, it can be clearly seen that a padding is set above the view that has the fitsSystemWindows property set. According to the experiments done earlier, we know that when the window status bar is set to transparent, the entire content view moves up by the height of the status bar, and whether the size of the padding added to the current view is the same as its height?

 Button btn = (Button) findViewById(R.id.test_btn);
 Log.i("padding", btn.getPaddingTop()+"
 Rect frame = new Rect();
 getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
 Log.i("height", frame.top+"

By getting the padding height of the button and the height of the status bar, we can get the following log.

Through experiments, we can conclude that the fitSystemWindows property will add a top padding to the view set, so when we implement the immersive navigation bar, setting the window status bar to transparent will make the entire view move up, and with the function of the fitSystemWindows property, set a padding equal to the height of the status bar for the topmost view in the view, so that the navigation bar will not be pushed into the status bar.

When we set this property on multiple views in a view, we find that only the first view that sets this property takes effect. In the view layout, the first view from top to bottom has the effect. In terms of hierarchy, it is the top-level view that takes effect first. Therefore, its function can be summarized as:

• Add a top padding equal to the height of the status bar to the view that sets this property
• When multiple views in the view are set with this property, only the topmost view in the layout takes effect

5.0 and above

By this point, we can perfectly achieve an immersive status bar. The above implementation is on Android 4.4version, at the top of the view, there will be a black gradient shadow, and in5on .0 devices is as shown below, the entire status bar will have a shadow. Of course, different manufacturers also have their own optimizations, such as Meizu in4.4it does not have a shadow.

For5.0 and above, the official API for controlling the status bar color is provided, allowing us to control the color of the status bar through code to achieve the following effect.

Implementation code

 if(Build.VERSION.SDK_INT >= 21) {
      Window window = getWindow();
      //Cancel the transparent status bar setting, so that the ContentView content is no longer immersed in the status bar
      window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
      //You need to set this flag to be able to call setStatusBarColor to set the status bar color
      window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
      //Set status bar color
      window.setStatusBarColor(getResources().getColor(R.color.yx_red));
    }

From this we can see that when we are5Version 0 and above, you can omit the status bar transparency settings and the fitSystemWindows attribute settings, and directly control it through the code, but in order to adapt4.4Version, it is recommended to implement it in the code in the same way as before, if you want to5To implement the shadow removal in version 0 and higher, and then manually control it in the code.

That's all for this article. I hope it will be helpful to everyone's learning and also hope that everyone will support the Yell Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)