Monday 9 March 2015

Android Custom dialog example

Displaying a dialog Window 

There are times where you need to display a dialog window to get a confirmation from the user. In this case, you can override the onCreateDialog() protected method defined in the base Activity class to display a dialog window.

The following Try It Out shows you how.

Displaying a Dialog Window Using an Activity


1 . Using Eclipse, create a new Android project and name it Dialog. 

2 . Add the following statements in bold to the main.xml file: 

<?xml ​version=”1.0”​encoding=”utf-8”?>

<LinearLayout​
xmlns:android=”http://schemas.android.com/apk/res/android” ​​​
​android:orientation=”vertical”
​​​​android:layout_width=”fill_parent” ​
​​​android:layout_height=”fill_parent”​>

<TextView ​​​​android:layout_width=”fill_parent”​ ​​
​​android:layout_height=”wrap_content”​
​​​​android:text=”@string/hello”​/>

<Button ​​​​android:id=”@+id/btn_dialog” ​​
​​android:layout_width=”fill_parent” ​​​​
android:layout_height=”wrap_content”
​​​​android:text=”Click to display a dialog” />

</LinearLayout>

3 . Add the following statements in bold to the MainActivity.java file:

package ​com.emergingandroidtech.Dialog;
import ​android.app.Activity;
import​ android.os.Bundle;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public ​class ​MainActivity ​extends​ Activity
​{
​​​​CharSequence[] items = { “Google”, “Apple”, “Microsoft” }; ​
​​​boolean[] itemsChecked = new boolean [items.length];
​​​
​/**​Called​ when​ the​ activity ​is ​first ​created.​*/ ​
​​​@Override
​​​​public ​void​ onCreate(Bundle​savedInstanceState)​
{ ​
​​​​​​​super.onCreate(savedInstanceState);
​​​​​​​​setContentView(R.layout.main);
​​​​​​​​
Button btn = (Button) findViewById(R.id.btn_dialog); ​​​
​​​​​btn.setOnClickListener(new View.OnClickListener()
{
​​​​​​​​​​​​public void onClick(View v)
{
​​​​​​​​​​​​​​​​showDialog(0); ​​​
​​​​​​​​​} ​
​​​​​​​});
​​​​}
​​​​
@Override
​​​​protected Dialog onCreateDialog(int id)
{
​​​​​​​​switch (id)
{ ​
​​​​​​​case 0: ​​​​​​​​​​​​
return new AlertDialog.Builder(this) ​​​​​​​​​​​​.setIcon(R.drawable.icon) ​​​​​​​​​​​​.setTitle(“This is a dialog with some simple text...”) ​​​​​​​​​​​​.setPositiveButton(“OK”, new ​​​​​​​​​​​​​​​​DialogInterface.OnClickListener()
{
​​​​​​​​​​​​​​​​public void onClick(DialogInterface dialog, ​​​​​​​​​​​​​​​​int whichButton) ​​​
​​​​​​​​​​​​​{ ​
​​​​​​​​​​​​​​​​​​​Toast.makeText(getBaseContext(), ​​​​​​​​​​​​​​​​​​​​​​​​ “OK clicked!”, Toast.LENGTH_SHORT).show(); ​​
​​​​​​​​​​​​​​}
​​​​​​​​​​​​}) ​​​​​​​​​​​​.setNegativeButton(“Cancel”, new ​​​​​​​​​​​​​​​​DialogInterface.OnClickListener()
{
​​​​​​​​​​​​​​​​public void onClick(DialogInterface dialog, ​​​​​​​​​​​​​​​​​​​​int whichButton) ​​​​
​​​​​​​​​​​​{ ​
​​​​​​​​​​​​​​​​​​​Toast.makeText(getBaseContext(), ​​​​​​​​​​​​​​​​​​​​​​​​​​​​“Cancel clicked!”, Toast.LENGTH_SHORT).show(); ​
​​​​​​​​​​​​​​​}
​​​​​​​​​​​​})
​.setMultiChoiceItems(items, itemsChecked, new ​​​​​​​​​​​​​​​​DialogInterface.OnMultiChoiceClickListener()
{
​​​​​​​​​​​​​​​​​​​​@Override ​
​​​​​​​​​​​​​​​​​​​public void onClick(DialogInterface dialog, int which, ​​​​​​​​​​​​​​​​​​​​boolean isChecked)
{ ​
​​​​​​​​​​​​​​​​​​​​​​​Toast.makeText(getBaseContext(), ​​​​​​​​​​​​​​​​​​​​​​​​​​​​items[which] + (isChecked ? “ checked!”: ​​​​​​​​​​​​​​​​​​​​​​​​​​​​“ unchecked!”), ​​​​​​​​​​​​​​​​​​​​​​​​​​​​Toast.LENGTH_SHORT).show(); ​​​​​​​​​​​​​​​​​​​​
} ​​​​​​​​​​​​​​​​
} ​​​​​​​​​​​​)
​​​​​​​​​​​​.create();
​​​​​​​​}
​​​​​​​​return null; ​

4 . Click the button to display the dialog. Checking the various checkboxes will cause the Toast class to display the text of the item checked/unchecked. To dismiss the dialog, click the OK or Cancel button.

How It Works 

To display a dialog, you first override the onCreateDialog() method in the Activity class:

@Override
protected ​Dialog​ onCreateDialog(int​ id)
​{ ​​​​
//...
}
​​​}
}

This method is called when you call the showDialog() method: ​

​​​​​​​Button ​btn​=​(Button)​findViewById(R.id.btn_dialog); ​​
​​​​​​btn.setOnClickListener(new​View.OnClickListener()​
{ ​​
​​​​​​​​​​public ​void​ onClick(View​ v)​
{ ​
​​​​​​​​​​​​​​​showDialog(0);
​​​​​​​​​​​​} ​
​​​​​​​});

The onCreateDialog() method is a callback for creating dialogs that are managed by the activity. When you call the showDialog() method, this callback will be invoked. The showDialog() method accepts an integer argument identifying a particular dialog to display. To create a dialog, you use the AlertDialog class’s Builder constructor. You set the various properties, such as icon, title, and buttons, as well as checkboxes: ​​​

​@Override
​​​​protected ​Dialog​ onCreateDialog(int ​id)​
{
​​​​​​​​switch​(id)
​{ ​​
​​​​​​case​0: ​​
​​​​​​​​​​return​ new​ AlertDialog.Builder(this) ​​​​​​​​​​​​.setIcon(R.drawable.icon) ​​​​​​​​​​​​.setTitle(“This​ is​ a ​dialog​ with​ some​simple​ text...”) ​​​​​​​​​​​​.setPositiveButton(“OK”,​new ​​​​​​​​​​​​​​​​DialogInterface.OnClickListener()​
{
​​​​​​​​​​​​​​​​public​ void​ onClick(DialogInterface ​dialog,​ ​​​​​​​​​​​​​​​​int​ whichButton) ​​
​​​​​​​​​​​​​​{ ​
​​​​​​​​​​​​​​​​​​​Toast.makeText(getBaseContext(), ​​​​​​​​​​​​​​​​​​​​​​​​​“OK​clicked!”,​Toast.LENGTH_SHORT).show(); ​​​​​
​​​​​​​​​​​} ​
​​​​​​​​​​​}) ​​​​​​​​​​​​.setNegativeButton(“Cancel”,​new ​​​​​​​​​​​​​​​​DialogInterface.OnClickListener()​
{
​​​​​​​​​​​​​​​​public​ void ​onClick(DialogInterface​ dialog, ​​​​​​​​​​​​​​​​​​​​int​ whichButton) ​​
​​​​​​​​​​​​​​{
​​​​​​​​​​​​​​​​​​​​Toast.makeText(getBaseContext(), ​​​​​​​​​​​​​​​​​​​​​​​​​​​​“Cancel​ clicked!”,​Toast.LENGTH_SHORT).show();
​​​​​​​​​​​​​​​​}
​​​​​​​​​​​​})
​​​​​​​​​​​​.setMultiChoiceItems(items,​itemsChecked,​new ​​​​​​​​​​​​​​​​DialogInterface.OnMultiChoiceClickListener()​
{
​​​​​​​​
​​​​​​​​​​​​@Override ​​
​​​​​​​​​​​​​​​​​​public ​void​ onClick(DialogInterface​ dialog,​int ​which, ​​​​​​​​​​​​​​​​​​​​boolean ​isChecked)​
{
​​​​​​​​​​​​​​​​​​​​​​​​Toast.makeText(getBaseContext(), ​​​​​​​​​​​​​​​​​​​​​​​​​​​​items[which]​+​(isChecked​?​“​checked!”: ​​​​​​​​​​​​​​​​​​​​​​​​​​​​“​unchecked!”), ​​​​​​​​​​​​​​​​​​​​​​​​​​​​Toast.LENGTH_SHORT).show(); ​​​​​​​​​​​​​​​​​​​​
}
​​​​​​​​​​​​​​​​} ​​​​​​​​​​​​)
​​​​​​​​​​​​.create(); ​​​​​
​​​}
​​​​​​​​return ​null; ​​​​
}

The preceding code sets two buttons:
OK and Cancel, using the setPositiveButton() and setNegativeButton() methods, respectively. You also set a list of checkboxes for users to choose via the setMultiChoiceItems() method. For the setMultiChoiceItems() method, you passed in two arrays: one for the list of items to display and another to contain the value of each item to indicate if they are checked. When each item is checked, you use the Toast class to display a message .

No comments:

Post a Comment