8.Android System Status bar immersive/transparent solution

Source: Internet
Author: User

reprint: http://www.jianshu.com/p/34a8b40b9308Objective

Online already have a lot of solutions to the system status bar, this article will not have any novel solution, are I through their own experiments, statistics refined out of a relatively reliable set of solutions .
If it is Android Daniel can ignore this article, afraid to let you smile. Only small white, help small white to reduce the time of groping.

About terminology

There are many debates online:

Your status bar is a chameleon status bar, not an immersive one.
This should be an immersive status bar, the system bar and the Actionbar color is set to the same

I just want to say to your sister's, Lao Tzu as long as their app's status bar and theme color consistent on the line, define so many terms, let me wait for the small white love to what?
The groove is in the groove, but I still have to try to understand how these terms come about, quoting a passage here:

    1. Immersive full-screen mode
      Hiding the status bar makes the screen fullscreen, allowing the activity to receive all touch events (the entire screen).
    2. Transparent system Status bar
      The transparent system status bar allows the layout to break behind the system bar, and you must enable the Fitssystemwindows property to adjust the layout to avoid being overwritten by the system bar.

Therefore, I understand this:

Immersive is not the hidden status bar, the status bar is missing? Is this the app full-screen mode? WTF?

and the transparent status bar is the app's content layout can be extended to the system status bar? Here's the question of why you can extend the content layout to the System status bar in the presence of the system status bar. Well, this should be well understood, that is, the z coordinate system, the State bar is covered in the content layout, And it's transparent.

It seems that the so-called transparent system status bar is what this dish wants, no matter, now began to test, as to the concept of understanding right, tube him? What the hell is that supposed to be called, then I'll call the adaptive status bar , OK?

Pre-conditions

Make the system status bar color change with app theme colors This design, no doubt, is also learning from iOS: Introduced from android4.4, and improved in 5.0. Therefore, this feature can only be used in android4.4 above the mobile phone, can not be fully adapted. Remember Stormzhang (seems to be) once said:

As an Android programmer, what could be more tragic than making iOS-style apps?

Solutions in both cases:
    1. Using toolbar
      This kind of solution is relatively simple, the individual likes this kind of plan, the dish although the dish, but likes to follow the trend. Toolbar too good,
    2. Do not use toolbar
1. Using the toolbar solution

This method refers to the toolbar adaptation scheme of the Mint app.

The basic principle is:
Theme Add Style: <item name= "Android:windowtranslucentstatus" > True </item> after Content layouts that contain toolbar can be extended to the system status bar, the status bar is overwritten on toolbar, and if you use android:fitssystemwindows= "true"at this point, you can adjust the content layout ( The estimate is also added padding on the root layout) to the original location. However, the solution above is to add a padding-top= "25DP"to toolbar, This allows the system status bar color to be consistent with the color of the toolbar. You can refer to the program link above for the Mint app.

Briefly describe the next steps (just a brief description, please refer to the Mint app link above for more questions):

  1. Introduce V7 packages and add toolbar to the layout
    compile ‘com.android.support:appcompat-v7:22.2.1’
  2. To set up transparency in your code:
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes(); local LayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);}
    Of course, you can also add style to the theme file:<item name= "Android:windowtranslucentstatus" >true</item>, the same effect, But the gods say that the settings in the style file do not take effect in some models. OK, everybody, just set it up in the code.
  3. Add Padding-top,toolbar code to toolbar as follows
    <Android. Support. v7. Widgets. Toolbarandroid:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height= "wrap_ Content "android:paddingtop=" @dimen/toolbar_padding_top "app:popuptheme=" @style/ ThemeOverlay.AppCompat.Light "App:theme=" @style/themeoverlay.appcompat.dark.actionbar "android:background= "#30469b" > <textview android:layout_gravity="center" android:layout_width="Wrap_content" android:layout_height= "wrap_content" android:textsize="20sp" android:text="@string/app_name"/> </android.support.v7.widget.Toolbar>            
    4. Whereandroid:paddingtop= "@dimen/toolbar_padding_top"To set 0DP in the styles file in values, set it to 25DP in Values-v19 's styles, for the most part.

This can achieve our goal, if only this is just, according to do it, the key is that this dish is like to keep up with the trend, the use of MD-style drawerlayout+navigationview, in android4.4 's mobile phone, will change this:


The effect on the android4.4


Obviously, Drawerlayout is not used to be extended to the system status bar, but in the android5.0 above the effect is still possible, which makes me very strange, can only be attributed to the 5.0 optimization


The effect on the android5.0


After a variety of toss finally think up, you can put the characteristics of fitssystemwindows drawerlayout on the test, and finally found that can, eventually set Windowtranslucentstatus code to adjust the following:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {    WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();        local LayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);    if(Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP){ //将侧边栏顶部延伸至status bar mDrawerLayout.setFitsSystemWindows(true); //将主页面顶部延伸至status bar;虽默认为false,但经测试,DrawerLayout需显示设置 mDrawerLayout.setClipToPadding(false); }}

The final android4.4 can also be displayed as normal:


android4.4 effect after correction 2. Solutions that do not use toolbar

When not using toolbar, but when Actionbar, because Actionbar is not good to customize, so can not use the above method, can only use other methods, here the scheme is mainly referred to here: Translucent System Bar Best Practices
This simple book looks at the dizzy of the dish and looks closely, in fact, based on a principle:
Regardless of whether or not actionbar, the background color of the content layout is set to the theme color, and then Actionbar, the background color of the Actionbar and the content layout is set to the theme color, and then the root layout of each content layout is set Fitssystemwindows= "true" to make adjustments, feeling super troublesome there?

Don't say much, brief steps:

  1. To set up transparency in your code, follow the steps above
  2. set the background color for the root layout of the content layout as the theme color, set fitssystemwindows= "true"
    linearlayout xmlns:android= " Http://schemas.android.com/apk/res/android "android:layout_width=  "match_parent" android:layout_height=  "match_parent" android:background=  "@color/colorprimary" android:fitssystemwindows= "true" android:orientation= "vertical"               
  3. Under Content layout, set a layer of content layout, set the background color to white (or other color):
    <LinearLayout    android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/c_light_white" android:gravity="center" android:orientation="vertical">

At this point, this solution is also done, to see the effect:


The effect on the android4.4

It can be seen that such a scenario is generally feasible, but there are three problems:

    1. If the use of Drawerlayout+navigationview,actionbar will be covered on the sidebar (for example), the solution is not found, but I want to say you have used Drawerlayout+navigationview, Why not toolbar, so this problem should not be a problem, but also can use other side bar implementation way, you can try the friend
    2. This scheme in each root layout should be set fitssystemwindows= "true" to adjust, of course, the above also has an optimization scheme, can still feel very troublesome,
    3. Add a layer of layout to each root layout to cover the background theme color of the root layout

Therefore, such a scheme is certainly not the right choice.

Summarize

This article is mainly to consider the use of the title bar (Actionbar/toolbar) in the case of the scheme, of course you can also customize the title bar, or do not use the title bar, in fact, can be based on the same principle:

Under the condition of transparency of the status bar, adjust the padding-top of the top view to achieve the purpose of the status bar adaptive integration.

There are many other solutions on the web, such as:

    1. Using the Open Source Library Systembartint, this library is also very good, can dynamically change the system status bar color, but the author has been 2 years without maintenance, and now the technical update iteration so fast, the ghost know this library will not have any problems, so you can abandon the use of
    2. If you are not afraid of trouble, you can also new a height and status bar as high as the view, inserted into the content layout of the above, but, think all feel trouble, I also too lazy to try

8.Android System Status bar immersive/transparent solution

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.