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