There are numerous types of dialogs available within the Android SDK, such as DatePickerDialogs, ProgressDialogs, and generic dialogs like AlertDialogs. You can also create your own custom dialogs for use within your applications.

Custom dialogs like a password confirmation dialog (Figure 1) are generated from a special AlertDialog class (android.app.AlertDialog). The custom aspect of the dialog comes from the fact that instead of using the built-in dialog types, with their default layouts, you load a developer-defined layout to use instead. In this quick tutorial, we provide the steps required to implement a custom password confirmation dialog to collect a new password from the user.

Step 1: Design the Custom Dialog Layout

First you need to design the content of your custom dialog in a layout resource file. In this case, our custom layout will be a password confirmation dialog, which means we will need two EditText controls for inputting the password. We will also want some other text controls for labels and the like.

Create a layout resource called /res/layout/password_dialog.xml. The contents of this resource file are shown below:

This simple layout file relies upon a few other string resources you’ll need to define (labels, see the full source code for details if you need help defining string resources) as well as the EditText input type attribute called textPassword, which masks the password as it is typed into the control. This figure shows what the layout design looks like:

Step 2: Define a New Password Dialog within your Activity Class

Now let’s add the new Dialog to your basic Activity class.

Begin by editing your Activity class and adding the following class member variable:

1

privatestaticfinalintMY_PASSWORD_DIALOG_ID = 4;

This defines a unique Dialog identifier for our Activity class. The value is an arbitrary number, but needs to be unique within the Activity.

Step 3: Inflate the Custom Dialog Layout

To create Dialog instances, you must provide a case for your custom password confirmation dialog in the onCreateDialog() method of your Activity class. When the showDialog() method is called, it triggers a call to this method, which must return the appropriate Dialog instance. Therefore, we begin the specific case statement for your new Dialog within the onCreateDialog() method here by inflating our custom layout file that was designed in the previous step and retrieving the important controls we will want to interact with from within it using the findViewById() method.

As you can see, we grab the two EditText controls that will store the password data, as well as the TextView control where we can display the password error text (passwords either match or do not match).

Step 4: Implement the Password TextWatcher

The next step of our onCreateDialog() case statement implementation for the custom dialog is to register a TextWatcher on the second EditText control so that we can listen for and detect password matches as the user types in order to display the proper string text in the error TextView control (matches/does not match).

Here’s the implementation of the TextWatcher, which is assigned to the second password EditText control using the addTextChangedListener() method.

The TextWatcher has three callback methods, but we’re really only interested in the afterTextChanged() method implementation. Here we check the text of the two EditText controls, compare them, and set the error text in the TextView. Here is what the TextWatcher might show when the passwords match:

Step 5: Use the Dialog Builder to Configure the Dialog

The next step of our onCreateDialog() case statement implementation for the custom password confirmation dialog is to use the AlertDialog.Builder class to begin to configure the dialog settings.

1

2

3

AlertDialog.Builder builder = newAlertDialog.Builder(this);

builder.setTitle("Enter Password");

builder.setView(layout);

We set the title of the dialog using the setTitle() method, but the most important thing we do here is use the setView() method to attach our custom layout we just inflated to the dialog. This is how we modify the controls used within our dialog, making it have custom display and developer-defined behavior.

Step 6: Set the Positive and Negative Button Handlers for the Custom Password Dialog

Next, we need to configure the positive and negative buttons associated with our dialog. Recall that dialogs will be reused if displayed more than once. With our password confirmation dialog, we want to make sure to forcefully remove the dialog from the Activity’s dialog pool so that it cannot be reused. We do not want any residual password information being stored after our password dialog is dismissed, whether it is confirmed or dismissed.

We get rid of the dialog in both the negative and positive button click handlers using the removeDialog() method. However, in the positive button handler, we also retrieve the contents of the EditText controls and, if they match, display the password as a Toast message. In most cases, you would not use a Toast, but would save off the password using the method of your choice (preferences, etc.).

Step 7: Generate the Custom AlertDialog from the Builder

Your dialog is completely configured. Now use the create() method of the AlertDialog.Builder class to generate the appropriate AlertDialog and return it, thus ending your case statement for this dialog within the onCreateDialog() method of the Activity class.

1

2

AlertDialog passwordDialog = builder.create();

returnpasswordDialog;

Step 8: Triggering the Password Confirmation Dialog to Display

Finally, you are ready to trigger your password confirmation dialog to display as required. For example, you might add another Button control to your Activity’s screen to trigger your dialog to display. Its click handler might look something like this:

1

2

3

publicvoidonPasswordDialogButtonClick(View v) {

showDialog(MY_PASSWORD_DIALOG_ID);

}

Conclusion

Dialogs are a powerful user interface tool that can help you keep your application user interface flexible and uncluttered. Dialogs can contain your own layout resources with different controls, allowing you to create custom controls like password confirmation dialogs. Custom dialogs are generally created using the AlertDialog class, with all its features.