1page.title=Dimming the System Bars
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="#dim">Dim the Status and Navigation Bars</a></li>
14  <li><a href="#reveal">Reveal the Status and Navigation Bars</a></li>
15</ol>
16
17
18<!-- other docs (NOT javadocs) -->
19<h2>You should also read</h2>
20
21<ul>
22    <li>
23        <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> API Guide
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"
36class="button">Get the sample</a>
37 <p class="filename">ImmersiveMode sample</p>
38</div>
39
40
41</div>
42</div>
43
44<p>This lesson describes how to dim the system bars (that is, the status and the navigation
45bars) on Android 4.0 (API level 14) and higher. Android does not provide a built-in way to dim the
46system bars on earlier versions.</p>
47
48<p>When you use this approach, the content doesn't resize, but the icons in the system bars
49visually recede. As soon as the user touches either the status bar or the navigation bar area of
50the screen, both bars become fully visible. The advantage of this
51approach is that the bars are still present but their details are obscured, thus
52creating an immersive experience without sacrificing easy access to the bars.</p>
53
54<h2 id="dim">Dim the Status and Navigation Bars</h2>
55
56<p>You can dim the status and notification bars on Android 4.0 and higher using the
57{@link android.view.View#SYSTEM_UI_FLAG_LOW_PROFILE} flag, as follows:</p>
58
59<pre>
60// This example uses decor view, but you can use any visible view.
61View decorView = getActivity().getWindow().getDecorView();
62int uiOptions = View.SYSTEM_UI_FLAG_LOW_PROFILE;
63decorView.setSystemUiVisibility(uiOptions);
64</pre>
65
66<p>As soon as the user touches the status or navigation bar, the flag is cleared,
67causing the bars to be undimmed. Once the flag has been cleared, your app needs to reset
68it if you want to dim the bars again.</p>
69
70<p>Figure 1 shows a gallery image in which the navigation bar is dimmed (note that the Gallery app
71completely hides the status bar; it doesn't dim it). Notice that the navigation bar (right
72side of the image) has faint white dots on it to represent the navigation controls:</p>
73
74<p class="figure" style="width:340px">
75  <img src="{@docRoot}images/training/low_profile_hide2x.png"
76  alt="system bars" />
77    <p class="img-caption"><strong>Figure 1.</strong> Dimmed system bars.</p>
78
79<p>Figure 2 shows the same gallery image, but with the system bars displayed:</p>
80
81<p class="figure" style="width:340px">
82  <img src="{@docRoot}images/training/low_profile_show2x.png"
83  alt="system bars" />
84    <p class="img-caption"><strong>Figure 2.</strong> Visible system bars.</p>
85
86    <h2 id="reveal">Reveal the Status and Navigation Bars</h2>
87
88<p>If you want to programmatically clear flags set with
89{@link android.view.View#setSystemUiVisibility setSystemUiVisibility()}, you can do so
90as follows:</p>
91
92<pre>
93View decorView = getActivity().getWindow().getDecorView();
94// Calling setSystemUiVisibility() with a value of 0 clears
95// all flags.
96decorView.setSystemUiVisibility(0);
97</pre>
98