| page.title=Hiding the Status Bar |
| |
| trainingnavtop=true |
| |
| @jd:body |
| |
| <div id="tb-wrapper"> |
| <div id="tb"> |
| |
| <!-- table of contents --> |
| <h2>This lesson teaches you to</h2> |
| <ol> |
| <li><a href="#40">Hide the Status Bar on Android 4.0 and Lower</a></li> |
| <li><a href="#41">Hide the Status Bar on Android 4.1 and Higher</a></li> |
| <li><a href="#44">Hide the Status Bar on Android 4.4 and Higher</a></li> |
| |
| <li><a href="#behind">Make Content Appear Behind the Status Bar</a></li> |
| <li><a href="#action-bar">Synchronize the Status Bar with Action Bar Transition</a></li> |
| </ol> |
| |
| <!-- other docs (NOT javadocs) --> |
| <h2>You should also read</h2> |
| |
| <ul> |
| <li> |
| <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> API Guide |
| </li> |
| <li> |
| <a href="{@docRoot}design/index.html"> |
| Android Design Guide |
| </a> |
| </li> |
| </ul> |
| |
| <h2>Try it out</h2> |
| |
| <div class="download-box"> |
| <a href="{@docRoot}samples/ImmersiveMode/index.html" |
| class="button">Get the sample</a> |
| <p class="filename">ImmersiveMode sample</p> |
| </div> |
| |
| </div> |
| </div> |
| |
| <p> |
| This lesson describes how to hide the status bar on different versions of |
| Android. Hiding the status bar (and optionally, the navigation bar) lets the |
| content use more of the display space, thereby providing a more immersive user experience. |
| |
| </p> |
| |
| <p> |
| Figure 1 shows an app with a visible status bar: |
| </p> |
| |
| <img src="{@docRoot}images/training/status_bar_show.png" |
| alt="system bars"> |
| <p class="img-caption"><strong>Figure 1.</strong> Visible status bar.</p> |
| |
| <p> |
| Figure 2 shows an app with a hidden status bar. Note that the action bar is hidden too. |
| You should never show the action bar without the status bar. |
| </p> |
| |
| <img src="{@docRoot}images/training/status_bar_hide.png" |
| alt="system bars"> |
| <p class="img-caption"><strong>Figure 2.</strong> Hidden status bar.</p> |
| |
| <h2 id="40">Hide the Status Bar on Android 4.0 and Lower</h2> |
| |
| <p>You can hide the status bar on Android 4.0 (API level 14) and lower by setting |
| {@link android.view.WindowManager} flags. You can do this programmatically or by |
| setting an activity theme in your app's manifest file. Setting an activity theme in your app's |
| manifest file is the preferred approach if the status bar should always remain |
| hidden in your app (though strictly speaking, you could programmatically override the |
| theme if you wanted to). For example:</p> |
| |
| <pre> |
| <application |
| ... |
| android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen" > |
| ... |
| </application> |
| </pre> |
| |
| <p>The advantages of using an activity theme are as follows:</p> |
| |
| <ul> |
| <li>It's easier to maintain and less error-prone than setting a flag programmatically.</li> |
| <li>It results in smoother UI transitions, because the system has the information it needs |
| to render your UI before instantiating your app's main activity.</li> |
| </ul> |
| |
| <p> |
| Alternatively, you can programmatically set {@link android.view.WindowManager} flags. |
| This approach makes it easier to hide and show the status bar as the user interacts with |
| your app:</p> |
| |
| <pre>public class MainActivity extends Activity { |
| |
| @Override |
| protected void onCreate(Bundle savedInstanceState) { |
| super.onCreate(savedInstanceState); |
| // If the Android version is lower than Jellybean, use this call to hide |
| // the status bar. |
| if (Build.VERSION.SDK_INT < 16) { |
| getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, |
| WindowManager.LayoutParams.FLAG_FULLSCREEN); |
| } |
| setContentView(R.layout.activity_main); |
| } |
| ... |
| } |
| </pre> |
| |
| <p>When you set {@link android.view.WindowManager} flags (whether through an activity theme or |
| programmatically), the flags remain in effect unless your app clears them.</p> |
| |
| <p>You can use |
| {@link android.view.WindowManager.LayoutParams#FLAG_LAYOUT_IN_SCREEN} |
| to set your activity layout to use the same screen area that's available when you've enabled |
| {@link android.view.WindowManager.LayoutParams#FLAG_FULLSCREEN}. This prevents your |
| content from resizing when the status bar hides and shows.</p> |
| |
| |
| <h2 id="41">Hide the Status Bar on Android 4.1 and Higher</h2> |
| |
| <p>You can hide the status bar on Android 4.1 (API level 16) and higher by |
| using {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()}. |
| {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()} sets UI flags at |
| the individual view level; these settings are aggregated to the window level. Using |
| {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()} to set UI flags |
| gives you more granular control over the system bars than using |
| {@link android.view.WindowManager} flags. This snippet hides the status bar:</p> |
| |
| <pre>View decorView = getWindow().getDecorView(); |
| // Hide the status bar. |
| int uiOptions = View.SYSTEM_UI_FLAG_FULLSCREEN; |
| decorView.setSystemUiVisibility(uiOptions); |
| // Remember that you should never show the action bar if the |
| // status bar is hidden, so hide that too if necessary. |
| ActionBar actionBar = getActionBar(); |
| actionBar.hide(); |
| </pre> |
| |
| <p>Note the following:</p> |
| |
| <ul> |
| <li>Once UI flags have been cleared (for example, by navigating away from the |
| activity), your app needs to reset them if you want to hide the bars again. |
| See <a href="visibility.html">Responding to UI Visibility Changes</a> for a |
| discussion of how to listen for UI visibility changes so that your app can |
| respond accordingly.</li> |
| |
| <li>Where you set the UI flags makes a difference. If you hide the system bars in your activity's |
| {@link android.app.Activity#onCreate onCreate()} method and the user presses Home, the system bars will |
| reappear. When the user reopens the activity, {@link android.app.Activity#onCreate onCreate()} |
| won't get called, so the system bars will remain visible. If you want system UI changes to |
| persist as the user navigates in and out of your activity, set UI flags in |
| {@link android.app.Activity#onResume onResume()} |
| or {@link android.view.Window.Callback#onWindowFocusChanged onWindowFocusChanged()}.</li> |
| |
| <li>The method {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()} |
| only has an effect if the view you call it from is visible.</li> |
| |
| <li>Navigating away from the view causes flags |
| set with {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()} |
| to be cleared.</li> |
| </ul> |
| </p> |
| |
| <h2 id="behind">Make Content Appear Behind the Status Bar</h2> |
| <p>On Android 4.1 and higher, you can set your application's content to appear behind |
| the status bar, so that the content doesn't resize as the status bar hides and shows. |
| To do this, use |
| {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}. |
| You may also need to use |
| {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_STABLE} to help your app maintain a |
| stable layout.</p> |
| |
| <p>When you use this approach, it becomes your responsibility to ensure that critical parts |
| of your app's UI (for example, the built-in controls in a Maps application) don't end up |
| getting covered by system bars. This could make your app unusable. In most cases you can |
| handle this by adding the {@code android:fitsSystemWindows} attribute to your XML layout file, set to |
| {@code true}. This adjusts the padding of the parent {@link android.view.ViewGroup} |
| to leave space for the system windows. This is sufficient for most applications.</p> |
| |
| <p>In some cases, however, you may need to modify the default padding to get the desired |
| layout for your app. To directly manipulate how your |
| content lays out relative to the system bars (which occupy a space known as the window's |
| "content insets"), override {@link android.view.View#fitSystemWindows fitSystemWindows(Rect insets)}. |
| The {@link android.view.View#fitSystemWindows fitSystemWindows()} method is called by the |
| view hierarchy when the content insets for a window have changed, to allow the window to |
| adjust its content accordingly. By overriding this method you can handle the |
| insets (and hence your app's layout) however you want. </p> |
| |
| <h2 id="action-bar">Synchronize the Status Bar with Action Bar Transition</h2> |
| |
| <p>On Android 4.1 and higher, to avoid resizing your layout when the action bar hides and |
| shows, you can enable overlay mode for the <a href="{@docRoot}guide/topics/ui/actionbar.html">action bar</a>. |
| When in overlay mode, your activity layout uses all the |
| space available as if the action bar is not there and the system draws the action bar in |
| front of your layout. This obscures some of the layout at the top, but now when the |
| action bar hides or appears, the system does not need to resize your layout and the |
| transition is seamless.</p> |
| |
| <p>To enable overlay mode for the action bar, you need to create a custom theme that |
| extends an existing theme with an action bar and set the |
| {@code android:windowActionBarOverlay} attribute |
| to {@code true}. For more discussion of this topic, see |
| <a href="{@docRoot}training/basics/actionbar/overlaying.html#EnableOverlay"> |
| Overlaying the Action Bar</a> in the <a href="{@docRoot}training/basics/actionbar/index.html"> |
| Adding the Action Bar</a> class.</p> |
| |
| |
| <p>Then use |
| {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}, |
| as described above, |
| to set your activity layout to use the same screen area that's available when you've enabled |
| {@link android.view.View#SYSTEM_UI_FLAG_FULLSCREEN}. |
| |
| When you want to hide the system UI, use |
| {@link android.view.View#SYSTEM_UI_FLAG_FULLSCREEN}. |
| This also hides the action bar (because {@code windowActionBarOverlay=”true”)} and does |
| so with a coordinated animation when both hiding and showing the two.</p> |