1page.title=Hiding the Navigation Bar
2
3trainingnavtop=true
4
5@jd:body
6
7<div id="tb-wrapper">
8<div id="tb">
9
10<!-- table of contents -->
11<h2>This lesson teaches you to</h2>
12<ol>
13  <li><a href="#40">Hide the Navigation Bar</a></li>
14  <li><a href="#behind">Make Content Appear Behind the Navigation Bar</a></li>
15</ol>
16
17
18<!-- other docs (NOT javadocs) -->
19<h2>You should also read</h2>
20
21<ul>
22    <li>
23        <a href="{@docRoot}training/appbar/index.html">Adding the App Bar</a>
24    </li>
25    <li>
26        <a href="{@docRoot}design/index.html">
27        Android Design Guide
28        </a>
29    </li>
30</ul>
31
32<h2>Try it out</h2>
33
34<div class="download-box">
35  <a href="{@docRoot}samples/ImmersiveMode/index.html"
36class="button">Get the sample</a>
37 <p class="filename">ImmersiveMode sample</p>
38</div>
39
40</div>
41</div>
42
43<p>This lesson describes how to hide the navigation bar, which was introduced in
44Android 4.0 (API level 14).</p>
45
46<p>Even though this lesson focuses on hiding the
47navigation bar, you should design your app to hide the status bar
48at the same time, as described in <a href="status.html">Hiding the Status Bar</a>.
49Hiding the navigation and status bars (while still keeping them readily accessible)
50lets the content use the entire display space, thereby providing a more immersive
51user experience. </p>
52
53<img src="{@docRoot}images/training/navigation-bar.png"
54  alt="system bars">
55<p class="img-caption"><strong>Figure 1.</strong> Navigation bar.</p>
56
57
58
59<h2 id="40">Hide the Navigation Bar</h2>
60
61<p>You can hide the navigation bar using the
62{@link android.view.View#SYSTEM_UI_FLAG_HIDE_NAVIGATION} flag. This snippet hides both
63the navigation bar and the status bar:</p>
64<pre>View decorView = getWindow().getDecorView();
65// Hide both the navigation bar and the status bar.
66// SYSTEM_UI_FLAG_FULLSCREEN is only available on Android 4.1 and higher, but as
67// a general rule, you should design your app to hide the status bar whenever you
68// hide the navigation bar.
69int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
70              | View.SYSTEM_UI_FLAG_FULLSCREEN;
71decorView.setSystemUiVisibility(uiOptions);</pre>
72
73<p>Note the following:</p>
74
75<ul>
76  <li>With this approach, touching anywhere on the screen causes the navigation bar (and
77  status bar) to reappear and remain visible. The user interaction causes the flags to be
78  be cleared.</li>
79<li>Once the flags have been cleared, your app needs to reset them if you
80want to hide the bars again. See <a href="visibility.html">Responding to UI Visibility Changes</a> for a
81discussion of how to listen for UI visibility changes so that your app can
82respond accordingly.</li>
83
84<li>Where you set the UI flags makes a difference. If you hide the system bars in your activity's
85 {@link android.app.Activity#onCreate onCreate()} method and the user presses Home, the system bars will
86 reappear. When the user reopens the activity, {@link android.app.Activity#onCreate onCreate()}
87won't get called, so the system bars will remain visible. If you want system UI changes to
88persist as the user navigates in and out of your activity, set UI flags in
89{@link android.app.Activity#onResume onResume()}
90or {@link android.view.Window.Callback#onWindowFocusChanged onWindowFocusChanged()}.</li>
91
92  <li>The method {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()} only
93  has an effect if the view you call it from is visible.</li>
94  <li>Navigating away from the view causes flags
95  set with {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()}
96  to be cleared.</li>
97</ul>
98
99<h2 id="behind">Make Content Appear Behind the Navigation Bar</h2>
100<p>On Android 4.1 and higher, you can set your application's content to appear behind
101the navigation bar, so that the content doesn't resize as the navigation bar hides and
102shows. To do this, use
103{@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION}.
104You may also need to use
105{@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_STABLE} to help your app maintain a
106stable layout.</p>
107
108<p>When you use this approach, it becomes your responsibility to ensure that critical parts
109of your app's UI don't end up getting covered by system bars. For more
110discussion of this topic, see the <a href="status.html#behind">
111Hiding the Status Bar</a> lesson.</p>
112