1 page.title=Dialogs 2 parent.title=User Interface 3 parent.link=index.html 4 @jd:body 5 6 <div id="qv-wrapper"> 7 <div id="qv"> 8 <h2>In this document</h2> 9 <ol> 10 <li><a href="#ShowingADialog">Showing a Dialog</a></li> 11 <li><a href="#DismissingADialog">Dismissing a Dialog</a></li> 12 <li><a href="#AlertDialog">Creating an AlertDialog</a> 13 <ol> 14 <li><a href="#AddingButtons">Adding buttons</a></li> 15 <li><a href="#AddingAList">Adding a list</a></li> 16 </ol> 17 </li> 18 <li><a href="#ProgressDialog">Creating a ProgressDialog</a> 19 <ol> 20 <li><a href="#ShowingAProgressBar">Showing a progress bar</a></li> 21 </ol> 22 </li> 23 <li><a href="#CustomDialog">Creating a Custom Dialog</a></li> 24 </ol> 25 26 <h2>Key classes</h2> 27 <ol> 28 <li>{@link android.app.Dialog}</li> 29 <li>{@link android.app.AlertDialog}</li> 30 <li>{@link android.app.DialogFragment}</li> 31 </ol> 32 33 <h2>Related tutorials</h2> 34 <ol> 35 <li><a href="{@docRoot}resources/tutorials/views/hello-datepicker.html">Hello 36 DatePicker</a></li> 37 <li><a href="{@docRoot}resources/tutorials/views/hello-timepicker.html">Hello 38 TimePicker</a></li> 39 </ol> 40 41 <h2>See also</h2> 42 <ol> 43 <li><a href="{@docRoot}design/building-blocks/dialogs.html">Android Design: Dialogs</a></li> 44 </ol> 45 </div> 46 </div> 47 48 <p>A dialog is usually a small window that appears in front of the current Activity. 49 The underlying Activity loses focus and the dialog accepts all user interaction. Dialogs are 50 normally used for notifications that should interupt the user and to perform short tasks that 51 directly relate to the application in progress (such as a progress bar or a login prompt).</p> 52 53 <p>The {@link android.app.Dialog} class is the base class for creating dialogs. However, you 54 typically should not instantiate a {@link android.app.Dialog} directly. Instead, you should use one 55 of the following subclasses:</p> 56 <dl> 57 <dt>{@link android.app.AlertDialog}</dt> 58 <dd>A dialog that can manage zero, one, two, or three buttons, and/or a list of 59 selectable items that can include checkboxes or radio buttons. The AlertDialog 60 is capable of constructing most dialog user interfaces and is the suggested dialog type. 61 See <a href="#AlertDialog">Creating an AlertDialog</a> below.</dd> 62 <dt>{@link android.app.ProgressDialog}</dt> 63 <dd>A dialog that displays a progress wheel or progress bar. Because it's an extension of 64 the AlertDialog, it also supports buttons. 65 See <a href="#ProgressDialog">Creating a ProgressDialog</a> below.</dd> 66 <dt>{@link android.app.DatePickerDialog}</dt> 67 <dd>A dialog that allows the user to select a date. See the 68 <a href="{@docRoot}resources/tutorials/views/hello-datepicker.html">Hello DatePicker</a> tutorial.</dd> 69 <dt>{@link android.app.TimePickerDialog}</dt> 70 <dd>A dialog that allows the user to select a time. See the 71 <a href="{@docRoot}resources/tutorials/views/hello-timepicker.html">Hello TimePicker</a> tutorial.</dd> 72 </dl> 73 74 <p>If you would like to customize your own dialog, you can extend the 75 base {@link android.app.Dialog} object or any of the subclasses listed above and define a new layout. 76 See the section on <a href="#CustomDialog">Creating a Custom Dialog</a> below.</p> 77 78 <div class="note design"> 79 <p><strong>Dialog Design</strong></p> 80 <p>For design guidelines, read Android Design's <a 81 href="{@docRoot}design/building-blocks/dialogs.html">Dialogs</a> guide.</p> 82 </div> 83 84 85 86 <h2 id="ShowingADialog">Showing a Dialog</h2> 87 88 <p>A dialog is always created and displayed as a part of an {@link android.app.Activity}. 89 You should normally create dialogs from within your Activity's 90 {@link android.app.Activity#onCreateDialog(int)} callback method. 91 When you use this callback, the Android system automatically manages the state of 92 each dialog and hooks them to the Activity, effectively making it the "owner" of each dialog. 93 As such, each dialog inherits certain properties from the Activity. For example, when a dialog 94 is open, the Menu key reveals the options menu defined for the Activity and the volume 95 keys modify the audio stream used by the Activity.</p> 96 97 <p class="note"><strong>Note:</strong> If you decide to create a dialog outside of the 98 <code>onCreateDialog()</code> method, it will not be attached to an Activity. You can, however, 99 attach it to an Activity with {@link android.app.Dialog#setOwnerActivity(Activity)}.</p> 100 101 <p>When you want to show a dialog, call 102 {@link android.app.Activity#showDialog(int)} and pass it an integer that uniquely identifies the 103 dialog that you want to display.</p> 104 105 <p>When a dialog is requested for the first time, Android calls 106 {@link android.app.Activity#onCreateDialog(int)} from your Activity, which is 107 where you should instantiate the {@link android.app.Dialog}. This callback method 108 is passed the same ID that you passed to {@link android.app.Activity#showDialog(int)}. 109 After you create the Dialog, return the object at the end of the method.</p> 110 111 <p>Before the dialog is displayed, Android also calls the optional callback method 112 {@link android.app.Activity#onPrepareDialog(int,Dialog)}. Define this method if you want to change 113 any properties of the dialog each time it is opened. This method is called 114 every time a dialog is opened, whereas {@link android.app.Activity#onCreateDialog(int)} is only 115 called the very first time a dialog is opened. If you don't define 116 {@link android.app.Activity#onPrepareDialog(int,Dialog) onPrepareDialog()}, then the dialog will 117 remain the same as it was the previous time it was opened. This method is also passed the dialog's 118 ID, along with the Dialog object you created in {@link android.app.Activity#onCreateDialog(int) 119 onCreateDialog()}.</p> 120 121 <p>The best way to define the {@link android.app.Activity#onCreateDialog(int)} and 122 {@link android.app.Activity#onPrepareDialog(int,Dialog)} callback methods is with a 123 <em>switch</em> statement that checks the <var>id</var> parameter that's passed into the method. 124 Each <em>case</em> should check for a unique dialog ID and then create and define the respective Dialog. 125 For example, imagine a game that uses two different dialogs: one to indicate that the game 126 has paused and another to indicate that the game is over. First, define an integer ID for 127 each dialog:</p> 128 <pre> 129 static final int DIALOG_PAUSED_ID = 0; 130 static final int DIALOG_GAMEOVER_ID = 1; 131 </pre> 132 133 <p>Then, define the {@link android.app.Activity#onCreateDialog(int)} callback with a 134 switch case for each ID:</p> 135 <pre> 136 protected Dialog onCreateDialog(int id) { 137 Dialog dialog; 138 switch(id) { 139 case DIALOG_PAUSED_ID: 140 // do the work to define the pause Dialog 141 break; 142 case DIALOG_GAMEOVER_ID: 143 // do the work to define the game over Dialog 144 break; 145 default: 146 dialog = null; 147 } 148 return dialog; 149 } 150 </pre> 151 152 <p class="note"><strong>Note:</strong> In this example, there's no code inside 153 the case statements because the procedure for defining your Dialog is outside the scope 154 of this section. See the section below about <a href="#AlertDialog">Creating an AlertDialog</a>, 155 offers code suitable for this example.</p> 156 157 <p>When it's time to show one of the dialogs, call {@link android.app.Activity#showDialog(int)} 158 with the ID of a dialog:</p> 159 <pre> 160 showDialog(DIALOG_PAUSED_ID); 161 </pre> 162 163 164 <h2 id="DismissingADialog">Dismissing a Dialog</h2> 165 166 <p>When you're ready to close your dialog, you can dismiss it by calling 167 {@link android.app.Dialog#dismiss()} on the Dialog object. 168 If necessary, you can also call {@link android.app.Activity#dismissDialog(int)} from the 169 Activity, which effectively calls {@link android.app.Dialog#dismiss()} on the 170 Dialog for you.</p> 171 172 <p>If you are using {@link android.app.Activity#onCreateDialog(int)} to manage the state 173 of your dialogs (as discussed in the previous section), then every time your dialog is 174 dismissed, the state of the Dialog 175 object is retained by the Activity. If you decide that you will no longer need this object or 176 it's important that the state is cleared, then you should call 177 {@link android.app.Activity#removeDialog(int)}. This will remove any internal references 178 to the object and if the dialog is showing, it will dismiss it.</p> 179 180 <h3>Using dismiss listeners</h3> 181 182 <p>If you'd like your application to perform some procedures the moment that a dialog is dismissed, 183 then you should attach an on-dismiss listener to your Dialog.</p> 184 185 <p>First define the {@link android.content.DialogInterface.OnDismissListener} interface. 186 This interface has just one method, 187 {@link android.content.DialogInterface.OnDismissListener#onDismiss(DialogInterface)}, which 188 will be called when the dialog is dismissed. 189 Then simply pass your OnDismissListener implementation to 190 {@link android.app.Dialog#setOnDismissListener(DialogInterface.OnDismissListener) 191 setOnDismissListener()}.</p> 192 193 <p>However, note that dialogs can also be "cancelled." This is a special case that indicates 194 the dialog was explicitly cancelled by the user. This will occur if the user presses the 195 "back" button to close the dialog, or if the dialog explicitly calls {@link android.app.Dialog#cancel()} 196 (perhaps from a "Cancel" button in the dialog). When a dialog is cancelled, 197 the OnDismissListener will still be notified, but if you'd like to be informed that the dialog 198 was explicitly cancelled (and not dismissed normally), then you should register 199 an {@link android.content.DialogInterface.OnCancelListener} with 200 {@link android.app.Dialog#setOnCancelListener(DialogInterface.OnCancelListener) 201 setOnCancelListener()}.</p> 202 203 204 <h2 id="AlertDialog">Creating an AlertDialog</h2> 205 206 <p>An {@link android.app.AlertDialog} is an extension of the {@link android.app.Dialog} 207 class. It is capable of constructing most dialog user interfaces and is the suggested dialog type. 208 You should use it for dialogs that use any of the following features:</p> 209 <ul> 210 <li>A title</li> 211 <li>A text message</li> 212 <li>One, two, or three buttons</li> 213 <li>A list of selectable items (with optional checkboxes or radio buttons)</li> 214 </ul> 215 216 <p>To create an AlertDialog, use the {@link android.app.AlertDialog.Builder} subclass. 217 Get a Builder with {@link android.app.AlertDialog.Builder#AlertDialog.Builder(Context)} and 218 then use the class's public methods to define all of the 219 AlertDialog properties. After you're done with the Builder, retrieve the 220 AlertDialog object with {@link android.app.AlertDialog.Builder#create()}.</p> 221 222 <p>The following topics show how to define various properties of the AlertDialog using the 223 AlertDialog.Builder class. If you use any of the following sample code inside your 224 {@link android.app.Activity#onCreateDialog(int) onCreateDialog()} callback method, 225 you can return the resulting Dialog object to display the dialog.</p> 226 227 228 <h3 id="AddingButtons">Adding buttons</h3> 229 230 <img src="{@docRoot}images/dialog_buttons.png" alt="" style="float:right" /> 231 232 <p>To create an AlertDialog with side-by-side buttons like the one shown in the screenshot to the right, 233 use the <code>set...Button()</code> methods:</p> 234 235 <pre> 236 AlertDialog.Builder builder = new AlertDialog.Builder(this); 237 builder.setMessage("Are you sure you want to exit?") 238 .setCancelable(false) 239 .setPositiveButton("Yes", new DialogInterface.OnClickListener() { 240 public void onClick(DialogInterface dialog, int id) { 241 MyActivity.this.finish(); 242 } 243 }) 244 .setNegativeButton("No", new DialogInterface.OnClickListener() { 245 public void onClick(DialogInterface dialog, int id) { 246 dialog.cancel(); 247 } 248 }); 249 AlertDialog alert = builder.create(); 250 </pre> 251 252 <p>First, add a message for the dialog with 253 {@link android.app.AlertDialog.Builder#setMessage(CharSequence)}. Then, begin 254 method-chaining and set the dialog 255 to be <em>not cancelable</em> (so the user cannot close the dialog with the back button) 256 with {@link android.app.AlertDialog.Builder#setCancelable(boolean)}. For each button, 257 use one of the <code>set...Button()</code> methods, such as 258 {@link android.app.AlertDialog.Builder#setPositiveButton(CharSequence,DialogInterface.OnClickListener) 259 setPositiveButton()}, that accepts the name for the button and a 260 {@link android.content.DialogInterface.OnClickListener} that defines the action to take 261 when the user selects the button.</p> 262 263 <p class="note"><strong>Note:</strong> You can only add one of each button type to the 264 AlertDialog. That is, you cannot have more than one "positive" button. This limits the number 265 of possible buttons to three: positive, neutral, and negative. These names are technically irrelevant to the 266 actual functionality of your buttons, but should help you keep track of which one does what.</p> 267 268 269 <h3 id="AddingAList">Adding a list</h3> 270 271 <img src="{@docRoot}images/dialog_list.png" alt="" style="float:right" /> 272 273 <p>To create an AlertDialog with a list of selectable items like the one shown to the right, 274 use the <code>setItems()</code> method:</p> 275 276 <pre> 277 final CharSequence[] items = {"Red", "Green", "Blue"}; 278 279 AlertDialog.Builder builder = new AlertDialog.Builder(this); 280 builder.setTitle("Pick a color"); 281 builder.setItems(items, new DialogInterface.OnClickListener() { 282 public void onClick(DialogInterface dialog, int item) { 283 Toast.makeText(getApplicationContext(), items[item], Toast.LENGTH_SHORT).show(); 284 } 285 }); 286 AlertDialog alert = builder.create(); 287 </pre> 288 289 <p>First, add a title to the dialog with 290 {@link android.app.AlertDialog.Builder#setTitle(CharSequence)}. 291 Then, add a list of selectable items with 292 {@link android.app.AlertDialog.Builder#setItems(CharSequence[],DialogInterface.OnClickListener) 293 setItems()}, which accepts the array of items to display and a 294 {@link android.content.DialogInterface.OnClickListener} that defines the action to take 295 when the user selects an item.</p> 296 297 298 <h4>Adding checkboxes and radio buttons</h4> 299 300 <img src="{@docRoot}images/dialog_singlechoicelist.png" alt="" style="float:right" /> 301 302 <p>To create a list of multiple-choice items (checkboxes) or 303 single-choice items (radio buttons) inside the dialog, use the 304 {@link android.app.AlertDialog.Builder#setMultiChoiceItems(Cursor,String,String, 305 DialogInterface.OnMultiChoiceClickListener) setMultiChoiceItems()} and 306 {@link android.app.AlertDialog.Builder#setSingleChoiceItems(int,int,DialogInterface.OnClickListener) 307 setSingleChoiceItems()} methods, respectively. 308 If you create one of these selectable lists in the 309 {@link android.app.Activity#onCreateDialog(int) onCreateDialog()} callback method, 310 Android manages the state of the list for you. As long as the Activity is active, 311 the dialog remembers the items that were previously selected, but when the user exits the 312 Activity, the selection is lost. 313 314 <p class="note"><strong>Note:</strong> To save the selection when the user leaves or 315 pauses the Activity, you must properly save and restore the setting throughout 316 the <a href="{@docRoot}guide/components/activities.html#Lifecycle">activity lifecycle</a>. 317 To permanently save the selections, even when the Activity process is completely shutdown, 318 you need to save the settings 319 with one of the <a href="{@docRoot}guide/topics/data/data-storage.html">Data 320 Storage</a> techniques.</p> 321 322 <p>To create an AlertDialog with a list of single-choice items like the one shown to the right, 323 use the same code from the previous example, but replace the <code>setItems()</code> method with 324 {@link android.app.AlertDialog.Builder#setSingleChoiceItems(int,int,DialogInterface.OnClickListener) 325 setSingleChoiceItems()}:</p> 326 327 <pre> 328 final CharSequence[] items = {"Red", "Green", "Blue"}; 329 330 AlertDialog.Builder builder = new AlertDialog.Builder(this); 331 builder.setTitle("Pick a color"); 332 builder.setSingleChoiceItems(items, -1, new DialogInterface.OnClickListener() { 333 public void onClick(DialogInterface dialog, int item) { 334 Toast.makeText(getApplicationContext(), items[item], Toast.LENGTH_SHORT).show(); 335 } 336 }); 337 AlertDialog alert = builder.create(); 338 </pre> 339 340 <p>The second parameter in the 341 {@link android.app.AlertDialog.Builder#setSingleChoiceItems(CharSequence[],int,DialogInterface.OnClickListener) 342 setSingleChoiceItems()} method is an integer value for the <var>checkedItem</var>, which indicates the 343 zero-based list position of the default selected item. Use "-1" to indicate that no item should be 344 selected by default.</p> 345 346 347 <h2 id="ProgressDialog">Creating a ProgressDialog</h2> 348 349 <img src="{@docRoot}images/dialog_progress_spinning.png" alt="" style="float:right" /> 350 351 <p>A {@link android.app.ProgressDialog} is an extension of the {@link android.app.AlertDialog} 352 class that can display a progress animation in the form of a spinning wheel, for a task with 353 progress that's undefined, or a progress bar, for a task that has a defined progression. 354 The dialog can also provide buttons, such as one to cancel a download.</p> 355 356 <p>Opening a progress dialog can be as simple as calling 357 {@link android.app.ProgressDialog#show(Context,CharSequence,CharSequence) 358 ProgressDialog.show()}. For example, the progress dialog shown to the right can be 359 easily achieved without managing the dialog through the 360 {@link android.app.Activity#onCreateDialog(int)} callback, 361 as shown here:</p> 362 363 <pre> 364 ProgressDialog dialog = ProgressDialog.show(MyActivity.this, "", 365 "Loading. Please wait...", true); 366 </pre> 367 368 <p>The first parameter is the application {@link android.content.Context}, 369 the second is a title for the dialog (left empty), the third is the message, 370 and the last parameter is whether the progress 371 is indeterminate (this is only relevant when creating a progress bar, which is 372 discussed in the next section). 373 </p> 374 375 <p>The default style of a progress dialog is the spinning wheel. 376 If you want to create a progress bar that shows the loading progress with granularity, 377 some more code is required, as discussed in the next section.</p> 378 379 380 <h3 id="ShowingAProgressBar">Showing a progress bar</h3> 381 382 <img src="/images/dialog_progress_bar.png" alt="" style="float:right" /> 383 384 <p>To show the progression with an animated progress bar:</p> 385 386 <ol> 387 <li>Initialize the 388 ProgressDialog with the class constructor, 389 {@link android.app.ProgressDialog#ProgressDialog(Context)}.</li> 390 <li>Set the progress style to "STYLE_HORIZONTAL" with 391 {@link android.app.ProgressDialog#setProgressStyle(int)} and 392 set any other properties, such as the message.</li> 393 <li>When you're ready to show the dialog, call 394 {@link android.app.Dialog#show()} or return the ProgressDialog from the 395 {@link android.app.Activity#onCreateDialog(int)} callback.</li> 396 <li>You can increment the amount of progress displayed 397 in the bar by calling either {@link android.app.ProgressDialog#setProgress(int)} with a value for 398 the total percentage completed so far or {@link android.app.ProgressDialog#incrementProgressBy(int)} 399 with an incremental value to add to the total percentage completed so far.</li> 400 </ol> 401 402 <p>For example, your setup might look like this:</p> 403 <pre> 404 ProgressDialog progressDialog; 405 progressDialog = new ProgressDialog(mContext); 406 progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL); 407 progressDialog.setMessage("Loading..."); 408 progressDialog.setCancelable(false); 409 </pre> 410 411 <p>The setup is simple. Most of the code needed to create a progress dialog is actually 412 involved in the process that updates it. You might find that it's 413 necessary to create a second thread in your application for this work and then report the progress 414 back to the Activity's UI thread with a {@link android.os.Handler} object. 415 If you're not familiar with using additional 416 threads with a Handler, see the example Activity below that uses a second thread to 417 increment a progress dialog managed by the Activity.</p> 418 419 <script type="text/javascript"> 420 function toggleDiv(link) { 421 var toggleable = $(link).parent(); 422 if (toggleable.hasClass("closed")) { 423 $(".toggleme", toggleable).slideDown("fast"); 424 toggleable.removeClass("closed"); 425 toggleable.addClass("open"); 426 $(".toggle-img", toggleable).attr("title", "hide").attr("src", "/assets/images/triangle-opened.png"); 427 } else { 428 $(".toggleme", toggleable).slideUp("fast"); 429 toggleable.removeClass("open"); 430 toggleable.addClass("closed"); 431 $(".toggle-img", toggleable).attr("title", "show").attr("src", "/assets/images/triangle-closed.png"); 432 } 433 return false; 434 } 435 </script> 436 <style> 437 .toggleme { 438 padding:0 0 1px 0; 439 } 440 .toggleable a { 441 text-decoration:none; 442 } 443 .toggleable.closed .toggleme { 444 display:none; 445 } 446 #jd-content .toggle-img { 447 margin:0; 448 } 449 </style> 450 451 <div class="toggleable closed"> 452 <a href="#" onclick="return toggleDiv(this)"> 453 <img src="/assets/images/triangle-closed.png" class="toggle-img" /> 454 <strong>Example ProgressDialog with a second thread</strong></a> 455 <div class="toggleme"> 456 <p>This example uses a second thread to track the progress of a process (which actually just 457 counts up to 100). The thread sends a {@link android.os.Message} back to the main 458 Activity through a {@link android.os.Handler} each time progress is made. The main Activity then updates the 459 ProgressDialog.</p> 460 461 <pre> 462 package com.example.progressdialog; 463 464 import android.app.Activity; 465 import android.app.Dialog; 466 import android.app.ProgressDialog; 467 import android.os.Bundle; 468 import android.os.Handler; 469 import android.os.Message; 470 import android.view.View; 471 import android.view.View.OnClickListener; 472 import android.widget.Button; 473 474 public class NotificationTest extends Activity { 475 static final int PROGRESS_DIALOG = 0; 476 Button button; 477 ProgressThread progressThread; 478 ProgressDialog progressDialog; 479 480 /** Called when the activity is first created. */ 481 public void onCreate(Bundle savedInstanceState) { 482 super.onCreate(savedInstanceState); 483 setContentView(R.layout.main); 484 485 // Setup the button that starts the progress dialog 486 button = (Button) findViewById(R.id.progressDialog); 487 button.setOnClickListener(new OnClickListener(){ 488 public void onClick(View v) { 489 showDialog(PROGRESS_DIALOG); 490 } 491 }); 492 } 493 494 protected Dialog onCreateDialog(int id) { 495 switch(id) { 496 case PROGRESS_DIALOG: 497 progressDialog = new ProgressDialog(NotificationTest.this); 498 progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL); 499 progressDialog.setMessage("Loading..."); 500 return progressDialog; 501 default: 502 return null; 503 } 504 } 505 506 @Override 507 protected void onPrepareDialog(int id, Dialog dialog) { 508 switch(id) { 509 case PROGRESS_DIALOG: 510 progressDialog.setProgress(0); 511 progressThread = new ProgressThread(handler); 512 progressThread.start(); 513 } 514 515 // Define the Handler that receives messages from the thread and update the progress 516 final Handler handler = new Handler() { 517 public void handleMessage(Message msg) { 518 int total = msg.arg1; 519 progressDialog.setProgress(total); 520 if (total >= 100){ 521 dismissDialog(PROGRESS_DIALOG); 522 progressThread.setState(ProgressThread.STATE_DONE); 523 } 524 } 525 }; 526 527 /** Nested class that performs progress calculations (counting) */ 528 private class ProgressThread extends Thread { 529 Handler mHandler; 530 final static int STATE_DONE = 0; 531 final static int STATE_RUNNING = 1; 532 int mState; 533 int total; 534 535 ProgressThread(Handler h) { 536 mHandler = h; 537 } 538 539 public void run() { 540 mState = STATE_RUNNING; 541 total = 0; 542 while (mState == STATE_RUNNING) { 543 try { 544 Thread.sleep(100); 545 } catch (InterruptedException e) { 546 Log.e("ERROR", "Thread Interrupted"); 547 } 548 Message msg = mHandler.obtainMessage(); 549 msg.arg1 = total; 550 mHandler.sendMessage(msg); 551 total++; 552 } 553 } 554 555 /* sets the current state for the thread, 556 * used to stop the thread */ 557 public void setState(int state) { 558 mState = state; 559 } 560 } 561 } 562 </pre> 563 </div> <!-- end toggleme --> 564 </div> <!-- end toggleable --> 565 566 567 568 <h2 id="CustomDialog">Creating a Custom Dialog</h2> 569 570 <img src="{@docRoot}images/dialog_custom.png" alt="" style="float:right" /> 571 572 <p>If you want a customized design for a dialog, you can create your own layout 573 for the dialog window with layout and widget elements. 574 After you've defined your layout, pass the root View object or 575 layout resource ID to {@link android.app.Dialog#setContentView(View)}.</p> 576 577 <p>For example, to create the dialog shown to the right:</p> 578 579 <ol> 580 <li>Create an XML layout saved as <code>custom_dialog.xml</code>: 581 <pre> 582 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 583 android:id="@+id/layout_root" 584 android:orientation="horizontal" 585 android:layout_width="fill_parent" 586 android:layout_height="fill_parent" 587 android:padding="10dp" 588 > 589 <ImageView android:id="@+id/image" 590 android:layout_width="wrap_content" 591 android:layout_height="fill_parent" 592 android:layout_marginRight="10dp" 593 /> 594 <TextView android:id="@+id/text" 595 android:layout_width="wrap_content" 596 android:layout_height="fill_parent" 597 android:textColor="#FFF" 598 /> 599 </LinearLayout> 600 </pre> 601 602 <p>This XML defines an {@link android.widget.ImageView} and a {@link android.widget.TextView} 603 inside a {@link android.widget.LinearLayout}.</p> 604 <li>Set the above layout as the dialog's content view and define the content 605 for the ImageView and TextView elements:</p> 606 <pre> 607 Context mContext = getApplicationContext(); 608 Dialog dialog = new Dialog(mContext); 609 610 dialog.setContentView(R.layout.custom_dialog); 611 dialog.setTitle("Custom Dialog"); 612 613 TextView text = (TextView) dialog.findViewById(R.id.text); 614 text.setText("Hello, this is a custom dialog!"); 615 ImageView image = (ImageView) dialog.findViewById(R.id.image); 616 image.setImageResource(R.drawable.android); 617 </pre> 618 619 <p>After you instantiate the Dialog, set your custom layout as the dialog's content view with 620 {@link android.app.Dialog#setContentView(int)}, passing it the layout resource ID. 621 Now that the Dialog has a defined layout, you can capture View objects from the layout with 622 {@link android.app.Dialog#findViewById(int)} and modify their content.</p> 623 </li> 624 625 <li>That's it. You can now show the dialog as described in 626 <a href="#ShowingADialog">Showing A Dialog</a>.</li> 627 </ol> 628 629 <p>A dialog made with the base Dialog class must have a title. If you don't call 630 {@link android.app.Dialog#setTitle(CharSequence) setTitle()}, then the space used for the title 631 remains empty, but still visible. If you don't want 632 a title at all, then you should create your custom dialog using the 633 {@link android.app.AlertDialog} class. However, because an AlertDialog is created easiest with 634 the {@link android.app.AlertDialog.Builder} class, you do not have access to the 635 {@link android.app.Dialog#setContentView(int)} method used above. Instead, you must use 636 {@link android.app.AlertDialog.Builder#setView(View)}. This method accepts a {@link android.view.View} object, 637 so you need to inflate the layout's root View object from 638 XML.</p> 639 640 <p>To inflate the XML layout, retrieve the {@link android.view.LayoutInflater} with 641 {@link android.app.Activity#getLayoutInflater()} 642 (or {@link android.content.Context#getSystemService(String) getSystemService()}), 643 and then call 644 {@link android.view.LayoutInflater#inflate(int, ViewGroup)}, where the first parameter 645 is the layout resource ID and the second is the ID of the root View. At this point, you can use 646 the inflated layout to find View objects in the layout and define the content for the 647 ImageView and TextView elements. Then instantiate the AlertDialog.Builder and set the 648 inflated layout for the dialog with {@link android.app.AlertDialog.Builder#setView(View)}.</p> 649 650 <p>Here's an example, creating a custom layout in an AlertDialog:</p> 651 652 <pre> 653 AlertDialog.Builder builder; 654 AlertDialog alertDialog; 655 656 Context mContext = getApplicationContext(); 657 LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(LAYOUT_INFLATER_SERVICE); 658 View layout = inflater.inflate(R.layout.custom_dialog, 659 (ViewGroup) findViewById(R.id.layout_root)); 660 661 TextView text = (TextView) layout.findViewById(R.id.text); 662 text.setText("Hello, this is a custom dialog!"); 663 ImageView image = (ImageView) layout.findViewById(R.id.image); 664 image.setImageResource(R.drawable.android); 665 666 builder = new AlertDialog.Builder(mContext); 667 builder.setView(layout); 668 alertDialog = builder.create(); 669 </pre> 670 671 <p>Using an AlertDialog for your custom layout lets you 672 take advantage of built-in AlertDialog features like managed buttons, 673 selectable lists, a title, an icon and so on.</p> 674 675 <p>For more information, refer to the reference documentation for the 676 {@link android.app.Dialog} and {@link android.app.AlertDialog.Builder} 677 classes.</p> 678 679 680 681