Shulou(Shulou.com)05/31 Report--

Most people don't understand the knowledge points of this article "How to realize immersive status bar effect in Android", so Xiaobian summarizes the following contents for everyone. The contents are detailed, the steps are clear, and they have certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this article "How to realize immersive status bar effect in Android".

Navigation bar issues

In Android, the top navigation bar is currently commonly used in two ways, one is through the Toolbar, and the other is through the custom View. There are pros and cons to both approaches. Toolbar is an official specification, which is more convenient for developers to use, but the extensibility is poor. For some special display effects, it cannot be realized, and through custom methods, more display effects can be supported, but we need to write more code. There are also differences between the two approaches in achieving status bar immersion.

Remove Title

Toolbar default theme will have a title, when we use Toolbar, without removing the title, the application will crash, reporting the error shown below.

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

true

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

Custom navigation bar

When we do not set the windowNoTitle attribute, there is title above the navigation bar. Obviously it's against the immersion we're trying to achieve for the navigation bar, so to achieve immersion for the navigation bar,

true This configuration is essential.

Set Status Bar Transparent

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

At this point, we found that the status bar is still black, and there is no immersion, we need to set the status bar to transparent.

true

This property can only be configured on versions 4.4 and later, but it is not available on earlier versions. After configuring this attribute, the execution effect is as shown in the following figure.

Fix navigation bar up problem

At this time, the Toolbar was moved up as a whole, causing some of its functions to enter the status bar, including the navigation bar content to the status bar position, obviously this is not in line with our initial requirements. How to solve this problem? We add the fitSystemWindows attribute to the Toolbar, which makes the upper part of the toolbar empty by a height, so that the Toolbar content is partially separated from the status bar.

to get what we want in the end.

Custom navigation bars are implemented similarly.

fitsSystemWindows Properties

The previous setting for Toolbar is the fitSystemWindows property added to Toolbar, so what happens when we add its property to the outermost layout where Toolbar is located?

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

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 through an experiment to verify the role played by this property, in the Toolbar layout, at the bottom of the layout to add a Button.

What happens when we set this property to the button?

It is obvious by comparison that a View with the fitsSystemWindows property set has a padding set at the top. According to the experiments done before, we can know that when we set the window status bar transparent, the entire content view will move up by the height of the status bar, and the current size of the padding added to the View is not 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+"");

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 View set, so when we immerse the navigation bar, setting the transparency of the window status bar will make the view move up as a whole, and with the fitSystemWindows property, set a padding for the topmost View in the view with the same height as the status bar, so that the navigation bar will not be pushed into the status bar.

When we set this property in multiple Views in a view, we find that only *** Views with this property set will work, and *** Views from top to bottom will work on the view layout. * ** Therefore, its functions can be summarized as:

Add a toppadding with the same height as the status bar for the View that sets this property

When more than one View is set to this property, only the topmost View on the layout works.

5.0 and above

So far, we can *** implement a status bar immersion, the above implementation is on Android 4.4 version, in the top of the view, there will be a black gradient shadow, and on the 5.0 device display effect as shown below, in the status bar will have a shadow. Of course, different manufacturers also have their own optimizations for this, such as Meizu in 4.4 is not a shadow.

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

if(Build.VERSION.SDK_INT >= 21) { Window window = getWindow(); //Unset transparent status bar so that ContentView content is no longer immersed in status bar window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); //You need to set this flag 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)); } The above is the content of this article about "How to achieve immersive status bar effect in Android". I believe everyone has a certain understanding. I hope the content shared by Xiaobian will help everyone. If you want to know more relevant knowledge content, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.