Showing Complex Alerts to the User in the Android Programming Environment

In the article How to show Alerts to the user in the Android Programming Environment we saw how to create simple alerts with Toasts and Alerts Dialogs. Now let's continue working a bit more with Alert Dialogs in a more complex environment. This is the exact way that I usually work with Alert Dialogs in applications. Let's define the environment and what we are going to do.

Imagine a large form in one Activity, with lots of buttons and clickable objects. Some of these objects will open Alerts Dialogs. I like having things organized or at least, as organized as possible, so let's organize the AlertsDialogs in just one place. We will accomplish this by using the onCreateDialog method from the Activity. This method receives an integer value (this value will be the different Alerts we are going to show) and here all alerts will be generated and shown. We have to define a constant value for each alert dialog, something like this

static final int DIALOG_IMAGE = 0;

static final int DIALOG_OPTIONS = 1;

From “outside” (Outside of the onCreateDialog, in a onClickListener for example) we can call to the onCreateDialog method with the following line

showDialog(DIALOG_IMAGE)

and we give to it the constant we have defined to the dialog we want to show.

Once this is called, it will go automatically to the onCreateDialog method

protected Dialog onCreateDialog(int id) {

}

Here we will do a “switch-case” statement to find out which dialog the user wanted to show

switch (id) {

case DIALOG_IMAGE:

return dialog;

case DIALOG_OPTIONS:

return dialog2

}

Here we will return the dialog once it is built.

Now that we have learned how to organize and launch our Dialogs, it's time to re-shape the content of the AlertDialog. Let's do it with a simple example:

Imagine that in our application we have a photo gallery (we will learn how to create photo galleries in Android with other articles, don't worry though it is very simple!!) at the moment the images are a bit small and we want to see them larger. We could program the “click-on-the-image-to-enlarge” functionality.

So, when we click on one of the images in the gallery it will appear as an AlertDialog with a larger image.

To do this, we need to create a layout with the widgets structure we want to show in the AlertDialog, in our case, we are just going to show an Image so it will be something like this.

<LinearLayout android:id="@+id/layout_image"

android:layout_width="fill_parent" android:layout_height="fill_parent"

android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">

<FrameLayout android:id="@+id/body" android:layout_width="fill_parent"

android:layout_height="fill_parent">

<ImageView android:id="@+id/image_view"

android:layout_width="300px" android:layout_height="250px"

android:padding="5px" android:layout_marginTop="5px" >

</ImageView>

</FrameLayout>

</LinearLayout>

and we call it image_dialog.xml for example

Then, in the Android code we have to get this view and create an AlertDialog Object:

imageDialog = new Dialog(TraficoActivity.this);

imageDialog.setContentView(R.layout.image_dialog );

ImageView imageV = (ImageView) imageDialog.findViewById(R.id.image_view);

And we create an ImageView object that will contain the enlarged image.

When we click on the image? Inside the onClickListener defined to the event, we do the following:

imageV.setImageBitmap(whateverImageYouWantToPut);

And we call the ShowDialog(IMAGE_DIALOG) method (Remember from first paragraph?).

That easy!

In our next article we will continue working with Dialogs, while learning how to construct other kinds of Alerts, like selectable-dialogs, time-dialog, hour-dialog... Stay close!