Tutorial: Modal Dialogs

darolla · by **darolla** » Sat Jan 10, 2009 2:32 pm

Hello everyone,

this is my first tutorial and I hope it helps you out there.

Well I had some troubles (who hasn't ?) using dialogs, especially modal dialogs.

I'd like to show three steps how to deal with this topic.

Lets start...

Greetings,
DaRolla

darolla · by **darolla** » Sat Jan 10, 2009 2:35 pm

The first way is to use an AlertDialog.Builder.

It's pretty easy...

Here comes the empty Activity just starting the dialog.

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
package tut.orial;
 
import android.app.Activity;
 
import android.app.AlertDialog;
 
import android.app.AlertDialog.Builder;
 
import android.os.Bundle;
 
public class First extends Activity {
 
        @Override
 
        public void onCreate(Bundle savedInstanceState) {
 
                super.onCreate(savedInstanceState);
 
                Builder builder = new AlertDialog.Builder(this);
 
                builder.setTitle("beer or wine");
 
                builder.setIcon(R.drawable.beer);
 
                builder.setMessage("which one do you prefer?");
 
                builder.setPositiveButton("ok", null);
 
                builder.setNegativeButton("cancel", null);
 
                builder.show();
 
        }
 
}
 
Parsed in 0.033 seconds,  using GeSHi 1.0.8.4

You just need to instantiate an AlertDialog.Builder and use some setters. The listeners for the two buttons are already implemented.

Btw: the used R.drawable.beer is attached...

Greetings,
DaRolla

darolla · by **darolla** » Sat Jan 10, 2009 2:44 pm

Lets make things more difficult.

We'd like to have a modal dialog with some checkboxes.

It's not possible (please correct me if I'm wrong) to add some XML to the AlertDialog.Builder.

So we need to deal with a Dialog.

Unfortunately it's not possible to add our nice icon to the titlebar (I haven't seen a setter for this).

This is the beerwine.xml (the used bg.png is attached):

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
<?xml version="1.0" encoding="utf-8"?>
 
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
        android:orientation="vertical" android:stretchColumns="0"
 
        android:background="@drawable/bg" android:layout_gravity="center_vertical|center_horizontal"
 
        android:layout_height="wrap_content" android:layout_width="wrap_content">
 
        <TableRow>
 
                <TextView android:textColor="#ffffff" android:text="beer:"
 
                        android:textSize="16px" android:layout_marginLeft="6dip"
 
                        android:layout_gravity="center_vertical" />
 
                <CheckBox android:id="@+id/checkboxBeer"
 
                        android:layout_gravity="right|top" />
 
        </TableRow>
 
        <TableRow>
 
                <TextView android:textColor="#ffffff" android:text="wine:"
 
                        android:textSize="16px" android:layout_marginLeft="6dip"
 
                        android:layout_gravity="center_vertical" />
 
                <CheckBox android:id="@+id/checkboxWine"
 
                        android:layout_gravity="right|top" />
 
        </TableRow>
 
        <TableRow android:layout_marginTop="230px">
 
                <Button android:id="@+id/buttonOK" android:text="ok"
 
                        android:layout_height="wrap_content" android:layout_width="wrap_content" />
 
        </TableRow>
 
</TableLayout>
 
Parsed in 0.005 seconds,  using GeSHi 1.0.8.4

The Java is pretty simple, just some more setters...

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
package tut.orial;
 
import android.app.Activity;
 
import android.app.Dialog;
 
import android.os.Bundle;
 
public class Second extends Activity {
 
        @Override
 
        public void onCreate(Bundle savedInstanceState) {
 
                super.onCreate(savedInstanceState);
 
                Dialog dialog = new Dialog(this);
 
                dialog.setContentView(R.layout.beerwine);
 
                dialog.setTitle("beer or wine");
 
                dialog.show();
 
        }
 
}
 
Parsed in 0.059 seconds,  using GeSHi 1.0.8.4

Greetings,
DaRolla

darolla · by **darolla** » Sat Jan 10, 2009 2:48 pm

The problem is that pressing the ok buttons doesn't do anything. So we need to add a listener. Well, that shouldn't be that hard :roll:

The Listener needs a reference to the dialog in order to close it using dialog.dismiss(). Therefor we need to pass the variable to the nested class using a constructor with a parameter.

Here comes the Java with the Listener:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
package tut.orial;
 
import android.app.Activity;
 
import android.app.Dialog;
 
import android.os.Bundle;
 
import android.view.View;
 
import android.view.View.OnClickListener;
 
import android.widget.Button;
 
public class Second extends Activity {
 
        @Override
 
        public void onCreate(Bundle savedInstanceState) {
 
                super.onCreate(savedInstanceState);
 
                Dialog dialog = new Dialog(this);
 
                dialog.setContentView(R.layout.beerwine);
 
                dialog.setTitle("beer or wine");
 
                dialog.show();
 
                Button buttonOK = (Button) dialog.findViewById(R.id.buttonOK);
 
                buttonOK.setOnClickListener(new OKListener(dialog));
 
        }
 
        protected class OKListener implements OnClickListener {
 
                private Dialog dialog;
 
                public OKListener(Dialog dialog) {
 
                        this.dialog = dialog;
 
                }
 
                public void onClick(View v) {
 
                        dialog.dismiss();
 
                }
 
        }
 
}
 
Parsed in 0.038 seconds,  using GeSHi 1.0.8.4

Greetings,
DaRolla

darolla · by **darolla** » Sat Jan 10, 2009 2:53 pm

But we still do not have the feature setting or getting the checkbox states.

Ok, we can do this somehow, maybe the same way we are working with the ok button.

Imagine a dialog with more than 2 checkboxes and 1 button!

The Activity calling the dialog is full of code for the dialog (esp. Listeners).

And this way it's awful to reuse the dialog.

Lets take a look how to put the dialog and its code into a class similar to an Activity...

Greetings,
DaRolla

darolla · by **darolla** » Sat Jan 10, 2009 3:25 pm

Instead of extending an Activity we now extend Dialog.

The onCreate method is the same as in an Activity.

But we need a constructor to let the user check or uncheck the 2 checkboxes starting the dialog.

The Listener for the ok button is the same, but we need to qualify the interface OnClickListener by android.view.View.OnClickListener or otherwise the android.content.Dialog.Interface.OnClickListener is taken.

The beerwine.xml is the same as in Second.

Here comes the empty Activity opening our own BeerWineDialog with both checkboxes checked:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
package tut.orial;
 
import android.app.Activity;
 
import android.os.Bundle;
 
public class Third extends Activity {
 
        @Override
 
        public void onCreate(Bundle savedInstanceState) {
 
                super.onCreate(savedInstanceState);
 
                BeerWineDialog dialog = new BeerWineDialog(this, true, true);
 
                dialog.show();
 
        }
 
}
 
Parsed in 0.037 seconds,  using GeSHi 1.0.8.4

And this is the BeerWineDialog:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
package tut.orial;
 
import android.app.Dialog;
 
import android.content.Context;
 
import android.os.Bundle;
 
import android.view.View;
 
import android.widget.Button;
 
import android.widget.CheckBox;
 
public class BeerWineDialog extends Dialog {
 
        private boolean beer;
 
        private boolean wine;
 
        public BeerWineDialog(Context context, boolean beer, boolean wine) {
 
                super(context);
 
                this.beer = beer;
 
                this.wine = wine;
 
        }
 
        @Override
 
        public void onCreate(Bundle savedInstanceState) {
 
                super.onCreate(savedInstanceState);
 
                setContentView(R.layout.beerwine);
 
                setTitle("beer or wine");
 
                CheckBox cbBeer = (CheckBox) findViewById(R.id.checkboxBeer);
 
                cbBeer.setChecked(beer);
 
                CheckBox cbWine = (CheckBox) findViewById(R.id.checkboxWine);
 
                cbWine.setChecked(wine);
 
                Button buttonOK = (Button) findViewById(R.id.buttonOK);
 
                buttonOK.setOnClickListener(new OKListener());
 
        }
 
        private class OKListener implements android.view.View.OnClickListener {
 
                @Override
 
                public void onClick(View v) {
 
                        BeerWineDialog.this.dismiss();
 
                }
 
        }
 
}
 
Parsed in 0.040 seconds,  using GeSHi 1.0.8.4

Greetings,
DaRolla

darolla · by **darolla** » Sat Jan 10, 2009 3:31 pm

The final problem to solve is how the calling class Third gets the states of the checkboxes from the BeerWineDialog.

Using just simple getters won't work.

So it's time for our own ReadyListener. It's fired when the ok button is pressed. It's defined as nested interface. It's implemented in Third and it's instance is passed through the BeerWineDialog constructor.

Greetings,
DaRolla

darolla · by **darolla** » Sat Jan 10, 2009 3:46 pm

Please note that inside the OKListener.onClick the checkboxes states are read, because the local variables beer and whine are only the initial states. This is the BeerWineDialog:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
package tut.orial;
 
import android.app.Dialog;
 
import android.content.Context;
 
import android.os.Bundle;
 
import android.view.View;
 
import android.widget.Button;
 
import android.widget.CheckBox;
 
public class BeerWineDialog extends Dialog {
 
        public interface ReadyListener {
 
                public void ready(boolean beer, boolean wine);
 
        }
 
        private boolean beer;
 
        private boolean wine;
 
        private ReadyListener readyListener;
 
        public BeerWineDialog(Context context, boolean beer, boolean wine, ReadyListener readyListener) {
 
                super(context);
 
                this.beer = beer;
 
                this.wine = wine;
 
                this.readyListener = readyListener;
 
        }
 
        @Override
 
        public void onCreate(Bundle savedInstanceState) {
 
                super.onCreate(savedInstanceState);
 
                setContentView(R.layout.beerwine);
 
                setTitle("beer or wine");
 
                CheckBox cbBeer = (CheckBox) findViewById(R.id.checkboxBeer);
 
                cbBeer.setChecked(beer);
 
                CheckBox cbWine = (CheckBox) findViewById(R.id.checkboxWine);
 
                cbWine.setChecked(wine);
 
                Button buttonOK = (Button) findViewById(R.id.buttonOK);
 
                buttonOK.setOnClickListener(new OKListener());
 
        }
 
        private class OKListener implements android.view.View.OnClickListener {
 
                @Override
 
                public void onClick(View v) {
 
                        CheckBox cbBeer = (CheckBox) findViewById(R.id.checkboxBeer);
 
                        CheckBox cbWine = (CheckBox) findViewById(R.id.checkboxWine);
 
                        readyListener.ready(cbBeer.isChecked(), cbWine.isChecked());
 
                        BeerWineDialog.this.dismiss();
 
                }
 
        }
 
}
 
Parsed in 0.042 seconds,  using GeSHi 1.0.8.4

This is Third logging the checkboxes states after closing the BeerWineDialog (using an instance of ReadyListener interface):

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
package tut.orial;
 
import android.app.Activity;
 
import android.os.Bundle;
 
import android.util.Log;
 
public class Third extends Activity {
 
        @Override
 
        public void onCreate(Bundle savedInstanceState) {
 
                super.onCreate(savedInstanceState);
 
                BeerWineDialog dialog = new BeerWineDialog(this, true, true, new OnReadyListener());
 
                dialog.show();
 
        }
 
        private class OnReadyListener implements BeerWineDialog.ReadyListener {
 
                @Override
 
                public void ready(boolean beer, boolean wine) {
 
                        Log.d("Third", "checkbox beer is " + beer);
 
                        Log.d("Third", "checkbox wine is " + wine);
 
                }
 
        }
 
}
 
Parsed in 0.039 seconds,  using GeSHi 1.0.8.4

Greetings,
DaRolla

darolla · by **darolla** » Sat Jan 10, 2009 3:58 pm

Well, thats it

I hope you understand my code and my explainations.

For questions just post here or write me a pm.

Thanks for reading.

Greetings,
DaRolla

PS: feel free to use the attached code.

PSS: I've found the beer picture here.

MrSnowflake · by **MrSnowflake** » Sat Jan 10, 2009 5:29 pm

Looks awsome, you made a big effort to post this tutorial, kudos to you

.

I like the part where you advise to extends Dialog, as I don't think a lot of beginners would consider this!

marcus_cps · by **marcus_cps** » Fri Mar 13, 2009 8:44 pm

Hi!

Very good tutorial!!
Thanks a lot... It was very useful.

I've been thinking... what about changing the entire dialog style (colors and everything).
Is it possible to change the dialog title background color? Or maybe use a background image for that?

Thanks very much.

songotho · by **songotho** » Wed Apr 08, 2009 10:39 am

Hi,

Thanks for your tutorial!

I have the same question with marcus_cps.
How can we change colors for title and messages ... in dialog.

Thanks,

--Alex

songotho · by **songotho** » Wed Apr 29, 2009 3:31 pm

I have work with AlertDialog and I have a question about the this: I have form in Dialog, for example:

alert_dialog.xml

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout
 
    xmlns:android="http://schemas.android.com/apk/res/android" 
 
    android:layout_width="fill_parent" 
 
    android:layout_height="fill_parent"
 
    android:orientation="vertical">
 
    <Button android:id="@+id/text_entry_button"
 
            android:layout_width="fill_parent" 
 
            android:layout_height="wrap_content"
 
            android:text="DIALOG_TEXT_ENTRY"/>
 
</LinearLayout>
 
Parsed in 0.002 seconds,  using GeSHi 1.0.8.4

alert_dialog_text_entry.xml

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
    android:layout_width="fill_parent"
 
    android:layout_height="wrap_content"
 
    android:orientation="vertical">
 
    <TextView 
 
        android:id="@+id/username_view"
 
        android:layout_height="wrap_content"
 
        android:layout_width="wrap_content"
 
        android:layout_marginLeft="20dip"
 
        android:layout_marginRight="20dip"
 
        android:text="@string/alert_dialog_username"
 
        android:gravity="left"
 
        android:textAppearance="?android:attr/textAppearanceMedium" />
 
    <EditText
 
        android:id="@+id/username_edit"
 
        android:layout_height="wrap_content"
 
        android:layout_width="fill_parent"
 
        android:layout_marginLeft="20dip"
 
        android:layout_marginRight="20dip"
 
        android:scrollHorizontally="true"
 
        android:autoText="false"
 
        android:capitalize="none"
 
        android:gravity="fill_horizontal"
 
        android:textAppearance="?android:attr/textAppearanceMedium" />
 
    <TextView
 
        android:id="@+id/password_view"
 
        android:layout_height="wrap_content"
 
        android:layout_width="wrap_content"
 
        android:layout_marginLeft="20dip"
 
        android:layout_marginRight="20dip"
 
        android:text="@string/alert_dialog_password"
 
        android:gravity="left"
 
        android:textAppearance="?android:attr/textAppearanceMedium" />
 
    <EditText
 
        android:id="@+id/password_edit"
 
        android:layout_height="wrap_content"
 
        android:layout_width="fill_parent"
 
        android:layout_marginLeft="20dip"
 
        android:layout_marginRight="20dip"
 
        android:scrollHorizontally="true"
 
        android:autoText="false"
 
        android:capitalize="none"
 
        android:gravity="fill_horizontal"
 
        android:password="true"
 
        android:textAppearance="?android:attr/textAppearanceMedium" />
 
</LinearLayout>
 
Parsed in 0.007 seconds,  using GeSHi 1.0.8.4

AlertDialogSamples.java

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
package com.example.android.apis.app;
 
import android.app.Activity;
 
import android.app.AlertDialog;
 
import android.app.Dialog;
 
import android.app.ProgressDialog;
 
import android.content.DialogInterface;
 
import android.os.Bundle;
 
import android.os.Handler;
 
import android.os.Message;
 
import android.view.LayoutInflater;
 
import android.view.View;
 
import android.view.View.OnClickListener;
 
import android.widget.Button;
 
import com.example.android.apis.R;
 
public class AlertDialogSamples extends Activity {
 
private static final int DIALOG_TEXT_ENTRY = 7;
 
@Override
 
protected Dialog onCreateDialog(int id) {
 
 switch (id) {
 
 case DIALOG_TEXT_ENTRY:
 
            LayoutInflater factory = LayoutInflater.from(this);
 
            final View textEntryView = factory.inflate(R.layout.alert_dialog_text_entry, null);
 
            return new AlertDialog.Builder(AlertDialogSamples.this)
 
                .setIcon(R.drawable.alert_dialog_icon)
 
                .setTitle(R.string.alert_dialog_text_entry)
 
                .setView(textEntryView)
 
                .setPositiveButton(R.string.alert_dialog_ok, new DialogInterface.OnClickListener() {
 
                    public void onClick(DialogInterface dialog, int whichButton) {
 
                    }
 
                })
 
                .setNegativeButton(R.string.alert_dialog_cancel, new DialogInterface.OnClickListener() {
 
                    public void onClick(DialogInterface dialog, int whichButton) {
 
                    }
 
                })
 
                .create();
 
        }
 
        return null;
 
    }
 
 @Override
 
        protected void onCreate(Bundle savedInstanceState) {
 
        super.onCreate(savedInstanceState);
 
        setContentView(R.layout.alert_dialog);
 
        Button textEntry = (Button) findViewById(R.id.text_entry_button);
 
        textEntry.setOnClickListener(new OnClickListener() {
 
            public void onClick(View v) {
 
                showDialog(DIALOG_TEXT_ENTRY);
 
            }
 
        });
 
   }
 
}
 
Parsed in 0.045 seconds,  using GeSHi 1.0.8.4

So how can I get data in DIALOG_TEXT_ENTRY when I type in form of dialog?
I have tried, so it cant define any variables or ....
Anyone help me,please?

Thanks,

--Alex

ExYndiano · by **ExYndiano** » Fri Sep 18, 2009 9:22 pm

Hi Darolla,

I want to make you the best congratulations for this fantastic guide "Best practice".
This example is very simple to follow in all the section.
That's all need to me for complete my application.
Thank you so much.

ExYndiano.

ynrajasekhar · by **ynrajasekhar** » Thu Oct 29, 2009 6:05 am

Hi,

Thanks for posting this tutorial.

Thanks.

Tutorial: Modal Dialogs

Tutorial: Modal Dialogs

First

Second

RE: Second

RE: RE: Second

Third

RE: Third

RE: RE: Third

Done :)

Re: Done :)

Great tutorial

Who is online