Android Best Practices Systembar status bar full version adaptation scheme

Preface

Since the MD design specification came out, the more concerned about the system status bar adaptation, because MD after 5.0 to change the system status bar color can be configured by the developer, and before 5.0 can not specify the color of the status bar, so this is to say the use of toolbar on the system status bar adaptation strategy

the adaptation effect of mainstream apps

Hand q In this respect is very good, the title bar and the status bar together, and the iOS effect is identical, as follows:

4.4, 5.0+

4.4 The following versions

4.4 The following version is the system default black status bar, because under 4.4 there is no way to change the status bar and configuration.

With regard to the adaptation of hand Q, it retains a consistent UI effect on over 4.4 of all versions, even above 5.0, discarding the MD-style status bar effect.
While the status bar is more than 5.0 began to adapt to the MD style, but to 5.0 the following status bar is not adapted, the status bar is the default black system, the following is the effect on the 5.0+ system:

full version adaptation with toolbar

Depending on the effect of the above adaptation, we can fit this:

4.4 The following system uses the system default status bar, on the 4.4 system, the status bar and the title bar together, at more than 5.0 of the system has two options:
1. Continue to use the effect on 4.4, like the hand Q
2. Fit MD Style

The effects of these two adaptations are as follows:

The first type: 4.4 On the following systems

4.4 On the system:

on the 5.0+ system

The second type: 4.4 On the following systems:

4.4 On the system:

on the 5.0+ system

Specific Implementation First Kind

The main is in the style file for more than 4.4 of the set transparent status bar Windowtranslucentstatus to True, or can also be set in code, define a baseactivity:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {            // Translucent status bar            getWindow().setFlags(                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);        }

Then, in the layout file, set the toolbar to:

android:fitsSystemWindows="true"android:minHeight="?attr/actionBarSize"

This is very important, and it is generally possible to put the toolbar layout as an arrangement file for subsequent reuse.

1. Values:

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

2, values-v19:

    name="AppTheme.NoActionBar">        <itemname="windowActionBar">false</item>        <itemname="windowNoTitle">true</item>        <itemname="android:windowTranslucentStatus">true</item>    </style>

3, Values-v21:

<stylename="Apptheme.noactionbar"> <Item name="Windowactionbar">false</Item> <Item name="Windownotitle">true</Item> <Item name="Android:windowdrawssystembarbackgrounds">true</Item> <Item name="Android:statusbarcolor"> @android: color/transparent</Item> <Item name="Android:windowtranslucentstatus">true</Item> </style>

4 layout:

ImageView is Recyclerview header added

<android. Support. Design. Widgets. CoordinatorlayoutXmlns:android="Http://schemas.android.com/apk/res/android"xmlns:app="Http://schemas.android.com/apk/res-auto"Android:layout_width="Match_parent"android:layout_height="Match_parent"> <android. Support. V7. Widgets. RecyclerviewAndroid:id="@+id/recycle_view"Android:layout_width="Match_parent"android:layout_height="Match_parent"/> <android. Support. V7. Widgets. ToolbarAndroid:id="@+id/toolbar"Android:layout_width="Match_parent"android:layout_height="Wrap_content"Android:background="? Attr/colorprimary"Android:fitssystemwindows="true"android:minheight="? Attr/actionbarsize"Android:theme="@style/apptheme.appbaroverlay"App:popuptheme="@style/apptheme.popupoverlay"> <textview android:id="@+id/title"style="@style/textappearance.appcompat.subhead"Android:layout_width="Wrap_content"android:layout_height="Wrap_content"Android:textsize="20SP"/> <imageview android:id="@+id/img"Android:layout_width="48DP"android:layout_height="? Attr/actionbarsize"android:layout_gravity="Right"android:clickable="true"Android:scaletype="Centerinside"Android:src="@android:d rawable/stat_sys_headset"/> </android. Support. V7. Widgets. Toolbar></android. Support. Design. Widgets. Coordinatorlayout>

The second Kind

Roughly the same as the first, the difference is Values-v21 's content.

1. Values:

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

2, values-v19:

    name="AppTheme.NoActionBar">        <itemname="windowActionBar">false</item>        <itemname="windowNoTitle">true</item>        <itemname="android:windowTranslucentStatus">true</item>    </style>

3, Values-v21:

<stylename="Apptheme.noactionbar"> <Item name="Windowactionbar">false</Item> <Item name="Windownotitle">true</Item> <Item name="Android:windowdrawssystembarbackgrounds">true</Item> <Item name="Android:statusbarcolor"> @color/colorprimarydark</Item>

4 layout:

Same as the top layout.

Achieve true full screen display, picture under status bar

To implement a picture that can be displayed under the status bar, such as an effect, you need to make the status bar Transparent, The second type above 5.0 does not make the status bar transparent, so if you use the first adaptation scheme, you can use it directly, if you use the second type of allocation is difficult, then you need to be in the corresponding full-screen activity in the code to make the status bar transparent, because values are not set, and then the
Apptheme.noactionbar is set as the theme of the full-screen activity, after all fullscreen, then OK

<relativelayout  xmlns: Android  = "http://schemas.android.com/apk/res/android"  xmlns:tools  =" Http://schemas.android.com/tools " android:layout_width  = "match_parent"  android:layout_height  =" match_parent " tools:context  =" com.sunzxy.demoapplication.TestActivity "     <ImageViewandroid:id= "@+id/img"android:layout_width="Match_ Parent "android:layout_height="match_parent "android:scaletype=" Centercrop "  android:src="@mipmap/bg" />                                        </relativelayout>

Effect:

Or do not add pictures, directly using the implementation status bar and toolbar together as a whole effect:

<relativelayout xmlns:android="Http://schemas.android.com/apk/res/android"xmlns:app="Http://schemas.android.com/apk/res-auto"xmlns:tools="Http://schemas.android.com/tools"Android:layout_width="Match_parent"android:layout_height="Match_parent"tools:context="Com.sunzxy.demoapplication.TestActivity"> <android. Support. V7. Widgets. ToolbarAndroid:id="@+id/toolbar"Android:layout_width="Match_parent"android:layout_height="Wrap_content"Android:background="? Attr/colorprimary"Android:fitssystemwindows="true"android:minheight="? Attr/actionbarsize"Android:theme="@style/apptheme.appbaroverlay"App:popuptheme="@style/apptheme.popupoverlay"> <textview android:id="@+id/title"style="@style/textappearance.appcompat.subhead"Android:layout_width="Wrap_content"android:layout_height="Wrap_content"android:layout_gravity="left"Android:textsize="20SP"/> </android. Support. V7. Widgets. Toolbar></RelativeLayout>

Android Best Practices Systembar status bar full version adaptation scheme