Katie McCormick | cfd3047 | 2013-09-27 15:52:14 -0700 | [diff] [blame] | 1 | page.title=Managing the System UI |
| 2 | page.tags="" |
| 3 | |
| 4 | trainingnavtop=true |
| 5 | startpage=true |
| 6 | |
| 7 | |
| 8 | @jd:body |
| 9 | |
| 10 | |
| 11 | |
| 12 | <div id="tb-wrapper"> |
| 13 | <div id="tb"> |
| 14 | |
| 15 | |
| 16 | <!-- Required platform, tools, add-ons, devices, knowledge, etc. --> |
| 17 | <h2>Dependencies and prerequisites</h2> |
| 18 | |
| 19 | <ul> |
| 20 | <li>Android 1.6 (API Level 4) or higher</li> |
| 21 | </ul> |
| 22 | |
Katie McCormick | 467f5db | 2013-11-05 13:35:15 -0800 | [diff] [blame] | 23 | <h2>You should also read</h2> |
Katie McCormick | cfd3047 | 2013-09-27 15:52:14 -0700 | [diff] [blame] | 24 | |
Katie McCormick | 467f5db | 2013-11-05 13:35:15 -0800 | [diff] [blame] | 25 | <ul> |
| 26 | <li> |
| 27 | <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> API Guide |
| 28 | </li> |
| 29 | <li> |
| 30 | <a href="{@docRoot}design/patterns/fullscreen.html"> |
| 31 | Android Design Guide |
| 32 | </a> |
| 33 | </li> |
| 34 | |
| 35 | </ul> |
| 36 | |
| 37 | <h2>Try it out</h2> |
| 38 | |
| 39 | <div class="download-box"> |
| 40 | <a href="{@docRoot}samples/ImmersiveMode/index.html" |
| 41 | class="button">Get the sample</a> |
| 42 | <p class="filename">ImmersiveMode sample</p> |
| 43 | </div> |
Katie McCormick | cfd3047 | 2013-09-27 15:52:14 -0700 | [diff] [blame] | 44 | |
| 45 | </div> |
| 46 | </div> |
| 47 | |
| 48 | <a class="notice-designers wide" href="{@docRoot}design/get-started/ui-overview.html#system-bars"> |
| 49 | <div> |
| 50 | <h3>Design Guide</h3> |
| 51 | <p>System Bars</p> |
| 52 | </div> |
| 53 | </a> |
| 54 | |
Katie McCormick | 467f5db | 2013-11-05 13:35:15 -0800 | [diff] [blame] | 55 | <a class="notice-developers-video wide" href="http://www.youtube.com/watch?v=cBi8fjv90E4"> |
| 56 | <div> |
| 57 | <h3>Video</h3> |
| 58 | <p>DevBytes: Android 4.4 Immersive Mode</p> |
| 59 | </div> |
| 60 | </a> |
| 61 | |
Katie McCormick | cfd3047 | 2013-09-27 15:52:14 -0700 | [diff] [blame] | 62 | <div class="figure" style="width:278px"> |
| 63 | <img src="{@docRoot}images/training/system-ui.png" |
| 64 | alt="system bars" /> |
| 65 | <p class="img-caption"><strong>Figure 1.</strong> System bars, including the [1] status |
| 66 | bar, and [2] navigation bar.</p> |
| 67 | </div> |
| 68 | |
| 69 | <p>The <a href="https://developer.android.com/design/get-started/ui-overview.html#system-bars"> |
| 70 | system bars</a> are screen areas dedicated to the display of notifications, communication |
| 71 | of device status, and device navigation. Typically the system bars (which consist of the status |
| 72 | and navigation bars, as shown in figure 1) are displayed |
| 73 | concurrently with your app. Apps that display immersive content, such as movies or images, |
| 74 | can temporarily dim the system bar icons for a less distracting experience, |
| 75 | or temporarily hide the bars for a fully immersive experience.</p> |
| 76 | |
| 77 | <p>If you're familiar with the <a href="{@docRoot}design/index.html">Android Design |
| 78 | Guide</a>, you know the importance of designing your apps to conform to standard Android UI |
| 79 | guidelines and usage patterns. You should carefully consider your users' |
| 80 | needs and expectations before modifying the system bars, since they give users a |
| 81 | standard way of navigating a device and viewing its status.</p> |
| 82 | |
| 83 | <p>This class describes how to dim or hide system bars across different versions of Android |
| 84 | to create an immersive user experience, while still preserving easy access to the system |
| 85 | bars. |
| 86 | </p> |
| 87 | <h2>Lessons</h2> |
| 88 | |
| 89 | <dl> |
| 90 | <dt> |
| 91 | <strong><a href="dim.html">Dimming the System Bars</a></strong> |
| 92 | </dt> |
| 93 | <dd> |
| 94 | Learn how to dim the status and navigation bars. |
| 95 | </dd> |
| 96 | <dt> |
| 97 | <strong><a href="status.html">Hiding the Status Bar</a></strong> |
| 98 | </dt> |
| 99 | <dd> |
| 100 | Learn how to hide the status bar on different versions of Android. |
| 101 | </dd> |
| 102 | <dt> |
| 103 | <strong><a href="navigation.html">Hiding the Navigation Bar</a></strong> |
| 104 | </dt> |
| 105 | <dd> |
| 106 | Learn how to hide the navigation bar, in addition to the status bar. |
| 107 | </dd> |
Katie McCormick | 467f5db | 2013-11-05 13:35:15 -0800 | [diff] [blame] | 108 | <dt> |
| 109 | <strong><a href="immersive.html">Using Immersive Full-Screen Mode</a></strong> |
| 110 | </dt> |
| 111 | <dd> |
| 112 | Learn how to create a fully immersive experience in your app. |
| 113 | </dd> |
Katie McCormick | cfd3047 | 2013-09-27 15:52:14 -0700 | [diff] [blame] | 114 | |
| 115 | <dt> |
| 116 | <strong><a href="visibility.html">Responding to UI Visibility Changes</a></strong> |
| 117 | </dt> |
| 118 | <dd> |
| 119 | Learn how to register a listener to get notified of system UI visibility changes |
| 120 | so that you can adjust your app's UI accordingly. |
| 121 | </dd> |
| 122 | |
| 123 | </dl> |