The Immersive Status Bar of Android UI Translucent System Bar

Keywords: Android Attribute xml encoding

Immersive status bar Translucent System Bar

In developing UI, immersion has always been a problem. How to integrate app and interface perfectly, there will be a clear black line written before, so Translucent System Bar becomes a perfect tool.
This immersion allows the notification bar to merge with the toolbar you define, which takes only two steps:
1. In the res/values/styles.xml file <style name= "ColorTranslucent" parent= "AppTheme">
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:statusBarColor">@color/colorAccent</item>
</style>
Define a style. Stasbar's color settings are the same as toolbar's. Here I'll match the color of a separate Relative Layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@drawable/back"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context="com.example.chenxuanhe.translucentsystembar.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:background="@color/colorAccent"
        android:layout_height="50dp">

        <TextView
            android:text="adadaddadaadadadadadaddadaad"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </RelativeLayout>

<TextView
    android:text="adadaddadaadadadadadaddadaad"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</LinearLayout>

android:fitsSystemWindows= "true" must be in this line, otherwise it will overlap.
Secondly, the corresponding layout background color and the color in the style can be consistent.
2. In the Android Manifest.xml file, set android:theme="@style/ColorTranslucent" in activity.

The second use of Translucent System Bar::

This immersion can be perfectly integrated when app is a background image.
It only takes two steps:
1. Create styles in res/values/styles.xml

  <style name="ImageTranslucent" parent="AppTheme">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

Note that you need to inherit NoActionbar on the basis of AppTheme style to remove Actionbar, and secondly, directly in the acivity.xml file
android:background="@drawable/back"
android:fitsSystemWindows="true"
Add a background image and fitsSystem Windows line of code.

2. The second step is to change android: theme="@style/Image Translucent" in the Android Manifest.xml file.

Note: NoAction Bar needs to be inherited in the basic style, and then the style needs to be written in the activity in the node file to be useful. At present, values-v19-v21 can not be created in res file, but it can not be displayed, and the specific reason is still not known.

Posted by sgt.virus on Thu, 03 Jan 2019 08:48:11 -0800