Android Development: Best practices for translucent System Bar

Best practices for Translucent System Bar

In recent days ready to make time to summarize some of the Android system UI practice use, so began to build a library androidsystemuitraining, side of the code side write summary

Write the first one today and summarize the practice of translucent System Bar. Speaking of the characteristics of translucent System Bar, some friends may be more unfamiliar, here to do a brief introduction.

Android 4.3 pea pod

Look, before Android 4.4, even if we open the mobile app, we can always see the system on the top of the black notification bar, which will make the app slightly more abrupt. As a result, Android 4.4 introduced the translucent system bar feature to compensate for the abrupt opening of the notification bar. (It is also estimated to be learning from iOS because iOS has this feature early in the morning). Let's take a look at what happens when the new feature of translucent System Bar is introduced. The following interception of the Chinese perpetual calendar of the weather interface and the effect of QQ Music main interface (the effect of the two interface to achieve translucent System Bar of the way some differences, the following will be detailed)

China Perpetual calendar
QQ Music

Can see, the system's notification bar and the app interface into one, mother no longer have to face the dark notice bar. The features of the translucent System Bar are described here for the moment.

Project Introduction

First, briefly introduce the structure of the project, the core has been circled, and I will explain each

Engineering structure

• The main operations are in Style.xml and androidmanifest.xml, and the activity does not have any code related to the translucent System bar setup, so it can be ignored.

• Colortranslucentbaractivity and imagetranslucentbaractivity are used to demonstrate the effects of two different implementations

• To use the translucent System Bar attribute in activity, you first need to set theme for the specified activity in Androidmanifest. It is important to note, however, that we cannot directly customize the theme of the Translucet System Bar directly in values/style.xml , as the feature is only compatible with the Android 4.4 platform, so it is directly Values/style.xml Declaration introduced, the project will error. Some developer friends will be in the code to determine the SDK version, and then set theme with the code. While the effect can also be achieved, individuals do not advocate this approach. The way I do this is to create multiple SDK versions of the values folder, which will be set according to the version of the SDK that you choose to theme. You can see above my project there are values,values-v19,values-v21.

The first way

The first way, you need to do the following three steps of Setup

1, in the values,values-v19,values-v21 style.xml all set a translucent System Bar style theme

Values/style.xml

<style name="ImageTranslucentTheme" parent="AppTheme"> <!--在Android 4.4之前的版本上运行，直接跟随系统主题--></style>

Values-v19/style.xml

<style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowTranslucentNavigation">true</item></style>

Values-v21/style.xml

<style name=" Imagetranslucenttheme "parent= "Theme.AppCompat.Light.DarkActionBar" > <item Span class= "Hljs-tag" >name= "android: windowtranslucentstatus ">false</item> <item name= "Android:windowtranslucentnavigation" >true</item> <!--Android 5. x start by setting the color to transparent, otherwise the navigation bar will render the system default light gray--<item name= "Android:statusbarcolor" > @android : Color/transparent</item></STYLE>    

It is important to note that regardless of which SDK version of the values directory you set, you should set a theme with the same name under the most basic values. This will ensure that your app will work properly on Android 4.4 devices. Otherwise, you will certainly be unable to find the theme error.

2. Set the theme of the specified activity in Androidmanifest.xml

<activity    android:name=".ui.ImageTranslucentBarActivity"    android:label="@string/image_translucent_bar" android:theme="@style/ImageTranslucentTheme" />

3, set the background image in the activity layout file, and need to set Android:fitssystemwindows to True

Activity_image_translucent_bar.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="match_parent" android:background="@mipmap/env_bg" android:fitsSystemWindows="true"></RelativeLayout>

To this, the first implementation of the way to complete, you can see the following effect

Imagetranslucenttheme effect

As with the Chinese perpetual calendar of the weather effect interface, the system's entire navigation bar is integrated into the app's interface, the background picture fills the entire screen, looks more comfortable. There is also a android:fitssystemwindows setting to be aware of, which will be followed in detail. Next look at the second implementation.

Way Two

Compared to the Chinese perpetual calendar, QQ Music adopts another way of realizing it, it sets the tab bar of the app and the system navigation bar separately.

QQ Music Effect Style

Because its tab bar is solid color, so long as the system notification bar color settings and the color of the tab bar is consistent, the implementation of the method is much simpler than one. Also to the different SDK version of the values, create a theme with the same name, under VALUES-V21, you need to set the color of the system navigation bar:

Values-v21/style.xml

<style name=" Colortranslucenttheme "parent= "Theme.AppCompat.Light.DarkActionBar" > <item Span class= "Hljs-tag" >name= "android: windowtranslucentstatus ">false</item> <item name= "Android:windowtranslucentnavigation" >true</item> <item name= "Android: Statusbarcolor</STYLE>            

and set the tab bar color to the colortranslucentbaractivity layout file activity_color_translucent_bar.xml.

<?xml version= "1.0" encoding= "Utf-8"?><LinearLayoutXmlns:android="Http://schemas.android.com/apk/res/android"Android:layout_width="Match_parent"android:layout_height="Match_parent"Android:fitssystemwindows="True"android:orientation="Vertical" ><RelativelayoutAndroid:layout_width="Match_parent"android:layout_height="55DP"android:background= "@color/color_31c27c" > <textview android:layout_width=" wrap_content "android:layout_height=" Wrap_ Content "android:layout_centerinparent=" true "android:text=" QQ Music "android:textcolor=  "@android: Color/white" android:textsize=  "20sp"/> </relativelayout>< Span class= "Hljs-tag" ></LINEARLAYOUT>       

In this way, we can get the same effect as the main interface of QQ music.

The effect of QQ music industry surface Realization

In this case, the two implementations of translucent System Bar are generally introduced.

Android:fitssystemwindows "Stepping on the pit"

In the first two ways, one would expect to notice that all activity that implements the translucent System Bar effect needs to be set android:fitssystemwindows= "true" in the root layout. The purpose of setting this property is to not overlap the system navigation bar and our app's UI, resulting in interactive issues. This may be more abstract, see the following two contrast to know.

With fitssystemwindows settings
No fitssystemwindows settings

Note: The above demo effect, with the help of my other open source project, the details please poke: androidalbum

In this case, if I have 10 activity to achieve this effect, it is necessary to set up in 10 layout files, very troublesome. So, think of a way to add the following android:fitssystemwindows settings to the theme:

<item name="android:fitsSystemWindows">true</item>

Find out if you can. All the activity to implement translucent System Bar, only need to set up this theme, change it is also very convenient. Unfortunately, there was a bug, let me still have to honestly go back to the layout file settings.

Toast Text Dislocation

The text that the toast is printed on is shifted upwards. This is also where I was negligent, because the settings in the layout file are in effect for the view, and the theme is set to the window, the two implementations are not the same. So, the end can only be changed back to the original way to achieve.

Practice Summary

Finally make a small summary:

• Method one applies to the app without a navigation bar, and the overall background is a picture of the interface;
• Mode two is used in the app navigation bar color is a solid color interface;
• Android:fitssystemwindows settings to be in the layout file, do not set in the theme;

How, introduced here, would you use the translucent System Bar? Bring it to your app!

Android Development: Best practices for translucent System Bar