blob: 06b6143f93e3dd389f7063e56eb9f0dbf93290de [file] [log] [blame]
Katie McCormickcfd30472013-09-27 15:52:14 -07001page.title=Hiding the Status 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 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 McCormick467f5db2013-11-05 13:35:15 -080015 <li><a href="#44">Hide the Status Bar on Android 4.4 and Higher</a></li>
Katie McCormickcfd30472013-09-27 15:52:14 -070016
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 McCormick467f5db2013-11-05 13:35:15 -080035<h2>Try it out</h2>
36
37<div class="download-box">
38 <a href="{@docRoot}samples/ImmersiveMode/index.html"
39class="button">Get the sample</a>
40 <p class="filename">ImmersiveMode sample</p>
41</div>
Katie McCormickcfd30472013-09-27 15:52:14 -070042
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
74setting an activity theme in your app's manifest file. Setting an activity theme in your app's
75manifest file is the preferred approach if the status bar should always remain
76hidden in your app (though strictly speaking, you could programmatically override the
77theme if you wanted to). For example:</p>
78
79<pre>
80&lt;application
81 ...
82 android:theme=&quot;@android:style/Theme.Holo.NoActionBar.Fullscreen&quot; &gt;
83 ...
84&lt;/application&gt;
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
92to render your UI before instantiating your app's main activity.</li>
93</ul>
94
95<p>
96Alternatively, you can programmatically set {@link android.view.WindowManager} flags.
97This approach makes it easier to hide and show the status bar as the user interacts with
98your app:</p>
99
100<pre>public class MainActivity extends Activity {
101
102 &#64;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
118programmatically), 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}
122to 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
124content 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
130using {@link android.view.View#setSystemUiVisibility setSystemUiVisibility()}.
131{@link android.view.View#setSystemUiVisibility setSystemUiVisibility()} sets UI flags at
132the individual view level; these settings are aggregated to the window level. Using
133{@link android.view.View#setSystemUiVisibility setSystemUiVisibility()} to set UI flags
134gives 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.
139int uiOptions = View.SYSTEM_UI_FLAG_FULLSCREEN;
140decorView.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.
143ActionBar actionBar = getActionBar();
144actionBar.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
151activity), your app needs to reset them if you want to hide the bars again.
152See <a href="visibility.html">Responding to UI Visibility Changes</a> for a
153discussion of how to listen for UI visibility changes so that your app can
154respond 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()}
159won't get called, so the system bars will remain visible. If you want system UI changes to
160persist as the user navigates in and out of your activity, set UI flags in
161{@link android.app.Activity#onResume onResume()}
162or {@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 McCormickcfd30472013-09-27 15:52:14 -0700171 </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
175the status bar, so that the content doesn't resize as the status bar hides and shows.
176To do this, use
Katie McCormick467f5db2013-11-05 13:35:15 -0800177{@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}.
Katie McCormickcfd30472013-09-27 15:52:14 -0700178You may also need to use
179{@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_STABLE} to help your app maintain a
180stable layout.</p>
181
182<p>When you use this approach, it becomes your responsibility to ensure that critical parts
183of your app's UI (for example, the built-in controls in a Maps application) don't end up
184getting covered by system bars. This could make your app unusable. In most cases you can
185handle 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}
187to 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
190layout for your app. To directly manipulate how your
191content 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)}.
193The {@link android.view.View#fitSystemWindows fitSystemWindows()} method is called by the
194view hierarchy when the content insets for a window have changed, to allow the window to
195adjust its content accordingly. By overriding this method you can handle the
196insets (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 McCormick467f5db2013-11-05 13:35:15 -0800218{@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN},
Katie McCormickcfd30472013-09-27 15:52:14 -0700219as described above,
220to 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 McCormick467f5db2013-11-05 13:35:15 -0800223When you want to hide the system UI, use
224{@link android.view.View#SYSTEM_UI_FLAG_FULLSCREEN}.
Katie McCormickcfd30472013-09-27 15:52:14 -0700225This also hides the action bar (because {@code windowActionBarOverlay=”true”)} and does
226so with a coordinated animation when both hiding and showing the two.</p>