Android status bar Micro tricks that take you to really understand immersive mode

Reprint Please specify source: http://blog.csdn.net/guolin_blog/article/details/51763825

This article is posted in my public number, sweep the bottom of the article QR code or search Guo Lin can pay attention to, every day there are articles updated.

Remember before a friend in the message let me write an article about the immersion status bar, just as I do have this plan, then this article will bring you an immersive status bar micro-skills explained.

In fact, when it comes to the name of the immersive status bar I feel very helpless, I really do not know who first initiated the term. Because Android has never given an immersive status bar to such a name, there is only an immersive pattern (Immersive mode) that says. While some people don't fully understand what immersive mode is, they pigtailed that some system-provided status bar operations are immersive and have a name for an immersive status bar.

For example, before there is a QQ group friends asked me, like hungry, such an immersive status bar effect how to achieve?

This effect is to let the background image can take advantage of the system status bar space, so that the background map and the status bar can be integrated.

In this article I will teach you how to achieve this effect, but this is really not called the immersive status bar. Therefore, this is a technology + popularization of the article, to speak of technology, but also to correct the people before the wrong term.

What is immersive?

First to analyze the reason for the wrong call, the reason many people will be called wrong, because there is no understanding of the immersion is what the meaning, and then follow the call. So what does immersion mean?

According to the definition of Baidu Encyclopedia, immersion is to provide users with a completely immersive experience, so that users have a feeling of being in the virtual world.

For example, now the Hot VR is the main immersive experience.

So what's an immersive experience that corresponds to the Android OS? This may not be possible in most cases, but it is very important when playing games or watching movies. Because the game or film and television applications are expected to allow users to fully immerse themselves in it, enjoy the entertainment content they provide, but if this time on the top of the screen also displays a system status bar, it may give users a minute to create the feeling of jumping play.

So let's take a look at how the better games are implemented, like the Island Raiders:

This model of the island is a typical immersive mode, its entire screen display is the content of the game, there is no status bar and no navigation bar, users can play the game is completely immersed in the game, and will not be disturbed by the interface elements of some systems.

Then let's take a look at the realization of Iqiyi art:

Similarly, iqiyi the entire screen as a display area of the film, the user in the eyes of the movie will only have the content of the film, so it will not be distracted by other unrelated things.

This is the real meaning of immersive mode, and what the so-called immersive status bar is simply in the blind, completely do not understand the "immersive" three words what meaning.

But although it sounds like a big, immersive effect, it actually looks like it's going to be full-screen. Yes, the essence of Android immersive mode is full-screen, but today's content is not limited to this, because we also want to achieve the status bar effect hungry. So let's start with the next step of learning.

Hide the status bar

The interface of an Android application is actually a lot of system elements, observed:

You can see that there are status bars, ActionBar, navigation bars, and so on. The user experience of creating immersive patterns is to hide all of these system elements, leaving only the subject content part.

For example, I create an empty project now, then modify the code in the layout file, add a imageview to it, as follows:

<relativelayoutxmlns:android="Http://schemas.android.com/apk/res/android" android:layout_width="Match_parent"android:layout_height="Match_parent" >                <ImageViewandroid:layout_width="Match_parent"android:layout_height= "Match_parent" android:src= "@drawable/bg"android:scaletype="Centercrop" />                                </relativelayout>

Here the width and height of the ImageView are set to match_parent, so that the picture fills the screen. Now run the program, as shown in the effect.

If you think of the picture as a game or film, then the experience is too far from immersive, at least the status bar and Actionbar to hide it? It doesn't matter, we are optimized step by step and learn in optimization.

The way to hide the status bar and the Actionbar is different from the 4.1 system and the 4.1 system, and here I am not prepared to consider compatibility under the 4.1 system, because the overly old system simply does not offer the support of an immersive experience.

Modify the code in the mainactivity as follows:

publicclass MainActivity extends AppCompatActivity {    @Override    protectedvoidonCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        View decorView = getWindow().getDecorView();        int option = View.SYSTEM_UI_FLAG_FULLSCREEN;        decorView.setSystemUiVisibility(option);        ActionBar actionBar = getSupportActionBar();        actionBar.hide();    }}

Here first call the GetWindow (). The Getdecorview () method gets the Decorview of the current interface, and then calls its setsystemuivisibility () method to set the visibility of the system UI element. Where system_ui_flag_fullscreen means full-screen meaning, that is, the status bar will be hidden. Also, depending on the design recommendations of Android, Actionbar should not be displayed separately from the status bar, so if the status bar is hidden, we also need to call Actionbar's Hide () method to hide the Actionbar.

Now run the program again, as shown in the results.

It looks like a bit of an immersive effect.

Although this is the Orthodox immersion meaning, but some friends may want to achieve is hungry like the status bar effect, rather than directly the entire system status bar to hide, then how to achieve it?

It is also very simple, just need to use a different UI flag, as shown below:

super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);if21) {    View decorView = getWindow().getDecorView();    int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN            | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;    decorView.setSystemUiVisibility(option);    getWindow().setStatusBarColor(Color.TRANSPARENT);}ActionBar actionBar = getSupportActionBar();actionBar.hide();

First of all, we need to be aware that this effect is only 5.0 and above the system is supported, so here first a layer if judgment, only the system version is greater than or equal to 5.0 when the following code is executed.

Next we use System_ui_flag_layout_fullscreen and system_ui_flag_layout_stable, noting that two flags must be used together, indicating that the subject content of the app occupies the space of the system status bar , and then call the window's Setstatusbarcolor () method to set the status bar to a transparent color.

Now run the code again, as shown in the results.

As you can see, the effect of the status bar, similar to the hungry, has been successfully implemented.

Again, this effect is not called the immersive status bar, and there is no immersive status bar, we estimate and can call it transparent status bar effect.

Hide Navigation Bar

Now we have successfully implemented the effect of hiding the status bar, but the navigation bar at the bottom of the screen is also more dazzling, then we will learn how to hide the navigation bar.

In fact, the principle of implementation is the same, the hidden navigation bar is the use of different UI flag, modify the code in the Mainactivity, as follows:

super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);View decorView = getWindow().getDecorView();int option = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION        | View.SYSTEM_UI_FLAG_FULLSCREEN;decorView.setSystemUiVisibility(option);ActionBar actionBar = getSupportActionBar();actionBar.hide();

Here we use both system_ui_flag_hide_navigation and system_ui_flag_fullscreen so that the status bar and navigation bar can be hidden at the same time. Now rerun the program, effect.

This time it seems to be completely full-screen, but in fact this is far from the real immersive mode, because in this mode, we touch the screen anywhere will exit full screen.

This is obviously not the effect we want, so the usage scenario for this pattern is relatively limited.

In addition to hiding the navigation bar, we can also implement the same effect as the transparent status bar just now, making a transparent navigation bar:

super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);if21) {    View decorView = getWindow().getDecorView();    int option = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN            | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;    decorView.setSystemUiVisibility(option);    getWindow().setNavigationBarColor(Color.TRANSPARENT);    getWindow().setStatusBarColor(Color.TRANSPARENT);}ActionBar actionBar = getSupportActionBar();actionBar.hide();

The system_ui_flag_layout_hide_navigation is used here, which means that the main content of the app occupies the space of the system navigation bar, and then calls the Setnavigationbarcolor () method to set the navigation bar to a transparent color. Now run the program again, as shown in the results.

A true immersive model

While the immersive navigation bar is a name that many people mistakenly call, the immersive model does exist. So how can we achieve an immersive model like the islands and Iqiyi?

First you should determine if you really need this functionality, because most applications are not immersive, except for special applications such as games or video software.

When you're sure you want to use immersive mode, you just need to rewrite the activity's onwindowfocuschanged () method and add the following logic:

 Public  class mainactivity extends appcompatactivity {    @Override    protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);    Setcontentview (R.layout.activity_main); }@Override     Public void onwindowfocuschanged(BooleanHasfocus) {Super. onwindowfocuschanged (Hasfocus);if(Hasfocus && Build.VERSION.SDK_INT >= +{View Decorview = GetWindow (). Getdecorview (); Decorview.setsystemuivisibility (view.system_ui_flag_layout_stable | view.system_ui_flag_layout_hide_navigation | View.system_ui_flag_layout_fullscreen | view.system_ui_flag_hide_navigation | View.system_ui_flag_fullscreen |        View.system_ui_flag_immersive_sticky); }    }}

Immersive mode UI flag that's all there is, and there's nothing to explain, if you need to implement immersive mode, just copy the code from the previous line. It is important to note that the immersive mode is supported only on Android 4.4 and above, so it is also added if judged.

In addition, in order to make our interface look more like a game, here I set the mainactivity as a horizontal screen mode:

<activity android:name=".MainActivity"           android:screenOrientation="landscape">    ...</activity>

This allows us to achieve an immersive pattern effect similar to that of an island raider and Iqiyi, as shown in.

As you can see, the interface is full screen by default, and the status bar and navigation bar are not displayed. And when we need to use the status bar or navigation bar, just pull down at the top of the screen, or on the right side of the screen to Zola, the status bar and navigation bar will be displayed, and any elements on the interface display or size will not be affected. After a period of time, if there is no action, the status bar and navigation bar are automatically hidden and back to full-screen state.

This is the most standard immersive mode.

Pay attention to my public number, every day there are high-quality technical articles push, you can also contribute to the public, the technical tips you summarize to share to everyone.
Sweep the QR code below or search Guo Lin to focus on:

Android status bar Micro tricks that take you to really understand immersive mode