Displaying an Android Pop Up Dialog (AlertDialog)

This article will demonstrate how to display a pop up dialog (AlertDialog) in Android. Be sure to check out part 2 when you are done.

Why Use a Pop Up Dialog

Sometimes you want to be able to quickly display a small amount of information to the user. Pop up dialogs are perfect for doing this. The user can see and interact with a small message, without being driven too far away from the main activity.

However, make sure you don't go overboard with your use of pop up dialogs. If you are trying to display a lot of information they can be ugly looking, and users could become annoyed if too many of them start showing up.

Screenshot of the app showing a pop up dialog

Create a Simple Layout to Demonstrate

First lets create a simple layout for our demo app. Our layout will consist of only a button. When you press this button, the pop up will appear.

Listed below is the complete source for the layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <Button android:layout_width="wrap_content"
  android:layout_height="wrap_content" android:text="ShowPopUp"
  android:id="@+id/buttonShowPopUp" android:layout_margin="20dip"></Button>
</LinearLayout>

Create a Function to Display the Pop Up

Now, lets create a function that when called, will display the pop up message box.

To create a pop up, we use an AlertDialogBuilder. The builder allows us to set a number of parameters. After they have been set, we use the builder to build the dialog so we can then display it.

It is important to note that the create method of the AlertDialogBuilder does not show the dialog. You must remember to call the Show method.

The code for this function is listed below.

private void showSimplePopUp() {

 AlertDialog.Builder helpBuilder = new AlertDialog.Builder(this);
 helpBuilder.setTitle("Pop Up");
 helpBuilder.setMessage("This is a Simple Pop Up");
 helpBuilder.setPositiveButton("Ok",
   new DialogInterface.OnClickListener() {

    public void onClick(DialogInterface dialog, int which) {
     // Do nothing but close the dialog
    }
   });

 // Remember, create doesn't show the dialog
 AlertDialog helpDialog = helpBuilder.create();
 helpDialog.show();
}

Call showSimplePopUp When Pressing the Button

Now we will add an OnClickListener to the Show Pop Up button which calls the function we just created. This code is listed below.

Button showPopUpButton = (Button) findViewById(R.id.buttonShowPopUp);
showPopUpButton.setOnClickListener(new OnClickListener() {

 @Override
 public void onClick(View v) {
  showSimplePopUp();
 }
});

Run the Program

Now run the program, and press the button to display your Pop Up.

The complete source for the activity is listed below.

package com.dreamdom.popup;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  Button showPopUpButton = (Button) findViewById(R.id.buttonShowPopUp);
  showPopUpButton.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {
    showSimplePopUp();
   }
  });
 }

 private void showSimplePopUp() {

  AlertDialog.Builder helpBuilder = new AlertDialog.Builder(this);
  helpBuilder.setTitle("Pop Up");
  helpBuilder.setMessage("This is a Simple Pop Up");
  helpBuilder.setPositiveButton("Ok",
    new DialogInterface.OnClickListener() {

     public void onClick(DialogInterface dialog, int which) {
      // Do nothing but close the dialog
     }
    });

  // Remember, create doesn't show the dialog
  AlertDialog helpDialog = helpBuilder.create();
  helpDialog.show();
 }

Next Steps

It is possible to create more advanced Pop Up dialogs. For example, you can use a pop up dialog with a custom layout. Be sure to check out part 2 to continue learning.