How to create custom input dialog box in Android

Introduction
In this article I will explain how to create custom input dialog box in Android

Description
In this article we will see how to create multiple custom input dialog boxes to take input from user in an Android application. Here, we will use AlertDialog.Builder class to create the dialog box.

Step 1: Open Eclipse and create a New Android Application Project using File -> New -> Android Application Project

DialogBoxExample-New Android Application

Step 2: Write following in the activity_main.xml to display two buttons

<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/btnFirstDialog"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Open first dialog"
        android:onClick="btnFirstDialog_Click" />

    <Button
        android:id="@+id/btnSecondDialog"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Open second dialog"
        android:onClick="btnSecondDialog_Click" />

</LinearLayout>

Step 3: Create two layout files (Android XML File) dialog1.xml and dialog2.xml inside “res/layout” folder to create layout for the dialog boxes. Please refer to the following file structure of the project

2013-10-05 14_46_20-Java - DialogBoxExample_src_com_example_dialogboxexample_MainActivity.java - ADT

dialog1.xml

<?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"
    android:background="#FFF">

    <EditText
        android:id="@+id/etxtName"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="5dp"
        android:hint="Enter Name">
    </EditText>
</LinearLayout>

dialog2.xml

<?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"
    android:background="#FFF">

    <EditText
        android:id="@+id/etxtMobile"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="5dp"
        android:hint="Enter Mobile Number">
    </EditText>

</LinearLayout>

Step 4: Add onCreateDialog in MainActivity.java file to display dialog boxes

public Dialog onCreateDialog(int id){
	AlertDialog.Builder builder=new AlertDialog.Builder(this);
	LayoutInflater inflater=getLayoutInflater();
	switch(id)
	{
	case 0:
		builder=new AlertDialog.Builder(this);
		inflater=getLayoutInflater();
		builder.setView(inflater.inflate(R.layout.dialog1, null))
		.setTitle("First Dialog Box" )
		.setPositiveButton("OK", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface arg0, int arg1) {
				Dialog dlg=(Dialog)arg0;
				EditText etxtName=(EditText)dlg.findViewById(R.id.etxtName);
				if(etxtName.getText().toString().length()>0)
				{
					String name=etxtName.getText().toString();
					Toast.makeText(getApplicationContext(), "I am , " +name, Toast.LENGTH_LONG).show();
				}
			}
		})
		.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface dialog, int which) {
				Toast.makeText(getApplicationContext(), "You clicked on Cancel", Toast.LENGTH_LONG).show();
			}
		});
		return builder.create();
	case 1:
		builder=new AlertDialog.Builder(this);
		inflater=getLayoutInflater();
		builder.setView(inflater.inflate(R.layout.dialog2, null))
		.setTitle("Second Dialog Box" )
		.setPositiveButton("OK", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface arg0, int arg1) {
				Dialog dlg=(Dialog)arg0;
				EditText etxtMobile=(EditText)dlg.findViewById(R.id.etxtMobile);
				if(etxtMobile.getText().toString().length()>0)
				{
					String mobile=etxtMobile.getText().toString();
					Toast.makeText(getApplicationContext(), "Contact me at " +mobile, Toast.LENGTH_LONG).show();
				}
			}
		})
		.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface dialog, int which) {
				Toast.makeText(getApplicationContext(), "You clicked on Cancel", Toast.LENGTH_LONG).show();
			}
		});
		return builder.create();
	}
	return null;
}

onCreateDialog is called using showDialog method. A specific alert dialog is displayed according to the index position sent with the showDialog method.

AlertDialog subclass Builder class is used to create the dialog box. Layout of the dialog box is set to the layout file created in step 2, using setView method. setTitle method of the Builder class is used to set the title of the dialog box. setPositiveButton and setNegativeButton is used to create “OK” and “Cancel” button respectively. Click event handler of these buttons is also defined inside setPositiveButton and setNegativeButton methods.

Step 5: Add click events of the buttons to display dialog boxes

public void btnFirstDialog_Click(View vw)
{
	showDialog(0);
}

public void btnSecondDialog_Click(View vw)
{
	showDialog(1);
}

showDialog method is called on button’s click to open dialog box.

Step 6: Run the application (Ctrl + F11)

2013-10-05 14_58_18-5554_D

2013-10-05 14_59_34-5554_D

2013-10-05 15_00_02-5554_D

2013-10-05 15_03_30-5554_D

Download Source Code

4 thoughts on “How to create custom input dialog box in Android

  1. Dipak

    Hi Deepak, I am new in Android,I am stuck at this situation… I want to create custom input dialog with TextView & spinner … & whatever input i give through the spinner from corresponding textview , i want to fetch that result & used for further processing… please suggest solution or any u r related blog…

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *