Android: Create a Custom Dialog Window with Dialog.builder

In the previous tutorial I showed you how you can inflate an activity based on a item selection within a ListView. The content was stored in Arrays and thus it saved you a lot of time by not creating numerous of different activities (for each item in your ListView). In that tutorial we also used a dialog window to show the location of the Dutch provinces. I was not completely satisfied how we implemented it. Therefore in this tutorial we will create a custom Dialog window based on the Android Dialog.Builder. In case you missed the previous tutorial click here.

In our demo app we used an item selection in a ListView to populate an Activity, in that activity we had a button which than subsequently was populated based on the ListView selection. In our demo app, we used the button to provide the user information on where the province is located in the Netherlands. In this tutorial we make a custom dialog window, with an image showing where the province exactly is located on a map in the Netherlands. See the screenshot below:

For a small video demo of this app (including the previous tutorials):

Some of the content in this post is maybe not as useful if you missed the previous tutorial . But I try to keep things apart, so it’s easy to read this post in case you didn’t read the previous post.

Open your MainActivity class. We will add another Array of images. Each image representing the location of the province. Note that this is not relevant if your not following the complete tutorial. In that case skip this part.

 // images for the dialog location of the province 
	 int[] myImageList2 = new int[]{
			 R.drawable.locatednh,
			 R.drawable.locatedzh,
			 R.drawable.locatedflevo,
			 R.drawable.locatedut,
			 R.drawable.locatedzl,
			 R.drawable.locatednb,
			 R.drawable.locatedgl,
			 R.drawable.locatedover,
			 R.drawable.locatedgr,
			 R.drawable.locatedfries,
			 R.drawable.locatedlb,
			 R.drawable.locateddrenthe
			 
	 };

Continue in this class and add in your onItem click the following:

final int prvDialogImg = myImageList2[position-1];

Note that we only adding a new reference to our new ArrayList. Continue by adding your new variable in the Intent.

intent.putExtra("prvDialogImg", prvDialogImg);

—The following part might be of interest if you didn’t follow the previous tutorial. —

Go to your Layout folder and create an new XML called customdialog.xml. In this layout file we define the custom layout. We will define an ImageView holding the province image and a button to close the dialog window. In case your not following the tutorial, you can of course set any widgets you want.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <ImageView
        android:id="@+id/imgDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"/>
 
 
     <Button
        android:id="@+id/btnDialogClose"
        android:layout_width="200px"
        android:layout_height="wrap_content"
        android:text="Close"
        android:layout_marginBottom="10dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/imgDialog"
        />
 
</RelativeLayout>

Now open your DetailsActivity java class. In this class we need to redefine the onItemClick of our Button click. Remember this is the button in our layout which initiates the Dialog Window.

You can see the code below, a few notes on the code:
-ivdialog (our ImageView) takes image2. Image2 refers to the selection made in our ListView.
- Note that we use dialog.findViewById(R.id.btnDialogClose) instead of just findViewById. This is actually very important because without dialog. in front of your reference you try to inflate the button (or ImageView) in your main layout instead of in the dialog window.
- Dont forget to call dialog.show()

btn.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
            	dialog = new Dialog(DetailActivity.this);
                dialog.setContentView(R.layout.customdialog);
                dialog.setCancelable(true);
                dialog.setTitle("Location Dutch Province");
              
                
                image2 = extras.getInt("prvDialogImg");
                Button btnclose = (Button) dialog.findViewById(R.id.btnDialogClose);
                ImageView ivdialog = (ImageView)dialog.findViewById(R.id.imgDialog);
                ivdialog.setImageResource(image2);

                btnclose.setOnClickListener(new OnClickListener() { // shows null pointer error at this line
                    @Override
                    public void onClick(View v) {
                    	dialog.cancel();
                    }
                });

                dialog.show();
            }
        });

1 Response

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*