Android immersive status bar implementation example

More and more apps appear in the application market. The immersive status bar is designed (as shown in the figure below). The status bar and navigation bar have the same color. Android started to support this effect in 4.4, but under 4.4, the status bar is just a black box and can't be controlled. At the same time, the support for this effect is different between versions 4.4 and 5.0 and above. Therefore, to achieve this effect, 4.4 can be classified as one class and 5.0 and above can be classified as one class. Next, we will implement the following effects on 4.4 and 5.0 and above step by step.

Navigation bar problem

In Android, there are two commonly used implementations of the top navigation bar, one through the toolbar and the other through the custom view. Both methods have their own advantages and disadvantages. Toolbar is an official specification, which is more convenient for developers to use, but it has poor scalability. It can not achieve some special display effects. Through the custom method, it can support more display effects, but we need to write more code. The two methods are also different in realizing status bar immersion.

Remove the title

The default theme of the toolbar will have a title. When we use the toolbar without removing the title, the application will crash and report the following errors.

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

Of course, we can also remove the title dynamically through the code, but when our topic inherits from theme. Appcompat as the parent class, the title cannot be removed through the code.

Customize navigation bar

When we do not set the property of windownotitle, there is a title on the navigation bar. Obviously, it is contrary to the immersion of the navigation bar, so the immersion of the navigation bar is realized,

< item name = "windowsnotitle" > true < / item > this configuration is essential.

Set status bar transparency

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

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

This attribute can only be configured on versions 4.4 and above, but cannot be used on earlier versions. After configuring this attribute, the execution effect is shown in the following figure.

Solve the problem of moving the navigation bar up

At this time, the toolbar is moved up as a whole, resulting in some of its functions under the status bar, including the contents of the navigation bar. Obviously, this does not meet our initial requirements. How to solve this problem? By adding the fitsystemwindows attribute to the toolbar, we can make the upper part of the toolbar empty, and make the content part of the toolbar separate from the status bar.

Get the effect we finally want

The custom navigation bar is similar to its implementation.

Fitssystemwindows properties

The previous settings for the toolbar are the fitsystemwindows property added in the toolbar. What happens when we add its property to the outermost layout where the toolbar is located?

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

So how does fitsystemwindows work? Through the above experiments, it is not difficult to find that this attribute plays a key role in the control of the immersion status bar.

Next, an experiment is conducted to verify the function of this attribute. In the layout where the toolbar is located, a button is added at the bottom of the layout

What happens when we set this property to the button?

Through comparison, it is obvious that the view with fitssystemwindows property set has a padding set on its upper part. According to the previous experiments, we can know that when we set the window status bar to be transparent, the whole content view will move up one height of the status bar, and is the size of the padding currently added to the view the same as its height?

Get 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 set view. Therefore, when we immerse the navigation bar, setting the transparency of the window status bar will move the view up as a whole. With the help of the function of fitsystemwindows property, set a padding with the same height as the status bar for the top view in the view, So that the navigation bar will not be pushed into the status bar.

When we set this property for multiple views in a view, we find that only the first view that sets this property will work. On the view layout, the first view from top to bottom will work. At the hierarchy level, the top-level view plays its role first. Therefore, its functions are summarized as follows:

5.0 and above

So far, we can perfectly realize the immersion of a status bar. The above implementation is on Android version 4.4. There will be a black gradient shadow at the top of the view, and the display effect on the 5.0 device is as follows. There will be a shadow on the status bar. Of course, different manufacturers also have their own optimization. For example, Meizu does not have a shadow on 4.4.

For 5.0 and above, the official provides the corresponding API for the color control of the status bar. We can control the color of the status bar through code to achieve the following effects.

Implementation code

It can be seen that in the implementation of 5.0 and above, we can directly control through code without setting the transparent status bar and fitsystemwindows attribute. However, in order to adapt to version 4.4, it is recommended to implement it in the previous way in the code. If we want to implement shadow removal in version 5.0 and above, we can manually control it in the code.

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.