Thursday, December 24, 2009

Android Basics - Dialogs and Floating Activities

original link: http://www.androidcompetencycenter.com/tag/alertdialogbuilder/

As we know android provide Activity class for developing application screens. But many a time application needs to show Dialog boxes or floating screen to do simple tasks likes taking input from user or ask for confirmation etc.

In android Dialogs can be created in following 2 ways:

1. Creating a dialog with the help of android Dialog class or its subclass like AlertDialog.
2. Using dialog theme for the activity.

Using android Dialog class:
Let see how we can create a dialog with the help of Dialog class. To define a dialog the dialog class has to extend the android Dialog class.


class MyDialog extends Dialog {
/**
* @param context
*/
public MyDialog(Context context) {
super(context);
}
}

Define a layout for our dialog. Here is the xml file for of the layout that asks for user’s name.


android:id=”@+id/widget28″
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical”
xmlns:android =”http://schemas.android.com/apk/res/android”
>
android:id=”@+id/nameMessage”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Enter Name:”
>

android:id=”@+id/nameEditText”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:textSize=”18sp”
>

android:id=”@+id/buttonLayout”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_gravity=”center_horizontal”
>
android:id=”@+id/okButton”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”OK”
>

android:id=”@+id/cancelButton”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Cancel”
>




Use the above layout for our dialog

class MyDialog extends Dialog {
….

/**
* @see android.app.Dialog#onCreate(android.os.Bundle)
*/
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Log.d(”TestApp”, “Dialog created”);
setContentView(R.layout.mydialog);
}
}

Now the dialog can be shown by calling the show method like this


MyDialog dialog = new MyDialog(context);
dialog.show();


Event handling for the Dialog controls are same as in case of the activity. Modify the dialog code to handle the onclick event on the ok and cancel button.

class MyDialog extends Dialog implements OnClickListener {

private Button okButton;

private Button cancelButton;

private EditText nameEditText;

protected void onCreate(Bundle savedInstanceState) {
okButton = (Button) findViewById(R.id.okButton);
cancelButton = (Button) findViewById(R.id.cancelButton);

nameEditText = (EditText) findViewById(R.id.nameEditText);

okButton.setOnClickListener(this);
cancelButton.setOnClickListener(this);
}

public void onClick(View view) {
switch (view.getId()) {
case R.id.okButton:
dismiss();
break;
case R.id.cancelButton:
cancel();
break;
}
}
}

To close the dialog the dismiss() method can be called. The dialog can call the dismiss method itself or some other code can also close the dialog by calling dismiss().

The dialog also supports cancel. Canceling means the dialog action is canceled and does not need to perform any operation. Dialog can be canceled by calling cancel() method. Canceling the dialog also dismisses the dialog.

When user clicks the phones BACK button the dialog gets canceled. If you do not want to cancel the dialog on BACK button you can set cancelable to false as

setCancelable(false);

Note that the cancel() method call till be able to cancel the dialog (which is the desirable functionality in most cases). The dialog’s cancel and dismiss events can be listened with the help of OnCancelListener and OnDismissListener.

Returning information from dialog:
Now our dialog can take the name from the user. We need to pass that name to the calling activity. Dialog class does not provide any direct method for returning values. But our own Listener can be created as follows:


public interface MyDialogListener {

public void onOkClick(String name); // User name is provided here.

public void onCancelClick();
}

The dialog’s constructor has to be modified to take the object of the listener:

public MyDialog(Context context, MyDialogListener listener) {
super(context);
this.listener = listener;
}

Now the calling activity needs to provide the object of the class that implements the MyDialogListener which will gets called on ok or cancel button clicks.

Now we need update the onclick method to return the user name.

public void onClick(View view) {
switch (view.getId()) {
case R.id.okButton:
listener.onOkClick(nameEditText.getText().toString()); // returning the user’s name.
dismiss();
break;
case R.id.cancelButton:
cancel();
break;
}
}

Using AlertDialog:

AlertDialog is the subclass of the Dialog. It by default provide 3 buttons and text message. The buttons can be made visible as required. Following code creates an AlertDialog that ask user a question and provide Yes, No option.

AlertDialog dialog = new AlertDialog.Builder(context).create();

dialog.setMessage(”Do you play cricket?”);
dialog.setButton(”Yes”, myOnClickListener);
dialog.setButton2(”No”, myOnClickListener);

dialog.show();

The onClick method code for the button listener myOnClickListener will be like this:

public void onClick(DialogInterface dialog, int i) {
switch (i) {
case AlertDialog.BUTTON1:
/* Button1 is clicked. Do something */
break;
case AlertDialog.BUTTON2:
/* Button2 is clicked. Do something */
break;
}
}

AlertDialog.Builder:
AlertDialog has a nested class called ‘Builder’. Builder class provides facility to add multichoice or single choice lists. The class also provides methods to set the appropriate Adaptors for the lists, set event handlers for the list events etc. The Builder button calls the Button1, Button2, Button3 as PositiveButton, NeutralButton, NegativeButton.

Here is an example of dialog box with Multichoice list

new AlertDialog.Builder(context)
.setIcon(R.drawable.icon)
.setTitle(R.string.alert_dialog_multi_choice)
.setMultiChoiceItems(R.array.select_dialog_items,
new boolean[]{false, true, false, true, false},
new DialogInterface.OnMultiChoiceClickListener() {
public void onClick(DialogInterface dialog, int whichButton, boolean isChecked) {
/* Something on click of the check box */
}
})
.setPositiveButton(R.string.alert_dialog_ok, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {

/* User clicked Yes so do some stuff */
}
})
.setNegativeButton(R.string.alert_dialog_cancel, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {

/* User clicked No so do some stuff */
}
})
.create();

Activity Managed Dialog:

Android also provide facility to create dialogs. Activity created dialog can be managed by Activity methods like showDialog(), onCreateDialog(), onPrepareDialog(), dismissDialog(), removeDialog().
The onCreateDialog create the dialog that needs to be shown, for example

/**
* @see android.app.Activity#onCreateDialog(int)
*/
@Override
protected Dialog onCreateDialog(int id) {
return new AlertDialog.Builder(this).setMessage(”How are you?”).setPositiveButton(”Fine”, new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int which) {
/* Do something here */
}
}).setNegativeButton(”Not so good”, new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int which) {
/* Do something here */
}
}).create();
}

You can create multiple dialog boxes and differentiate them with the id parameter. The dialog can be shown with the help of showDialog(id) method. The onCreateDialog method gets called for the first time when showDialog method is called. For subsequent calls to the showDialog() the dialog is not created but shown directly.
If you need to update the dialog before it is getting shown then you can do that in onPrepareDialog() method. The methods get called just before the dialog is shown to the user.
To close the dialog you can call dismissDialog() method. Generally you will dismiss the dialogs in the click handles of the dialog buttons.
The removeDialog() method will remove the dialog from the activity management and if showDialog is again called for that dialog, the dialog needs to be created.

Using android Dialog theme for activity:
Another simple way to show the dialog is to make the Activity to work as a Dialog (floating activity). This can be done by applying dialog Theme while defining the activity entry in the AndroidManifest.xml





The activity will be shown as a dialog as the activity is using ‘Theme.Dialog’ as theme.

No comments:

Post a Comment