Android app imitation QQ material design style immersion status bar _android

I. Overview
recently noted that the QQ version of the use of immersion status bar, OK, the first statement of the effect of the picture:

Well, here's the thing.
First of all, only greater than or equal to version 4.4 supports the translucent status bar effect, but the display of 4.4 and 5.0 has a certain difference, all of the contents of this article are:
1. How to achieve the translucent status bar effect above the 4.4 version.
2. How to make the 4.4 effect as consistent as the 5.0 effect.
First put down the simulator effect diagram, in order to make a comparison with the implementation process
4.4 Simulator

5.x Real Machine

Second, the realization of the translucent status bar

Because this example uses Navigationview, so the layout code is slightly more, of course, if you do not need, you can do the screen reduction.

Note the introduction of dependent dependencies:

 Compile ' com.android.support:appcompat-v7:22.2.1 '
 compile ' com.android.support:support-v4:22.2.1
 ' Compile ' com.android.support:design:22.2.0 '

1, Colors.xml and Styles.xml

First we define a few colors:

Res/values/color.xml

<?xml version= "1.0" encoding= "Utf-8"?>
<resources>
  <color name= "PRIMARY" > #FF03A9F4 </ color>
  <color name= "Primary_dark" > #FF0288D1 </color>
  <color name= "Status_bar_color" > @color/primary_dark</color>
</resources>

A few styles.xml are defined below

Note the path to the folder:

Values/styles.xml

<resources>
  <style name= "Baseapptheme" parent= "Theme.AppCompat.Light.NoActionBar" >
    <!-- Customize your theme here. -->
    <item name= "colorprimary" > @color/primary</item> <item name=
    "Colorprimarydark" > @color/primary_dark</item>
    <item name= "coloraccent" > #FF4081 </item>
  </style >

  <!--Base Application theme-->
  <style name= "Apptheme" parent= "@style/baseapptheme" >
  </style>
</resources>

Values-v19

<resources>

  <style name= "Apptheme" parent= "@style/baseapptheme" >
    <item name= "Android: Windowtranslucentstatus ">true</item>
  </style>
</resources>

OK, that's not what Satan said. Note that our theme is based on Noactionbar, android:windowtranslucentstatus this attribute was introduced by v19.

2. layout file

Activity_main.xml

<android.support.v4.widget.drawerlayout 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 "> <linearlayout android:id=" @+id/id_main_content "

    Android:layout_width= "Match_parent" android:layout_height= "match_parent" android:orientation= "vertical" > <android.support.v7.widget.toolbar android:id= "@+id/id_toolbar" android:layout_width= "Match_parent" a
      ndroid:layout_height= "Wrap_content" android:background= "Attr/colorprimary" android:fitssystemwindows= "true"
      App:popuptheme= "@style/themeoverlay.appcompat.light"/> <textview android:id= "@+id/id_tv_content" Android:layout_width= "Match_parent" android:layout_height= "0DP" android:layout_weight= "1" android:gr avity= "center" android:text= "H"Elloworld "android:textsize=" 30sp "/> </LinearLayout> <android.support.design.widget.navigationview Android:id= "@+id/id_nv_menu" android:layout_width= "match_parent" android:layout_height= "Match_parent" and roid:layout_gravity= "Start" android:fitssystemwindows= "true" app:headerlayout= "@layout/header_just_username" a

 pp:menu= "@menu/menu_drawer"/> </android.support.v4.widget.DrawerLayout>

Drawerlayout inside a linearlayout as a content area, a navigationview as a menu.
Note that the height of the toolbar is set to Wrap_content.

Then our Navigationview relies on a layout file and a menu file.

Header_just_username.xml

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" 192DP "android:background="? at Tr/colorprimarydark "android:orientation=" vertical "android:padding=" 16DP "Android:fitssystemwindo
    Ws= "true" android:theme= "@style/themeoverlay.appcompat.dark" > <textview android:id= "@+id/id_link" 
    Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_alignparentbottom= "true" Android:layout_marginbottom= "16DP" android:text= "http://blog.csdn.net/lmj623565791"/> <textview Andr Oid:id= "@+id/id_username" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:lay Out_above= "@id/id_link" android:text= "Zhang Hongyang"/> <imageview android:layout_width= "72DP" Androi d:layout_height= "72DP" AndroId:layout_above= "@id/id_username" android:layout_marginbottom= "16DP" android:src= "@mipmap/ic_launcher"/> <

 /relativelayout>

Menu files are not posted, more detailed can go to the reference to Android to achieve Navigationview [design Support Library (1)].

After reading the layout file, there are a few points to pay special attention to:

(1) Toolbar height set to Wrap_content
(2) Toolbar Add property android:fitssystemwindows= "true"
(3) Header_just_username.xml relativelayout with layout, add attribute android:fitssystemwindows= "true"
(4) Android:fitssystemwindows This property, mainly by adjusting the current settings of the view of this property padding to leave space for our status_bar.

According to the above explanation, if you do not write, then the status bar and the toolbar will be squeezed a piece of feeling, similar to this:

OK, finally look at the code.

3, the activity of the Code

Package Com.zhy.colorfulstatusbar;

Import Android.os.Bundle;
Import android.support.v7.app.AppCompatActivity;
Import Android.support.v7.widget.Toolbar;

public class Mainactivity extends appcompatactivity
{

  @Override
  protected void OnCreate (Bundle Savedinstancestate)
  {
    super.oncreate (savedinstancestate);
    Setcontentview (r.layout.activity_main);
    Toolbar Toolbar = (Toolbar) Findviewbyid (R.id.id_toolbar);
    Setsupportactionbar (toolbar);
    Statusbarcompat.compat (this, getresources (). GetColor (R.color.status_bar_color));
    Statusbarcompat.compat (this);
  }

What is not said is Setsupportactionbar.

So now the 4.4 effect diagram is:

Actually good, there is a gradient effect.
Now the effect of 5.x:

You can see that the 5.x default is not a gradient effect, similar to a darker color.
Take a look at our MD specification:

The status bar should be a slightly darker color than the toolbar background color.

So it is necessary for us to do a bit of fitness work for 4.4 so that it can be consistent with the 5.x display, or as much as possible with the MD specification.

Third, the adjustment of the 4.4 display scheme

So, what's the problem? How to do it?

So let's see, after 4.4, after adding the Windowtranslucentstatus attribute, that's the area where we can use the status bar.

Since we can use this area, we simply set a view with the status bar in the root layout and set the background color to our desired color.

So the following code is available:

Package Com.zhy.colorfulstatusbar;
Import Android.annotation.TargetApi;
Import android.app.Activity;
Import Android.content.Context;
Import Android.graphics.Color;
Import Android.os.Build;
Import Android.view.View;

Import Android.view.ViewGroup;
 /** * Created by Zhy on 15/9/21.
  * * Public class Statusbarcompat {private static final int invalid_val =-1;

  private static final int color_default = Color.parsecolor ("#20000000"); @TargetApi (build.version_codes. Lollipop) public static void Compat (activity activity, int statuscolor) {if (Build.VERSION.SDK_INT >= BUILD.V Ersion_codes. 
      Lollipop) {if (Statuscolor!= invalid_val) {Activity.getwindow (). Setstatusbarcolor (Statuscolor);
    } return; } if (Build.VERSION.SDK_INT >= build.version_codes. KitKat && Build.VERSION.SDK_INT < Build.version_codes.
      Lollipop) {int color = Color_default; ViewGroup Contentview = (viewgroup) Activity.findviewbyid (Android.R.id.content);
      if (Statuscolor!= invalid_val) {color = Statuscolor;
      View Statusbarview = new view (activity); Viewgroup.layoutparams LP = new Viewgroup.layoutparams (ViewGroup.LayoutParams.MATCH_PARENT, Getstatusbarheight (a
      ctivity));
      Statusbarview.setbackgroundcolor (color);
    Contentview.addview (Statusbarview, LP);
  {Compat (activity, invalid_val) for public static void Compat;
    public static int getstatusbarheight {int = 0;
    int ResourceID = Context.getresources (). Getidentifier ("Status_bar_height", "Dimen", "Android");
    if (ResourceID > 0) {result = Context.getresources (). Getdimensionpixelsize (ResourceID);
  return result;

 }
}

The code idea is simple, according to the activity found Android.r.content, in which add a view (height is statusbarheight, background color for us to set the colors, default to translucent black).

Then you just need to write in the activity:

Statusbarcompat.compat (this);

It's OK.

If you want to set the state to look at the color, then use this method:

Statusbarcompat.compat (this, getresources (). GetColor (R.color.status_bar_color));

In this way, we solve the 4.4 to 5.x adaptation problem, a line of code to solve, the feeling is good.

Finally, for 5.0 because the Setstatusbarcolor is provided to set the status bar color, this method cannot set the Windowtranslucentstatus property in the theme. So, you can write a value-v21 folder, inside Styles.xml write:

<resources>
  <!--Base application theme.-->
  <style name= "Apptheme" @style/ Baseapptheme ">
  </style>
</resources>

In fact, there is no windowtranslucentstatus attribute.

Next, for the default effect is not tested, refer to the above effect chart.

We're testing a set of status bar colors, we set a red here.

4.4 Simulator

5.x Real Machine

OK, so it's over.