Android Custom Dialog – Example

Dialog is used to show pop up Dialog box to the user in the current Activity. In this tutorial we are going to show you how to implement Custom Dialog box with input text fields and buttons.

Creating Project:

Make sure you have properly setup the Android SDK, AVD for Testing the Application. Create a New project in Eclipse IDE with the package as “learn2crack.customdialog“. Create the Main Activity as “MainActivity” and the main Layout as “activity_main“.

android custom dialog

Creating Project in Eclipse

Download Complete Project:

Creating Layout:

The Main layout for our project is “activity_main” which has a button to show the Custom Dialog and a TextView to display the text which we got as input in the custom Dialog.

activity_main.xml

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity" >

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Custom Dialog"
        android:id="@+id/cusdia"
        />
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textSize="25dp"
    android:id="@+id/txt"
    />
</LinearLayout>

Next is to create Custom Dialog layout which is displayed in pop up window. Create new Android XML file as dialog.xml. It has two input text fields and two button.

dialog.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:orientation="vertical" >

    <EditText
        android:id="@+id/fname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:ems="10"
        android:hint="First Name" >

    </EditText>

    <EditText
        android:id="@+id/lname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/fname"
        android:layout_centerHorizontal="true"
        android:ems="10"
        android:hint="Last name" />

    <Button
        android:id="@+id/savebtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/canbtn"
        android:layout_alignBottom="@+id/canbtn"
        android:layout_alignRight="@+id/lname"
        android:text="Save" />

    <Button
        android:id="@+id/canbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/lname"
        android:layout_below="@+id/lname"
        android:text="Cancel" />

</RelativeLayout>

Creating Activity:

First we are importing the layout items. On button click we are displaying the pop up dialog. Here the custom Dialog is named as “custom”, which is defined by “custom = new Dialog(MainActivity.this)”. Then “.setTitle” is to set title message and “.contentView” is used to display the custom xml layout that we created. When the text is entered in the field and save is pressed, it is displayed in TextView in the MainActivity.

MainActivity.java

package learn2crack.customdialog;

import android.os.Bundle;
import android.app.Activity;
import android.app.Dialog;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends Activity {
Button cust;
Dialog custom;
EditText Fname;
EditText Lname;
TextView txt;
Button savebtn;
Button canbtn;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		cust = (Button)findViewById(R.id.cusdia);
		txt = (TextView)findViewById(R.id.txt);
		cust.setOnClickListener(new View.OnClickListener() {
			String fname,lname;
			@Override
			public void onClick(View view) {
				// TODO Auto-generated method stub
				custom = new Dialog(MainActivity.this);
				custom.setContentView(R.layout.dialog);
				Fname = (EditText)custom.findViewById(R.id.fname);
				Lname = (EditText)custom.findViewById(R.id.lname);
				savebtn = (Button)custom.findViewById(R.id.savebtn);
				canbtn = (Button)custom.findViewById(R.id.canbtn);
				custom.setTitle("Custom Dialog");
				savebtn.setOnClickListener(new View.OnClickListener() {

					@Override
					public void onClick(View view) {
						// TODO Auto-generated method stub
						fname = Fname.getText().toString();
						lname = Lname.getText().toString();

						txt.setText("Your Name is "+fname +lname);
					custom.dismiss();
					}

				});
				canbtn.setOnClickListener(new View.OnClickListener() {

					@Override
					public void onClick(View view) {
						// TODO Auto-generated method stub
						custom.dismiss();

					}
				});
				custom.show();

			}
		});

	}

}

Creating Manifest:

No other special Permissions are required for our project.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="learn2crack.customdialog"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="learn2crack.customdialog.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Finally run the project in the Emulator.

android custom dialog

MainActivity

android custom dialog

Custom Dialog

android custom dialog

Text updated in MainActivity

Enjoy :)
Any questions comment here.

Raj Amal W
Raj Amal is a Co-founder and Android Developer of Learn2crack.com. He Loves to work with Computers, Smartphones and Digital Gadgets.
Raj Amal W