Status bar introduction

Objective of this paper

1. Material Design status bar
2. Immersion effect (visually toolbar and status bar are the same color)
3. Full screen (full screen with status bar)

Basic concepts

1. colorPrimary, commonly referred to as the color of ActionBar
2. textColorPrimary, generally refers to the color of the title text on ActionBar
3. Color Primary Dark, generally refers to the color of the status bar
4. colorAccent, generally refers to the highlighted color, such as EditText to get the focus, RadioButton, CheckBox, etc.
5. Windows Background, View Background Color

MaterialDesign

Material Design believes that the color of the status bar should be a little darker than that of actionbar by more than 5.0. It can change the color of the status bar directly with color Primary Dark, but if you want to go to 4.4, you have to use it. SystemBarTintManager Now.

styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

v19 styles.xml:

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

v21 styles.xml:

<style name="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>
</style>

Layout file activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true"
    tools:context="com.rainmonth.statusbardemo.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Hello World!" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

MainActivity.java

package com.rainmonth.statusbardemo;

import android.os.Build;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

import com.readystatesoftware.systembartint.SystemBarTintManager;

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.toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();


        fitVer19();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            if (null != actionBar)
                actionBar.setTitle("19-21(No 21)");
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            if (null != actionBar)
                actionBar.setTitle("21 Above");
        } else {
            if (null != actionBar)
                actionBar.setTitle("19 Following(No 19)");
        }
    }

    private void fitVer19() {
        //Adapt to 19-21
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            SystemBarTintManager tintManager = new SystemBarTintManager(this);
            tintManager.setStatusBarTintResource(R.color.colorPrimaryDark);
            tintManager.setStatusBarTintEnabled(true);
        }
    }
}

• Method of changing the color of status bar by v21

  1. Set statusBarColor to transparent. (Modifying statusBarColor in styles.xml file can change the color of the status bar, but the result is not good)

  2. Setting through color Primary Dark

  3. Modify settings through Java code

     getWindow().setStatusBarColor(getResources().getColor(R.color.colorRed));

• Method of changing the color of the status bar by v19

  Start with Android: Windows Translucent Statues to make the status bar transparent and use dependency Libraries SystemBarTintManager To change the color of the status bar, the main principle is:

  Add a view to decorview and overlap it with the status bar (which is also possible in content view)

Immersion effect

Visually, toolbar and status bar are the same color, so in order to achieve the so-called immersive effect, we need to make the status bar and toolbar the same color. In theory, just change the value of color Primary Dark to the same value of color Primary. As a result, 4.4(v19) is OK, but 5.0(v21) has a shadow below statusbar.

Solution, remove color transparency, modify v21 styles.xml file as follows

<style name="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>
</style>

Full screen with status bar

AppTheme.NoActionBar is still used in the AppTheme theme, and android:fitSystemWindow= "true" in the root layout is removed. For v21, the following attributes are added to Windows:

FLAG_TRANSLUCENT_NAVIGATION

Other

StatusBarUtil Provides a status bar color-related library, very good

​

That's all. If you want to know more, please pay more attention.

​

​