Implementation method of “immersive” status bar effect above Android 4.4

What is an immersive status bar?

Immersive status bar means that the color of the status bar changes with the color of the software to keep the color of the status bar consistent with that of the software and immerse it! When we open the application, we will no longer feel very ugly because we see the application separated from the black edge of the status bar. Immersive status bar has been reflected in more and more applications because it can bring excellent user experience to user groups.

Implementation principle

After 4.4, the system added the transparent status bar feature WindowManager LayoutParams. FLAG_ TRANSLUCENT_ Once this attribute is added to status, decorview in the layout will automatically fill the status bar. All implementations are based on this feature, which means that the status bar will be empty by default, and then developers can customize the view to fill in this height

Android may also be used in the implementation process: fitsSy@R_502_2354 @Windows = "true", this attribute is very important. Meaning: the view can adjust its layout according to the system window (such as status bar, soft keyboard). If the value is true, it will adjust the paying attribute of the view to sy@R_502_2354 @Make room

Now let's look at the specific implementation

realization

In terms of implementation effect, it can be roughly divided into two types

1. Color the status bar separately

Use this open source library Sy@R_502_2354 @BarTint

Add Android in the root layout of the corresponding page: fitsSy@R_502_2354 @Windows = "true", and the overall large background color cannot be set in the root layout, otherwise the coloring of the status bar will be overwritten

Call the above method to set the specific color (according to the open source library, there is a core class, which can be directly copied to the project)

Here we mainly talk about the specific implementation principle

Through this code, it is easy to see that by dynamically generating a view, the width of the view is match_ Parent, height is the height of the system status bar; Then set a background color for the dynamically generated view; Finally, add the view to the view container of decorviewgroup to see who the view is

Pay attention to the above two notes I added manually. It can be seen that the idea of this approach is to add a view with the same height as the status bar to the root layout decorviewgroup after the status bar is transparent. As for what color you make this view, it depends on your mood.

2. Fill the status bar with the background color of the title bar

Set the status bar to translucent. The problem is that the following content will occupy the status bar.

If we add Android to the root layout of the activity: fitsSy@R_502_2354 @Windows="true"

At this time, the status bar can still be seen and is not occupied. Then the function of this attribute is here.

At this time, we use the height of the status bar to set a padding top distance for the following content (because after the status bar is translucent, the following content will occupy the original status bar, so we can set it to a padding status bar height). After this setting, under the padding of the background of this view, the original status bar height is filled with the same background color, Then it seems like the so-called immersion

To put it bluntly, after the status bar is translucent, fill it appropriately with the following content (because the default translucency will be occupied)

The code is as follows:

Set a padding for this view_ Top, and the padding distance is just the height of the status bar, so the background of the view fills the status bar.

It is worth noting that the height of this title bar must be wrap_ Content, because if it is a specific height and a paddingtop is set, the contents of some title bars will be squeezed out and incomplete.

Therefore, the usual approach is to nest a < FrameLayout / > outside the original title bar, and then set the title bar background to the background color of < FrameLayout / >

summary

That's all for the realization of immersive effect. I hope the content of this article can bring some help to your study or work. If you have any questions, you can also leave a message.