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
|
page.title=Dialogs
page.tags=dialog,alert,popup,toast
@jd:body
<a class="notice-designers-material"
href="http://www.google.com/design/spec/components/dialogs.html">
<div>
<h3>Material Design</h3>
<p>Dialogs<p>
</div>
</a>
<a class="notice-developers" href="{@docRoot}guide/topics/ui/dialogs.html">
<div>
<h3>Developer Docs</h3>
<p>Dialogs</p>
</div>
</a>
<p itemprop="description">Dialogs prompt the user for decisions or additional information required by the app to continue a
task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the
user to adjust settings or enter text.</p>
<img src="{@docRoot}design/media/dialogs_main.png">
<div class="with-callouts">
<ol>
<li>
<h4>Optional title region</h4>
<p>The title introduces the content of your dialog. It can, for example, identify the name of a
setting that the user is about to change, or request a decision.</p>
</li>
<li>
<h4>Content area</h4>
<p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as
sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system
settings. In other cases, such as alerts, the content may consist solely of text that provides
further context for a user decision.</p>
</li>
<li>
<h4>Action buttons</h4>
<p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely action. However, if the options consist of specific actions such as Close or Wait rather than a confirmation or cancellation of the action described in the content, then all the buttons should be active verbs. Order actions following these rules:</p>
<ul>
<li>The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.</li>
<li>The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.</li>
</ul>
</li>
</ol>
</div>
<img src="{@docRoot}design/media/dialogs_examples.png">
<div class="figure-caption">
Samples of typical dialog use in Android.
</div>
<h2 id="alerts">Alerts</h2>
<p>Alerts inform the user about a situation that requires their confirmation or acknowledgement before
proceeding. They differ slightly in appearance based upon the severity and impact of the message
conveyed.</p>
<div class="layout-content-row">
<div class="layout-content-col span-8">
<img src="{@docRoot}design/media/dialogs_w_no_title.png">
</div>
<div class="layout-content-col span-5">
<h4>Alerts without title bars</h4>
<p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed
up succinctly in a sentence or two. The content area should either ask a question (such as "Delete
this conversation?") or make a clear statement whose relationship to the action buttons is obvious.</p>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-8">
<img src="{@docRoot}design/media/dialogs_w_title.png">
</div>
<div class="layout-content-col span-5">
<h4>Alerts with title bars</h4>
<p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving
potential loss of data, connectivity, extra charges, and so on requires a clear question or
statement (the title) and some additional explanation (in the content area).</p>
<p>Keep the question or statement short: for example, "Erase USB storage?" Avoid apologies. A user
should be able to skip the content completely and still have a clear idea of what choices are
available based on the title and the text of the action buttons.</p>
</div>
</div>
<p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p>
<div class="layout-content-row">
<div class="layout-content-col span-4">
<div class="do-dont-label bad">Don't</div>
<table class="ui-table bad">
<thead>
<tr>
<th class="label">
Are you sure?
</th>
</tr>
</thead>
</table>
</div>
<div class="layout-content-col span-4">
<div class="do-dont-label bad">Don't</div>
<table class="ui-table bad">
<thead>
<tr>
<th class="label">
Warning!
</th>
</tr>
</thead>
</table>
</div>
<div class="layout-content-col span-5">
<div class="do-dont-label good">Do</div>
<table class="ui-table good">
<thead>
<tr>
<th class="label">
Erase USB storage?
</th>
</tr>
</thead>
</table>
</div>
</div>
<h2 id="popups">Popups</h2>
<p>Popups are lightweight version of dialogs that require a single selection from the user. Popups
don't have have explicit buttons that accept or cancel the operation. Instead, making a selection
advances the workflow, and simply touching outside the popup dismisses it.</p>
<img src="{@docRoot}design/media/dialogs_popups_example.png">
<h2 id="toasts">Toasts</h2>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<div class="vspace size-3"></div>
<p>Toasts provide lightweight feedback about an operation in a small popup. For example, navigating
away from an email before you send it triggers a "Draft saved" toast to let you know that you can
continue editing later. Toasts automatically disappear after a timeout.</p>
<a class="notice-designers-material left"
href="http://www.google.com/design/spec/components/snackbars-toasts.html">
<div>
<h3>Material Design</h3>
<p>Toasts<p>
</div>
</a>
<a class="notice-developers left" href="{@docRoot}guide/topics/ui/notifiers/toasts.html">
<div>
<h3>Developer Docs</h3>
<p>Toasts</p>
</div>
</a>
</div>
<div class="layout-content-col span-7">
<img src="{@docRoot}design/media/dialogs_toasts.png">
</div>
</div>
|
