blob: c45327f604bce7ffd97b74a0467afe6fc585e6c9 [file] [log] [blame]
Katie McCormickcfd30472013-09-27 15:52:14 -07001page.title=Managing the System UI
2page.tags=""
3
4trainingnavtop=true
5startpage=true
6
7
8@jd:body
9
10
11
12<div id="tb-wrapper">
13<div id="tb">
14
15
16<!-- Required platform, tools, add-ons, devices, knowledge, etc. -->
17<h2>Dependencies and prerequisites</h2>
18
19<ul>
20 <li>Android 1.6 (API Level 4) or higher</li>
21</ul>
22
Katie McCormick467f5db2013-11-05 13:35:15 -080023<h2>You should also read</h2>
Katie McCormickcfd30472013-09-27 15:52:14 -070024
Katie McCormick467f5db2013-11-05 13:35:15 -080025<ul>
26 <li>
27 <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> API Guide
28 </li>
29 <li>
30 <a href="{@docRoot}design/patterns/fullscreen.html">
31 Android Design Guide
32 </a>
33 </li>
34
35</ul>
36
37<h2>Try it out</h2>
38
39<div class="download-box">
40 <a href="{@docRoot}samples/ImmersiveMode/index.html"
41class="button">Get the sample</a>
42 <p class="filename">ImmersiveMode sample</p>
43</div>
Katie McCormickcfd30472013-09-27 15:52:14 -070044
45</div>
46</div>
47
48<a class="notice-designers wide" href="{@docRoot}design/get-started/ui-overview.html#system-bars">
49<div>
50 <h3>Design Guide</h3>
51 <p>System Bars</p>
52</div>
53</a>
54
Katie McCormick467f5db2013-11-05 13:35:15 -080055<a class="notice-developers-video wide" href="http://www.youtube.com/watch?v=cBi8fjv90E4">
56<div>
57 <h3>Video</h3>
58 <p>DevBytes: Android 4.4 Immersive Mode</p>
59</div>
60</a>
61
Katie McCormickcfd30472013-09-27 15:52:14 -070062<div class="figure" style="width:278px">
63 <img src="{@docRoot}images/training/system-ui.png"
64 alt="system bars" />
65 <p class="img-caption"><strong>Figure 1.</strong> System bars, including the [1] status
66bar, and [2] navigation bar.</p>
67</div>
68
69<p>The <a href="https://developer.android.com/design/get-started/ui-overview.html#system-bars">
70system bars</a> are screen areas dedicated to the display of notifications, communication
71of device status, and device navigation. Typically the system bars (which consist of the status
72and navigation bars, as shown in figure 1) are displayed
73concurrently with your app. Apps that display immersive content, such as movies or images,
74can temporarily dim the system bar icons for a less distracting experience,
75or temporarily hide the bars for a fully immersive experience.</p>
76
77<p>If you're familiar with the <a href="{@docRoot}design/index.html">Android Design
78Guide</a>, you know the importance of designing your apps to conform to standard Android UI
79guidelines and usage patterns. You should carefully consider your users'
80needs and expectations before modifying the system bars, since they give users a
81standard way of navigating a device and viewing its status.</p>
82
83<p>This class describes how to dim or hide system bars across different versions of Android
84to create an immersive user experience, while still preserving easy access to the system
85bars.
86</p>
87<h2>Lessons</h2>
88
89<dl>
90 <dt>
91 <strong><a href="dim.html">Dimming the System Bars</a></strong>
92 </dt>
93 <dd>
94 Learn how to dim the status and navigation bars.
95 </dd>
96 <dt>
97 <strong><a href="status.html">Hiding the Status Bar</a></strong>
98 </dt>
99 <dd>
100 Learn how to hide the status bar on different versions of Android.
101 </dd>
102 <dt>
103 <strong><a href="navigation.html">Hiding the Navigation Bar</a></strong>
104 </dt>
105 <dd>
106 Learn how to hide the navigation bar, in addition to the status bar.
107 </dd>
Katie McCormick467f5db2013-11-05 13:35:15 -0800108 <dt>
109 <strong><a href="immersive.html">Using Immersive Full-Screen Mode</a></strong>
110 </dt>
111 <dd>
112 Learn how to create a fully immersive experience in your app.
113 </dd>
Katie McCormickcfd30472013-09-27 15:52:14 -0700114
115 <dt>
116 <strong><a href="visibility.html">Responding to UI Visibility Changes</a></strong>
117 </dt>
118 <dd>
119 Learn how to register a listener to get notified of system UI visibility changes
120 so that you can adjust your app's UI accordingly.
121 </dd>
122
123</dl>