1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - UI Overview
</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
<link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
<link rel="stylesheet" href="../static/default.css">
</head>
<body>
<div id="page-container">
<div id="page-header"><a href="../index.html">Android Design</a></div>
<div id="main-row">
<ul id="nav">
<li class="nav-section">
<div class="nav-section-header"><a href="../index.html">Get Started</a></div>
<ul>
<li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
<li><a href="../get-started/principles.html">Design Principles</a></li>
<li><a href="../get-started/ui-overview.html">UI Overview</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="../style/index.html">Style</a></div>
<ul>
<li><a href="../style/devices-displays.html">Devices and Displays</a></li>
<li><a href="../style/themes.html">Themes</a></li>
<li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
<li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
<li><a href="../style/typography.html">Typography</a></li>
<li><a href="../style/color.html">Color</a></li>
<li><a href="../style/iconography.html">Iconography</a></li>
<li><a href="../style/writing.html">Writing Style</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
<ul>
<li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
<li><a href="../patterns/gestures.html">Gestures</a></li>
<li><a href="../patterns/app-structure.html">App Structure</a></li>
<li><a href="../patterns/navigation.html">Navigation</a></li>
<li><a href="../patterns/actionbar.html">Action Bar</a></li>
<li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
<li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
<li><a href="../patterns/selection.html">Selection</a></li>
<li><a href="../patterns/notifications.html">Notifications</a></li>
<li><a href="../patterns/compatibility.html">Compatibility</a></li>
<li><a href="../patterns/pure-android.html">Pure Android</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
<ul>
<li><a href="../building-blocks/tabs.html">Tabs</a></li>
<li><a href="../building-blocks/lists.html">Lists</a></li>
<li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
<li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
<li><a href="../building-blocks/spinners.html">Spinners</a></li>
<li><a href="../building-blocks/buttons.html">Buttons</a></li>
<li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
<li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
<li><a href="../building-blocks/progress.html">Progress & Activity</a></li>
<li><a href="../building-blocks/switches.html">Switches</a></li>
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
</li>
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
</ul>
<div id="content">
<div class="layout-content-row content-header">
<div class="layout-content-col span-9">
<h2>UI Overview</h2>
</div>
<div class="paging-links layout-content-col span-4">
<a href="#" class="prev-page-link">Previous</a>
<a href="#" class="next-page-link">Next</a>
</div>
</div>
<p>Android's system UI provides the framework on top of which you build your app. Important aspects
include the Home screen experience, global device navigation, and notifications.</p>
<p>Your app will play an important part in keeping the overall Android experience consistent and
enjoyable to use. At the end of this chapter we introduce the main elements for achieving this goal
in your app.</p>
<p>Read on for a quick overview of the most important aspects of the Android user interface.</p>
<h2 id="home-all-apps-recents">Home, All Apps, and Recents</h2>
<div class="vspace size-1"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-4">
<img src="../static/content/ui_overview_home_screen.png">
<h4>Home screen</h4>
<p>Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between
different home screen panels by swiping left and right.</p>
<p>The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view
regardless of which panel is currently showing.</p>
<p>Access the entire collection of apps and widgets by touching the All Apps button at the center of
the Favorites Tray.</p>
</div>
<div class="layout-content-col span-4">
<img src="../static/content/ui_overview_all_apps.png">
<h4>All apps screen</h4>
<p>The All Apps screen lets you browse the entire set of apps and widgets that are installed on your
device.</p>
<p>Users can drag an app or widget icon from the All Apps screen and place it in any empty location on
any Home screen.</p>
</div>
<div class="layout-content-col span-4">
<img src="../static/content/ui_overview_recents.png">
<h4>Recents screen</h4>
<p>Recents provides an efficient way of switching between recently used applications. It provides a
clear navigation path between multiple ongoing tasks.</p>
<p>The Recents button at the right side of the navigation bar displays the apps that the user has
interacted with most recently. They are organized in reverse chronological order with the most
recently used app at the bottom.</p>
<p>Switch to an app by touching it. Remove an item by swiping left or right.</p>
</div>
</div>
<h2 id="system-bars">System Bars</h2>
<p>The system bars are screen areas dedicated to the display of notifications, communication of device
status, and device navigation. Typically the system bars are displayed concurrently with your app.
Apps that display immersive content, such as movies or images, can temporarily hide the system bars
to allow the user to enjoy full screen content without distraction.</p>
<img src="../static/content/ui_overview_system_ui.png">
<div class="with-callouts">
<ol>
<li>
<h4>Status Bar</h4>
<p>Displays pending notifications on the left and status, such as time, battery level, or signal
strength, on the right. Swipe down from the status bar to show notification details.</p>
</li>
<li>
<h4>Navigation Bar</h4>
<p>New for phones in Android 4.0, the navigation bar is present only on devices that don't have
the traditional hardware keys. It houses the device navigation controls Back, Home, and
Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p>
</li>
<li>
<h4>Combined Bar</h4>
<p>On tablet form factors the status and navigation bars are combined into a single bar at the
bottom of the screen.</p>
</li>
</ol>
</div>
<h2 id="notifications">Notifications</h2>
<p>Notifications are brief messages that users can access at any time from the status bar. They
provide updates, reminders, or information that's important, but not critical enough to warrant
interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a
notification opens the associated app. <a href="../patterns/notifications.html">More on Notifications</a></p>
<div class="layout-content-row">
<div class="layout-content-col span-4">
<img src="../static/content/ui_overview_notifications.png">
</div>
<div class="layout-content-col span-9">
<img src="../static/content/notifications_dismiss.png">
<p>Most notifications have a one-line title and a one-line message. The recommended layout for a
notification includes two lines. If necessary, you can add a third line. Timestamps are optional.</p>
<p>Swiping a notification right or left removes it from the notification drawer.</p>
</div>
</div>
<h2 id="app">Common App UI</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<img src="../static/content/ui_overview_app_ui.png">
</div>
<div class="layout-content-col span-6 with-callouts">
<p>A typical Android app consists of action bars and the app content area.</p>
<ol>
<li>
<h4>Main Action Bar</h4>
<p>The command and control center for your app. The main action bar includes elements for
navigating your app's hierarchy and views, and also surfaces the most important actions.</p>
<p><a href="../patterns/actionbar.html">More on the Action Bar</a></p>
</li>
<li>
<h4>View Control</h4>
<p>Allows users to switch between the different views that your app provides. Views typically
consist of different arrangements of your data or different functional aspects of your app.</p>
</li>
<li>
<h4>Content Area</h4>
<p>The space where the content of your app is displayed.</p>
</li>
<li>
<h4>Split Action Bar</h4>
<p>Split action bars provide a way to distribute actions across additional bars located below
the main action bar or at the bottom of the screen. In this example, a split action bar moves
important actions that won't fit in the main bar to the bottom.</p>
</li>
</ol>
</div>
</div>
<div class="layout-content-row content-footer">
<div class="paging-links layout-content-col span-9"> </div>
<div class="paging-links layout-content-col span-4">
<a href="#" class="prev-page-link">Previous</a>
<a href="#" class="next-page-link">Next</a>
</div>
</div>
</div>
</div>
<div id="page-footer">
<p id="copyright">
Except as noted, this content is licensed under
<a href="http://creativecommons.org/licenses/by/2.5/">
Creative Commons Attribution 2.5</a>.<br>
For details and restrictions, see the
<a href="http://developer.android.com/license.html">Content License</a>.
</p>
<p>
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
</p>
</div>
</div>
<script src="../static/jquery-1.6.2.min.js"></script>
<script>
var SITE_ROOT = '../';
</script>
<script src="../static/default.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5831155-1");
pageTracker._trackPageview();
</script>
</body>
</html>
|
