//
you're reading...
Android, Dialog

Customize AlertDialog and read values off them in the onClickListener

After spending quite a few hours starting at the blinking cursor, I think I’ve finally wrapped my head over this topic of Dialog vs AlertDialog.

Dialog is a base class that all dialog implementations derive from. The Android documentation seems to suggest that one should not create a Dialog directly (Although it does provide a working example) and use an AlertDialog instead (In my case this example did not work).

AlertDialog is derived from Dialog and provides additional functionality in terms of Dialog Title, Icon, 3 lines of message you can display to the user. It also provides for lists, checkboxes etc. So you can decide which one to choose yourself.

AlertDialog

However, for a newbie like me, it is not clear where these code fragments need to go and how the customization is done. In my case, I wanted to add a TextView which said “Please Enter Your Name” and an EditText below it. I also wanted that I should not have to manage the buttons OK and Cancel as the AlertDialog provides them already.

I’ve finally managed to display a customized AlertDialog and so here it goes:

Custom AlertDialog

Custom AlertDialog

Create an xml layout file called my_dialog.xml, this is the custom view that I want to display in the dialog box along with the buttons that the AlertDialog offers.

my_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/dialog_root"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp" >

<TextView
android:id="@+id/textViewListName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Please enter a name for the list:"
android:textAppearance="?android:attr/textAppearanceMedium" />

<EditText
android:id="@+id/dialog_editTextName"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<requestFocus />
</EditText>

</LinearLayout>

This is an ordinary file. Just two things are to be kept in mind here.

  1. The layout file is called my_dialog.xml
  2. The root level LinearLayoutView has id=”@+id/dialog_root”

Since an AlertDialogs constructors are protected (why??) we can’t instantiate them. We have to use the Builder class for creating the dialog we need.

In any activity that I need to show this dialog in,  I would add the following to the activity’s OnCreate:


AlertDialog.Builder builder;
AlertDialog         dialog;

LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(
Context.LAYOUT_INFLATER_SERVICE);
final View layout = inflater.inflate(
R.layout.dialog_addshoppinglist,
    ViewGroup) findViewById(R.id.my_dialog));

builder = new AlertDialog.Builder(this);
builder.setView(layout);
dialog = builder.create();
dialog.setCancelable(true);
dialog.setMessage("This is my custom dialog");

dialog.setButton(

DialogInterface.BUTTON_POSITIVE,

"OK",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
EditText txtName = layout.findViewByID(R.id.my_dialog_text1);
String   name txtName.getText().toString();
dialog.dismiss();
			          }
});

dialog.setButton(

DialogInterface.BUTTON_NEGATIVE, "Cancel",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
Log.d("AlertDialog", "Negative");
			}
		});

dialog.show();

The LayoutInflater.inflate method is in the form:

View layout = inflater.inflate(R.layout.dialog_addshoppinglist,
                         (ViewGroup) findViewById(R.id.my_dialog));

The first parameter is the resource xml which has the layout description. The second parameter is a reference to the top level linear layout resource in the same layout file. We’re basically telling the inflate the resource as a view starting at ViewGroup R.id.m_dialog and it’s children. The second parameter is optional, but I found things to work better if I provided them.

The line that works all the magic of inserting my custom view into the standard AlertDialog’s view is the line:


builder.setView(layout);

This line, inserts the view that I’ve just inflated from the resource into the layout of the standard AlertDialog.

Another thing worth a mention is how to read values off of widgets in the dialog button’s DialogInterface.onClickListener. See below:

final View layout = inflater.inflate(
 R.layout.dialog_addshoppinglist,
 ViewGroup) findViewById(R.id.my_dialog));

The trick is the use of the final modifier in the declaration of the layout variable above. This way the variable layout becomes available for use the the DialogInterface.onClick listener.

As you can see, I’ve manged to leverage some of the functionality available from AlertDialog and add some customization of my own. If you do not want to have any standard AlertDialog functionality, you might be better off sub-classing the Dialog class.

This is how much I have manged to see Dialogs vs AlertDialogs. I will go into more later, right now I’m headed back to Dialog customization.

About these ads

Discussion

4 thoughts on “Customize AlertDialog and read values off them in the onClickListener

  1. Very helpful!
    I still wonder… is using just Dialog instead of customized AlertDialog discouraged? If it is, then why?
    Best!

    Posted by carvedblock | April 18, 2012, 10:50 pm
  2. Very Helpful!

    I still wonder, if using Dialog instead of customized AlertDialog is discouraged (is it?), then why?

    Best!

    Posted by carvedblock | April 18, 2012, 10:51 pm
  3. very helpfull
    how if we display a new incoming message in alertDialog ??
    its possible ??
    please give me example of source code

    Posted by joe | August 3, 2012, 6:49 pm

Trackbacks/Pingbacks

  1. Pingback: how to align message in alertdialog? | Android Development tutorial | Android Development tutorial - December 7, 2012

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: