Katie McCormick | cfd3047 | 2013-09-27 15:52:14 -0700 | [diff] [blame] | 1 | page.title=Hiding the Status 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">Hide the Status Bar on Android 4.0 and Lower</a></li> |
| 14 | <li><a href="#41">Hide the Status Bar on Android 4.1 and Higher</a></li> |
Katie McCormick | 467f5db | 2013-11-05 13:35:15 -0800 | [diff] [blame] | 15 | <li><a href="#44">Hide the Status Bar on Android 4.4 and Higher</a></li> |
Katie McCormick | cfd3047 | 2013-09-27 15:52:14 -0700 | [diff] [blame] | 16 | |
| 17 | <li><a href="#behind">Make Content Appear Behind the Status Bar</a></li> |
| 18 | <li><a href="#action-bar">Synchronize the Status Bar with Action Bar Transition</a></li> |
| 19 | </ol> |
| 20 | |
| 21 | <!-- other docs (NOT javadocs) --> |
| 22 | <h2>You should also read</h2> |
| 23 | |
| 24 | <ul> |
| 25 | <li> |
| 26 | <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> API Guide |
| 27 | </li> |
| 28 | <li> |
| 29 | <a href="{@docRoot}design/index.html"> |
| 30 | Android Design Guide |
| 31 | </a> |
| 32 | </li> |
| 33 | </ul> |
| 34 | |
Katie McCormick | 467f5db | 2013-11-05 13:35:15 -0800 | [diff] [blame] | 35 | <h2>Try it out</h2> |
| 36 | |
| 37 | <div class="download-box"> |
| 38 | <a href="{@docRoot}samples/ImmersiveMode/index.html" |
| 39 | class="button">Get the sample</a> |
| 40 | <p class="filename">ImmersiveMode sample</p> |
| 41 | </div> |
Katie McCormick | cfd3047 | 2013-09-27 15:52:14 -0700 | [diff] [blame] | 42 | |
| 43 | </div> |
| 44 | </div> |
| 45 | |
| 46 | <p> |
| 47 | This lesson describes how to hide the status bar on different versions of |
| 48 | Android. Hiding the status bar (and optionally, the navigation bar) lets the |
| 49 | content use more of the display space, thereby providing a more immersive user experience. |
| 50 | |
| 51 | </p> |
| 52 | |
| 53 | <p> |
| 54 | Figure 1 shows an app with a visible status bar: |
| 55 | </p> |
| 56 | |
| 57 | <img src="{@docRoot}images/training/status_bar_show.png" |
| 58 | alt="system bars"> |
| 59 | <p class="img-caption"><strong>Figure 1.</strong> Visible status bar.</p> |
| 60 | |
| 61 | <p> |
| 62 | Figure 2 shows an app with a hidden status bar. Note that the action bar is hidden too. |
| 63 | You should never show the action bar without the status bar. |
| 64 | </p> |
| 65 | |
| 66 | <img src="{@docRoot}images/training/status_bar_hide.png" |
| 67 | alt="system bars"> |
| 68 | <p class="img-caption"><strong>Figure 2.</strong> Hidden status bar.</p> |
| 69 | |
| 70 | <h2 id="40">Hide the Status Bar on Android 4.0 and Lower</h2> |
| 71 | |
| 72 | <p>You can hide the status bar on Android 4.0 (API level 14) and lower by setting |
| 73 | {@link android.view.WindowManager} flags. You can do this programmatically or by |
| 74 | setting an activity theme in your app's manifest file. Setting an activity theme in your app's |
| 75 | manifest file is the preferred approach if the status bar should always remain |
| 76 | hidden in your app (though strictly speaking, you could programmatically override the |
| 77 | theme if you wanted to). For example:</p> |
| 78 | |
| 79 | <pre> |
| 80 | <application |
| 81 | ... |
| 82 | android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen" > |
| 83 | ... |
| 84 | </application> |
| 85 | </pre> |
| 86 | |
| 87 | <p>The advantages of using an activity theme are as follows:</p> |
| 88 | |
| 89 | <ul> |
| 90 | <li>It's easier to maintain and less error-prone than setting a flag programmatically.</li> |
| 91 | <li>It results in smoother UI transitions, because the system has the information it needs |
| 92 | to render your UI before instantiating your app's main activity.</li> |
| 93 | </ul> |
| 94 | |
| 95 | <p> |
| 96 | Alternatively, you can programmatically set {@link android.view.WindowManager} flags. |
| 97 | This approach makes it easier to hide and show the status bar as the user interacts with |
| 98 | your app:</p> |
| 99 | |
| 100 | <pre>public class MainActivity extends Activity { |
| 101 | |
| 102 | @Override |
| 103 | protected void onCreate(Bundle savedInstanceState) { |
| 104 | super.onCreate(savedInstanceState); |
| 105 | // If the Android version is lower than Jellybean, use this call to hide |
| 106 | // the status bar. |
| 107 | if (Build.VERSION.SDK_INT < 16) { |
| 108 | getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, |
| 109 | WindowManager.LayoutParams.FLAG_FULLSCREEN); |
| 110 | } |
| 111 | setContentView(R.layout.activity_main); |
| 112 | } |
| 113 | ... |
| 114 | } |
| 115 | </pre> |
| 116 | |
| 117 | <p>When you set {@link android.view.WindowManager} flags (whether through an activity theme or |
| 118 | programmatically), the flags remain in effect unless your app clears them.</p> |
| 119 | |
| 120 | <p>You can use |
| 121 | {@link android.view.WindowManager.LayoutParams#FLAG_LAYOUT_IN_SCREEN} |
| 122 | to set your activity layout to use the same screen area that's available when you've enabled |
| 123 | {@link android.view.WindowManager.LayoutParams#FLAG_FULLSCREEN}. This prevents your |
| 124 | content from resizing when the status bar hides and shows.</p> |
| 125 | |
| 126 | |
| 127 | <h2 id="41">Hide the Status Bar on Android 4.1 and Higher</h2> |
| 128 | |
| 129 | <p>You can hide the status bar on Android 4.1 (API level 16) and higher by |
| 130 | using {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()}. |
| 131 | {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()} sets UI flags at |
| 132 | the individual view level; these settings are aggregated to the window level. Using |
| 133 | {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()} to set UI flags |
| 134 | gives you more granular control over the system bars than using |
| 135 | {@link android.view.WindowManager} flags. This snippet hides the status bar:</p> |
| 136 | |
| 137 | <pre>View decorView = getWindow().getDecorView(); |
| 138 | // Hide the status bar. |
| 139 | int uiOptions = View.SYSTEM_UI_FLAG_FULLSCREEN; |
| 140 | decorView.setSystemUiVisibility(uiOptions); |
| 141 | // Remember that you should never show the action bar if the |
| 142 | // status bar is hidden, so hide that too if necessary. |
| 143 | ActionBar actionBar = getActionBar(); |
| 144 | actionBar.hide(); |
| 145 | </pre> |
| 146 | |
| 147 | <p>Note the following:</p> |
| 148 | |
| 149 | <ul> |
| 150 | <li>Once UI flags have been cleared (for example, by navigating away from the |
| 151 | activity), your app needs to reset them if you want to hide the bars again. |
| 152 | See <a href="visibility.html">Responding to UI Visibility Changes</a> for a |
| 153 | discussion of how to listen for UI visibility changes so that your app can |
| 154 | respond accordingly.</li> |
| 155 | |
| 156 | <li>Where you set the UI flags makes a difference. If you hide the system bars in your activity's |
| 157 | {@link android.app.Activity#onCreate onCreate()} method and the user presses Home, the system bars will |
| 158 | reappear. When the user reopens the activity, {@link android.app.Activity#onCreate onCreate()} |
| 159 | won't get called, so the system bars will remain visible. If you want system UI changes to |
| 160 | persist as the user navigates in and out of your activity, set UI flags in |
| 161 | {@link android.app.Activity#onResume onResume()} |
| 162 | or {@link android.view.Window.Callback#onWindowFocusChanged onWindowFocusChanged()}.</li> |
| 163 | |
| 164 | <li>The method {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()} |
| 165 | only has an effect if the view you call it from is visible.</li> |
| 166 | |
| 167 | <li>Navigating away from the view causes flags |
| 168 | set with {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()} |
| 169 | to be cleared.</li> |
| 170 | </ul> |
Katie McCormick | cfd3047 | 2013-09-27 15:52:14 -0700 | [diff] [blame] | 171 | </p> |
| 172 | |
| 173 | <h2 id="behind">Make Content Appear Behind the Status Bar</h2> |
| 174 | <p>On Android 4.1 and higher, you can set your application's content to appear behind |
| 175 | the status bar, so that the content doesn't resize as the status bar hides and shows. |
| 176 | To do this, use |
Katie McCormick | 467f5db | 2013-11-05 13:35:15 -0800 | [diff] [blame] | 177 | {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}. |
Katie McCormick | cfd3047 | 2013-09-27 15:52:14 -0700 | [diff] [blame] | 178 | You may also need to use |
| 179 | {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_STABLE} to help your app maintain a |
| 180 | stable layout.</p> |
| 181 | |
| 182 | <p>When you use this approach, it becomes your responsibility to ensure that critical parts |
| 183 | of your app's UI (for example, the built-in controls in a Maps application) don't end up |
| 184 | getting covered by system bars. This could make your app unusable. In most cases you can |
| 185 | handle this by adding the {@code android:fitsSystemWindows} attribute to your XML layout file, set to |
| 186 | {@code true}. This adjusts the padding of the parent {@link android.view.ViewGroup} |
| 187 | to leave space for the system windows. This is sufficient for most applications.</p> |
| 188 | |
| 189 | <p>In some cases, however, you may need to modify the default padding to get the desired |
| 190 | layout for your app. To directly manipulate how your |
| 191 | content lays out relative to the system bars (which occupy a space known as the window's |
| 192 | "content insets"), override {@link android.view.View#fitSystemWindows fitSystemWindows(Rect insets)}. |
| 193 | The {@link android.view.View#fitSystemWindows fitSystemWindows()} method is called by the |
| 194 | view hierarchy when the content insets for a window have changed, to allow the window to |
| 195 | adjust its content accordingly. By overriding this method you can handle the |
| 196 | insets (and hence your app's layout) however you want. </p> |
| 197 | |
| 198 | <h2 id="action-bar">Synchronize the Status Bar with Action Bar Transition</h2> |
| 199 | |
| 200 | <p>On Android 4.1 and higher, to avoid resizing your layout when the action bar hides and |
| 201 | shows, you can enable overlay mode for the <a href="{@docRoot}guide/topics/ui/actionbar.html">action bar</a>. |
| 202 | When in overlay mode, your activity layout uses all the |
| 203 | space available as if the action bar is not there and the system draws the action bar in |
| 204 | front of your layout. This obscures some of the layout at the top, but now when the |
| 205 | action bar hides or appears, the system does not need to resize your layout and the |
| 206 | transition is seamless.</p> |
| 207 | |
| 208 | <p>To enable overlay mode for the action bar, you need to create a custom theme that |
| 209 | extends an existing theme with an action bar and set the |
| 210 | {@code android:windowActionBarOverlay} attribute |
| 211 | to {@code true}. For more discussion of this topic, see |
| 212 | <a href="{@docRoot}training/basics/actionbar/overlaying.html#EnableOverlay"> |
| 213 | Overlaying the Action Bar</a> in the <a href="{@docRoot}training/basics/actionbar/index.html"> |
| 214 | Adding the Action Bar</a> class.</p> |
| 215 | |
| 216 | |
| 217 | <p>Then use |
Katie McCormick | 467f5db | 2013-11-05 13:35:15 -0800 | [diff] [blame] | 218 | {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}, |
Katie McCormick | cfd3047 | 2013-09-27 15:52:14 -0700 | [diff] [blame] | 219 | as described above, |
| 220 | to set your activity layout to use the same screen area that's available when you've enabled |
| 221 | {@link android.view.View#SYSTEM_UI_FLAG_FULLSCREEN}. |
| 222 | |
Katie McCormick | 467f5db | 2013-11-05 13:35:15 -0800 | [diff] [blame] | 223 | When you want to hide the system UI, use |
| 224 | {@link android.view.View#SYSTEM_UI_FLAG_FULLSCREEN}. |
Katie McCormick | cfd3047 | 2013-09-27 15:52:14 -0700 | [diff] [blame] | 225 | This also hides the action bar (because {@code windowActionBarOverlay=”true”)} and does |
| 226 | so with a coordinated animation when both hiding and showing the two.</p> |