Alert DialogBox in Android

Dialog Boxes are mainly used for showing some information to the user. This information may be related to a specific task or to an error or it may be some kind of general information.

Now we move to the codie part of this article.

First of all we create an XML file for our project. We are using two Activities in this project. Our first activity is activity_main.xml.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="64dp"
        android:text="@string/button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_below="@+id/button1"
        android:layout_marginTop="28dp"
        android:text="@string/button2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button2"
        android:layout_below="@+id/button2"
        android:layout_marginTop="30dp"
        android:text="@string/button3" />

</RelativeLayout>

Graphical Layout of Activity



In the preceding code we use a Relative Layout. In this Layout we use a TextView. In this TextView we will show some text in the activity. We also use 3 buttons in this activity. Using these 3 buttons we will show 3 types of Alert Dialog Boxes. On click of the “Alert Type 1“ button we will show a simple Dialog Box with a single option. On the click of the “Alert Type 2” button we will show a dialog box that have two options. Finally on the click of “Alert Type 3” we will show a dialog box that contains a ListView. This ListView is present in the menu_detail_fragment activity. Now we move to our second activity.

menu_detail_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:gravity="center"
    android:background="#5ba4e5"
    android:layout_height="match_parent">
     <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
      android:layout_marginTop="25dp" >
    </ListView>

</LinearLayout>

Graphical Layout



In this ListView we will insert some data and show this ListView using a dialog box.

Now we move to the source code of this project.

The following  is the source code:

public class MainActivity extends Activity {

    Button B1, B2, B3;
    ArrayAdapter < String > adapter;@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        B1 = (Button) findViewById(R.id.button1);
        B2 = (Button) findViewById(R.id.button2);
        B3 = (Button) findViewById(R.id.button3);



        B1.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub

                final AlertDialog alertDialog = new AlertDialog.Builder(MainActivity.this).create();
                alertDialog.setTitle("Alert Dialog");
                alertDialog.setMessage("Welcome to My Device");
                alertDialog.setIcon(R.drawable.icon_smile);

                alertDialog.setButton("OK", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {

                        Toast.makeText(getApplicationContext(), "You clicked on OK", Toast.LENGTH_SHORT).show();

                    }
                });

                alertDialog.show();

            }
        });

        B2.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                //alertDialog.setButton2(text, listener)
                AlertDialog.Builder alertDialog = new AlertDialog.Builder(MainActivity.this);
                alertDialog.setTitle("Alert Dialog");
                alertDialog.setMessage("Welcome to DZone");
                alertDialog.setIcon(R.drawable.icon_smile);

                alertDialog.setPositiveButton("YES", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {
                        Toast.makeText(getApplicationContext(), "You clicked on YES", Toast.LENGTH_SHORT).show();
                    }
                });

                alertDialog.setNegativeButton("NO", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {
                        Toast.makeText(getApplicationContext(), "You clicked on NO", Toast.LENGTH_SHORT).show();
                    }
                });

                alertDialog.show();
            }
        });

        B3.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                AlertDialog.Builder alertDialog = new AlertDialog.Builder(MainActivity.this);
                alertDialog.setTitle("Alert Dialog");
                alertDialog.setMessage("Welcome to My Device");
                alertDialog.setIcon(R.drawable.icon_smile);


                final String names[] = {
                    "Item1", "Item2", "Item3", "Item4"
                };
                // AlertDialog.Builder alertDialog2 = new AlertDialog.Builder(MainActivity.this);
                LayoutInflater inflater = getLayoutInflater();
                View convertView = (View) inflater.inflate(R.layout.menu_detail_fragment, null);
                alertDialog.setView(convertView);
                alertDialog.setTitle("List");
                ListView lv = (ListView) convertView.findViewById(R.id.listView1);
                adapter = new ArrayAdapter < String > (MainActivity.this, android.R.layout.simple_list_item_1, names);
                lv.setAdapter(adapter);
                alertDialog.show();

                lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {

                    @Override
                    public void onItemClick(AdapterView <? > parent, View view,
                    int position, long id) {
                        Toast.makeText(MainActivity.this, "You Clicked at " + names[+position], Toast.LENGTH_SHORT).show();

                    }
                });
            }
        });

    }


}

Now I will explain the preceding code in the following code sections for a better understanding.

Code Section 1

B1.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub

        final AlertDialog alertDialog = new AlertDialog.Builder(MainActivity.this).create();
        alertDialog.setTitle("Alert Dialog");
        alertDialog.setMessage("Welcome to My Device");
        alertDialog.setIcon(R.drawable.icon_smile);

        alertDialog.setButton("OK", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {

                Toast.makeText(getApplicationContext(), "You clicked on OK", Toast.LENGTH_SHORT).show();

            }
        });

        alertDialog.show();

    }
});

In the preceding code we set an OnClick event for the “Alert Type 1” button. This event will occur when a user clicks on the “Alert Type 1” button. In the preceding code we create an object of AlertDialog class using the Builder method. Then we set the title, message and Icon for the Alert Dialog Box. Using the setButton method we set the type of button that will be shown in the dialog box. We also set an OnClick event for this button. When a person clicks on the “OK” button we will show some text using the Toast.makeText method.

We can see that setButton is not showing in a proper way (crossed by a line). The reason is that the setButton method only works in older versions of an Android device. In the new version of Android devices we use another method instead of setButton.

When a person clicks on the “Alert Type 1” button, the following action will be performed.





Code Section 2

B2.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub
        //alertDialog.setButton2(text, listener)
        AlertDialog.Builder alertDialog = new AlertDialog.Builder(MainActivity.this);
        alertDialog.setTitle("Alert Dialog");
        alertDialog.setMessage("Welcome to DZone");
        alertDialog.setIcon(R.drawable.icon_smile);

        alertDialog.setPositiveButton("YES", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
                Toast.makeText(getApplicationContext(), "You clicked on YES", Toast.LENGTH_SHORT).show();
            }
        });

        alertDialog.setNegativeButton("NO", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
                Toast.makeText(getApplicationContext(), "You clicked on NO", Toast.LENGTH_SHORT).show();
            }
        });

        alertDialog.show();
    }
});

This code will work the same as I explained in the previous code. Instead of a single button we use two buttons (Yes and No) and create an OnClick event for each button. Instead of the setButton method we use the setPositiveButton method for showing the “Yes” option and the setNegativeButton method for showing the “No” option in the dialog box.





Code Section 3

B3.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub
        AlertDialog.Builder alertDialog = new AlertDialog.Builder(MainActivity.this);
        alertDialog.setTitle("Alert Dialog");
        alertDialog.setMessage("Welcome to My Device");
        alertDialog.setIcon(R.drawable.icon_smile);


        final String names[] = {
            "Item1", "Item2", "Item3", "Item4"
        };
        // AlertDialog.Builder alertDialog2 = new AlertDialog.Builder(MainActivity.this);
        LayoutInflater inflater = getLayoutInflater();
        View convertView = (View) inflater.inflate(R.layout.menu_detail_fragment, null);
        alertDialog.setView(convertView);
        alertDialog.setTitle("List");
        ListView lv = (ListView) convertView.findViewById(R.id.listView1);
        adapter = new ArrayAdapter < String > (MainActivity.this, android.R.layout.simple_list_item_1, names);
        lv.setAdapter(adapter);
        alertDialog.show();

        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView <? > parent, View view,
            int position, long id) {
                Toast.makeText(MainActivity.this, "You Clicked at " + names[+position], Toast.LENGTH_SHORT).show();

            }
        });
    }
});

In the preceding code we will show a ListView using a Dialog Box when someone clicks on the “Alter Type 3” button. In the preceding code we create array of string type and insert some data into this array. Using the inflate method of the getLayoutInflater class we get a reference for a menu_detail_fragment layout and insert it into a View type object. Then we get the reference of ListView into the lv object of ListView and bind the string array to a ListView using ArrayAdapter. Finally we create an OnClick event for ListView. Using this method we show the name of list item, on which a user will click. Assume we click on item number three of the ListView then the output will be the following: