1page.title=Dialogs 2@jd:body 3 4<p>Dialogs prompt the user for decisions or additional information required by the app to continue a 5task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the 6user to adjust settings or enter text.</p> 7 8<img src="{@docRoot}design/media/dialogs_main.png"> 9 10<div class="with-callouts"> 11 12<ol> 13<li> 14<h4>Optional title region</h4> 15<p>The title introduces the content of your dialog. It can, for example, identify the name of a 16 setting that the user is about to change, or request a decision.</p> 17</li> 18<li> 19<h4>Content area</h4> 20<p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as 21 sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system 22 settings. In other cases, such as alerts, the content may consist solely of text that provides 23 further context for a user decision.</p> 24</li> 25<li> 26<h4>Action buttons</h4> 27<p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely 28 action. However, if the options consist of specific actions such as Close or Wait rather than 29 a confirmation or cancellation of the action described in the content, then all the buttons 30 should be active verbs. As a rule, the dismissive action of a dialog is always on the left 31 whereas the affirmative actions are on the right.</p> 32</li> 33</ol> 34 35</div> 36 37<img src="{@docRoot}design/media/dialogs_examples.png"> 38<div class="figure-caption"> 39 Samples of typical dialog use in Android. 40</div> 41 42<h2 id="alerts">Alerts</h2> 43 44<p>Alerts inform the user about a situation that requires their confirmation or acknowledgement before 45proceeding. They differ slightly in appearance based upon the severity and impact of the message 46conveyed.</p> 47 48<div class="layout-content-row"> 49 <div class="layout-content-col span-8"> 50 51 <img src="{@docRoot}design/media/dialogs_w_no_title.png"> 52 53 </div> 54 <div class="layout-content-col span-5"> 55 56<h4>Alerts without title bars</h4> 57<p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed 58up succinctly in a sentence or two. The content area should either ask a question (such as "Delete 59this conversation?") or make a clear statement whose relationship to the action buttons is obvious.</p> 60 61 </div> 62</div> 63 64 65<div class="layout-content-row"> 66 <div class="layout-content-col span-8"> 67 68 <img src="{@docRoot}design/media/dialogs_w_title.png"> 69 70 </div> 71 <div class="layout-content-col span-5"> 72 73<h4>Alerts with title bars</h4> 74<p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving 75potential loss of data, connectivity, extra charges, and so on requires a clear question or 76statement (the title) and some additional explanation (in the content area).</p> 77<p>Keep the question or statement short: for example, "Erase USB storage?" Avoid apologies. A user 78should be able to skip the content completely and still have a clear idea of what choices are 79available based on the title and the text of the action buttons.</p> 80 81 </div> 82</div> 83 84 85<h2 id="popups">Popups</h2> 86 87<p>Popups are lightweight version of dialogs that require a single selection from the user. Popups 88don't have have explicit buttons that accept or cancel the operation. Instead, making a selection 89advances the workflow, and simply touching outside the popup dismisses it.</p> 90 91<img src="{@docRoot}design/media/dialogs_popups_example.png"> 92 93 94<h2 id="toasts">Toasts</h2> 95 96 97<div class="layout-content-row"> 98 <div class="layout-content-col span-6"> 99 100 <div class="vspace size-6"></div> 101 102<p>Toasts provide lightweight feedback about an operation in a small popup. For example, navigating 103away from an email before you send it triggers a "Draft saved" toast to let you know that you can 104continue editing later. Toasts automatically disappear after a timeout.</p> 105 106 </div> 107 <div class="layout-content-col span-7"> 108 109 <img src="{@docRoot}design/media/dialogs_toasts.png"> 110 111 </div> 112</div> 113
