Android immersive status bar, color status bar, transparent status bar, modify status bar colors and transparency

Source: Internet
Author: User
Tags transparent color

First I want to distinguish between the immersive status bar and the color-changing status bar.

immersive status bar refers to the status bar is hidden, after the finger has done the relevant action, the status bar display, such as video player, when playing video is hidden status bar, but when the screen is clicked, the status bar will be displayed, such as Text reader, in the reading time is full screen, Then down or down from the top of the screen, the virtual key and status bar appear, but it is directly covered in the program text, which is called the immersive status bar.
So the status bar that everyone usually says is the same as the navigation bar color, or transparent, refers to the color-changing status bar, or transparent status bar.
For the understanding of these two concepts, we can refer to

V19 (4.4) later began to support the Android:windowtranslucentstatus property, transparent status bar, and V21 (5.0) after the discoloration status bar, you can freely set the status bar color.
With these two new features, we can quickly implement the 4.4 status bar after the same color as the app's navigation bar.

The realization of color-changing navigation bar is mainly through the theme inside the styles:

<resources> <stylename="Apptheme.base"Parent="Theme.AppCompat.Light"> <Item name="Windowactionbar">false</Item> <Item name="Windownotitle">true</Item> </style> <stylename="Baseapptheme"Parent="Apptheme.base"> <!--Customize your theme here.<Item name="Colorprimary"> @color/colorprimary</Item> <Item name="Colorprimarydark"> @color/colorprimarydark</Item> <Item name="Coloraccent"> @color/coloraccent</Item> </style> <!--Base application theme.<stylename="Apptheme"Parent="Baseapptheme"/></resources>

First, define a most basic theme in "Values\styles.xml", Apptheme.base, this topic inherits from the Appcompat.light theme, because this example uses the toolbar (Google has proposed to replace Actionbar with toolbar), so the main purpose of this topic is to hide the actionbar that comes with it. and the settings do not display the title.

name="AppTheme.Base" parent="Theme.AppCompat.Light">    <itemname="windowActionBar">false</item>    <itemname="windowNoTitle">true</item></style>

Next, define the theme Baseapptheme, which inherits from the Apptheme.base theme defined above, which defines three colors, specifying the color of the status bar, toolbar, and the key controls in the page (the color is defined by itself).

<style name  = " Baseapptheme " parent=" apptheme.base " > < item  name  = "colorprimary"  > @color/colorprimary </item  > <! --status bar-->  <item  name  =" Colorprimarydark " > @color/colorprimarydark</ item  > <! --toolbar-->  <item  name  =" coloraccent " > @color/coloraccent</item  > <! --focus-->  </style>  

For the AppCompat theme, the meaning of each color attribute, you can refer to

Then define a apptheme that inherits from the Baseapptheme,

<style name="AppTheme" parent="BaseAppTheme"/>

set the theme under Application tab in Androidmanifest.xmlandroid:theme="@style/AppTheme"

To this, for the system below 4.4, will use the Apptheme theme in Values\styles.xml, then in the 4.4 and 5.0 of these two systems, we will do the following processing.

4.4: New "Values-v19\styles.xml"

Within the definition of the apptheme that applies to the 4.4 system, the transparent status bar is presented in the 4.4 system, so here we define a apptheme inherited from Baseapptheme, where the code is as follows: The transparent status bar is implemented.

name="AppTheme" parent="BaseAppTheme">    <itemname="android:windowTranslucentStatus">true</item></style>

5.0: New "Values-v21\styles.xml"

The inside definition applies to the Apptheme of the 5.0 system, the color-changing status bar presented in the 5.0 system, so here we simply define a apptheme that inherits the Baseapptheme code as follows:

<style name="AppTheme" parent="BaseAppTheme"/>

Note in the layout file to set the following properties , according to its literal meaning, to understand, whether to adapt to the system window, when set to true, to adapt to the system window, layout will consider the existence of the status bar, if set to false, regardless of the presence of the status bar, full-screen display, The status bar appears on the top of the layout, which can be seen below.
Android:fitssystemwindows= "true"

set to True:

set to False:

After completing the above setup, you can achieve the purpose of customizing the status bar, navigation bar and other colors above the 4.4 system.

Status bar Transparency

The above research is the status bar and navigation bar color settings, then how to implement the shown, the status bar, navigation bar transparent, background image full screen display it?
According to reason, since you can set the color of the navigation bar, then I directly set the color to transparent color, is it possible?
The answer is, positive solution ~

However, there are some special cases to be dealt with.

First, we set the colors in styles to be transparent, and then, under the main page root layout, setting a background map and setting the android:fitssystemwindows= "true" property

<stylename="Baseapptheme"Parent="Apptheme.base"> <!--Customize your theme here.<Item name="Colorprimary"> @color/transparence</Item> <!--Status bar--<Item name="Colorprimarydark"> @color/transparence</Item> <!--Toolbar<Item name="Coloraccent"> @color/coloraccent</Item> <!--Key--</style>

The result of the operation is that on the 4.4 system, completely normal display, and on 5.0, toolbar normal display of transparent color, but the status bar shows a gray transparent color
4.4 System:

5.0 System:

The reason should be that the 4.4 system is supported by the transparent status bar, so only need to set the status bar color to transparent, you can reach the effect.
and 5.0 support is color status bar, get the effect and we expect different, special do the following:

Set in code to determine when the SDK is greater than or equal to 5.0, execute the following code

if (Build. VERSION. SDK_int >= Build. VERSION_codes. LOLLIPOP) {window window = GetWindow ();Window. Clearflags(WindowManager. Layoutparams. FLAG_translucent_status);Window. Getdecorview(). Setsystemuivisibility(View. SYSTEM_ui_flag_layout_fullscreen | View. SYSTEM_ui_flag_layout_stable);Window. Addflags(WindowManager. Layoutparams. FLAG_draws_system_bar_backgrounds);Window. Setstatusbarcolor(Color. TRANSPARENT);}

after running, the transparent effect can be achieved on both 4.4 and 5.0 systems, as follows:

SOURCE download

Android immersive status bar, color status bar, transparent status bar, modify status bar colors and transparency

Related Article

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: 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.