A few years ago I was working on a point-of-sale application
that was based on Android 3.1 (Honeycomb). One of the most incredibly frustrating shortcomings of the operating
system at that time was the inability to hide the system bars from the user and
truly utilize the entire display without compiling a custom ROM.

In Android 4.2 (Jelly Bean), a number of flags
were added that allow a developer to hide the status bar and the
standard navigation buttons. However, the
application title bar had to be handled separately, and the app had to be
prepared for the fact that any time the user touched the screen the system bar
and navigation menu would be brought to the front of the current z-order.

In Android 4.4 (KitKat), developers finally have the
option to hide both the status and navigation bars in a way that makes
sense. In this tutorial, I demo how the flags work and point out items of interest. Since the functionality was added to the SDK
through the use of flags to an existing API call, you don’t have to worry about
breaking anything on devices running at least API 11. Be sure to lay out your user interface (UI) in
such a way that it is still usable, if
not optimal, even when immersive mode is not available.

Follow along with the tutorial, or
download and import the entire project directly into Eclipse.

1. Create a new Android project in Eclipse. Target API 19 and make sure your minimally
supported SDK is 11 or better.

2. In the /res/layout folder, create a simple linear layout
that includes a couple of buttons.

 

activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical" >

<Button
android:id="@+id/on_button"
android:layout_margin="12dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Enter Immersive Mode" />

<Button
android:id="@+id/off_button"
android:layout_margin="12dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Exit Immersive Mode" />

</LinearLayout>

3. In the /src file, we will want to modify
MainActivity.java. The on create
override is responsible for wiring up the buttons, and the on click override
applies the necessary flags to enter and exit immersive mode.

 

MainActivity.java
package com.authorwjf.immersiveui;

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.app.Activity;

public class MainActivity extends Activity implements OnClickListener {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.on_button).setOnClickListener(this);
findViewById(R.id.off_button).setOnClickListener(this);
}

@Override
public void onClick(View v) {
if (v.getId()==R.id.on_button) {
getWindow().getDecorView().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 // hide nav bar
| View.SYSTEM_UI_FLAG_FULLSCREEN // hide status bar
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
} else {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}

}

}

Now we can run the apk. The first time the app enters immersive mode the OS automatically gives
the user a brief tutorial on how it works; subsequent views of the app will not show the tutorial—even if the user
uninstalls and reinstalls the app. There
is one exception to this rule that caught me off guard at first: If the user presses the Power button on the
device while the activity is in immersive mode, the next time the activity is
brought to the foreground, the tutorial will play again.  This
is by design. Apparently the Google
framework team found that when users who are unfamiliar with a truly full screen app
panic, the first thing they do to try and get the navigation menus back is
shut off the device. The replaying of
the tutorial is a safeguard until users become more familiar with full
screen applications on Android.

Figure A

 

 

The app with standard status and navigation bars.

Figure B

 

 

The built-in tutorial.

Figure C

 

 

A full-screen immersive activity.