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