Give Android users an immersive experience by using KitKat's full screen decor flags

Android 4.4 (KitKat) allows for a completely immersive UI for the first time ever. William J. Francis walks developers through the process of using immersive mode. 

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.