Android custom dialog example

In this tutorial, we show you how to create a custom dialog in Android. See following steps :

Create a custom dialog layout (XML file).
Attach the layout to Dialog.
Display the Dialog.
Done.

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

Note
You may also interest to read this custom AlertDialog example.

1 Android Layout Files

Two XML files, one for main screen, one for custom dialog.

File : res/layout/main.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" >
 
    <Button
        android:id="@+id/buttonShowCustomDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Custom Dialog" />
 
</LinearLayout>

File : res/layout/custom.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dp" />
 
    <TextView
        android:id="@+id/text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#FFF" 
        android:layout_toRightOf="@+id/image"/>/>
 
     <Button
        android:id="@+id/dialogButtonOK"
        android:layout_width="100px"
        android:layout_height="wrap_content"
        android:text=" Ok "
        android:layout_marginTop="5dp"
        android:layout_marginRight="5dp"
        android:layout_below="@+id/image"
        />
 
</RelativeLayout>

2. Activity

Read the comment and demo in next step, it should be self-explorary.

File : MainActivity.java

package com.mkyong.android;
 
import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
 
public class MainActivity extends Activity {
 
	final Context context = this;
	private Button button;
 
	public void onCreate(Bundle savedInstanceState) {
 
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
 
		button = (Button) findViewById(R.id.buttonShowCustomDialog);
 
		// add button listener
		button.setOnClickListener(new OnClickListener() {
 
		  @Override
		  public void onClick(View arg0) {
 
			// custom dialog
			final Dialog dialog = new Dialog(context);
			dialog.setContentView(R.layout.custom);
			dialog.setTitle("Title...");
 
			// set the custom dialog components - text, image and button
			TextView text = (TextView) dialog.findViewById(R.id.text);
			text.setText("Android custom dialog example!");
			ImageView image = (ImageView) dialog.findViewById(R.id.image);
			image.setImageResource(R.drawable.ic_launcher);
 
			Button dialogButton = (Button) dialog.findViewById(R.id.dialogButtonOK);
			// if button is clicked, close the custom dialog
			dialogButton.setOnClickListener(new OnClickListener() {
				@Override
				public void onClick(View v) {
					dialog.dismiss();
				}
			});
 
			dialog.show();
		  }
		});
	}
}

3. Demo

Start it, the “main.xml” layout is display.

Click on the button, display custom dialog “custom.xml” layout, if you click on the “OK” button, dialog box will be closed.

Download Source Code

Download it – Android-Custom-Dialog-Example.zip (16 KB)

References

Tags : android dialog

mkyong

Founder of Mkyong.com, love Java and open source stuffs. Follow him on Twitter, or befriend him on Facebook or Google Plus.

Here are some of my recommended Books

Popular Posts

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Name" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/ednm" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="City" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/edcity" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Highest Qualification" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/edq" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Add" android:id="@+id/btnadd" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Cancel" android:id="@+id/btncancel" /> </LinearLayout> </LinearLayout>

package com.myclass.mydialog; import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.widget.Button; import android.widget.EditText; public class Mydialog extends Dialog implements android.view.View.OnClickListener{ Context context; Button btnadd, btncancel; EditText etnm, etncity, etnq; String result; public Mydialog(Context context) { super(context); this.context = context; } @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.education_details_layout); btnadd = (Button) findViewById(R.id.btnadd); btncancel = (Button) findViewById(R.id.btncancel); etnm = (EditText) findViewById(R.id.ednm); etncity = (EditText) findViewById(R.id.edcity); etnq = (EditText) findViewById(R.id.edq); result = ""; btnadd.setOnClickListener(this); } public String showMyDialog() { show(); return result; } @Override public void onClick(View v) { // TODO Auto-generated method stub if(v == btnadd) { result = etnm.getText().toString()+" - "+etncity.getText().toString()+" - "+etnq.getText().toString(); hide(); } else if(v == btncancel) { result = ""; dismiss(); } } }

package com.myclass.mydialog; import android.os.Bundle; import android.app.Activity; import android.app.Dialog; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; import android.widget.Toast; public class MyDialogActivity extends Activity implements OnClickListener { Button btn; EditText et; Mydialog d; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my_dialog); btn = (Button) findViewById(R.id.btn); et = (EditText) findViewById(R.id.etd); d = new Mydialog(this); btn.setOnClickListener(this); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_my_dialog, menu); return true; } @Override public void onClick(View v) { // TODO Auto-generated method stub if(v == btn) { d.show(); String result = d.result; if(result.equals("")) { Toast.makeText(getBaseContext(), "Action cancelled", Toast.LENGTH_LONG).show(); } else { et.append("\n"+result); } } } }

package com.myclass.mydialog; import android.os.Bundle; import android.app.Activity; import android.app.Dialog; import android.content.DialogInterface; import android.content.DialogInterface.OnDismissListener; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; import android.widget.Toast; public class MyDialogActivity extends Activity implements OnClickListener { Button btn; EditText et; Mydialog d; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my_dialog); btn = (Button) findViewById(R.id.btn); et = (EditText) findViewById(R.id.etd); d = new Mydialog(this); btn.setOnClickListener(this); d.setOnDismissListener(new OnDismissListener() { @Override public void onDismiss(DialogInterface dialog) { // TODO Auto-generated method stub String result = d.getResult(); if(result.equals("")) { Toast.makeText(getBaseContext(), "Action cancelled", Toast.LENGTH_LONG).show(); } else { et.append("\n"+result); } } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_my_dialog, menu); return true; } @Override public void onClick(View v) { // TODO Auto-generated method stub if(v == btn) { d.show(); } } }

Monica May 15, 2013 at 1:20 pm
Very useful example. I tried to do a simpler example myself and initially I wrote it like this:
public class MainActivity extends Activity {
Context mContext = null;
Dialog dialog = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mContext = getApplicationContext();
dialog = new Dialog(mContext);
dialog.setContentView(R.layout.custom_dialog);
dialog.setTitle(“Custom Dialog”);
TextView text = (TextView) dialog.findViewById(R.id.text);
text.setText(“Hello, this is a custom dialog!”);
ImageView image = (ImageView) dialog.findViewById(R.id.image);
image.setImageResource(R.drawable.ic_launcher);
dialog.show();
}
}
The result was that the application crashed right after launching. Then I compared it to your example and I saw that the assignment
Context mContext = null;
should be instead
Context mContext = this;
and also the assignment to mContext inside the method becomes no longer necessary. I would be very grateful if someone could explain why is this so. It seems reasonable, though I can’t grasp the full meaning.
Thank you, mkyong!!
Ben April 29, 2013 at 9:24 pm
To remove the dialog’s title,
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
before you set the layout (with dialog.setContentView(R.layout.education_details_layout);)
Ben April 29, 2013 at 9:13 pm
Thank you, worked like a charm
Giancarlo Leonio March 14, 2013 at 6:20 am
Great post! Thank you. I compiled a list of some top resources for creating a custom dialog box in android. I included your post. Check it out/ feel free to share. http://www.verious.com/board/Giancarlo-Leonio/customizing-dialog-boxes-in-android/ Hope this can be useful to other developers too. :)

Prasad March 1, 2013 at 4:55 pm

Nice tutorial. I have a question. Question is what if I want to return some value to activity from this dialog. Here is my example.

Activity layout file : activity_my_dialog.xml

&lt;LinearLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    xmlns:tools=&quot;http://schemas.android.com/tools&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;match_parent&quot;
    android:orientation=&quot;vertical&quot;
    tools:context=&quot;.MyDialogActivity&quot; &gt;
 
    &lt;Button
        android:layout_width=&quot;wrap_content&quot;
        android:layout_height=&quot;wrap_content&quot;
        android:text=&quot;Click to Add Details&quot; 
        android:id=&quot;@+id/btn&quot;/&gt;
 
    &lt;EditText 
        android:layout_width=&quot;fill_parent&quot;
        android:layout_height=&quot;fill_parent&quot;
        android:id=&quot;@+id/etd&quot;
        /&gt;
&lt;/LinearLayout&gt;

Dialog Layout File : education_details_layout.xml

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;LinearLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    android:layout_width=&quot;wrap_content&quot;
    android:layout_height=&quot;wrap_content&quot;
    android:orientation=&quot;vertical&quot; &gt;
 
	&lt;TextView 
	    android:layout_width=&quot;fill_parent&quot;
	    android:layout_height=&quot;wrap_content&quot;
	    android:text=&quot;Name&quot;
	    /&gt;
	&lt;EditText 
	    android:layout_width=&quot;fill_parent&quot;
	    android:layout_height=&quot;wrap_content&quot;
	    android:id=&quot;@+id/ednm&quot;
	    /&gt;
 
	&lt;TextView 
	    android:layout_width=&quot;fill_parent&quot;
	    android:layout_height=&quot;wrap_content&quot;
	    android:text=&quot;City&quot;
	    /&gt;
	&lt;EditText 
	    android:layout_width=&quot;fill_parent&quot;
	    android:layout_height=&quot;wrap_content&quot;
	    android:id=&quot;@+id/edcity&quot;
	    /&gt;
	&lt;TextView 
	    android:layout_width=&quot;fill_parent&quot;
	    android:layout_height=&quot;wrap_content&quot;
	    android:text=&quot;Highest Qualification&quot;
	    /&gt;
	&lt;EditText 
	    android:layout_width=&quot;fill_parent&quot;
	    android:layout_height=&quot;wrap_content&quot;
	    android:id=&quot;@+id/edq&quot;
	    /&gt;
 
	&lt;LinearLayout 
	    android:layout_width=&quot;fill_parent&quot;
	    android:layout_height=&quot;wrap_content&quot;
	    android:orientation=&quot;horizontal&quot;
	    &gt;
	&lt;Button 
	    android:layout_width=&quot;wrap_content&quot;
	    android:layout_height=&quot;wrap_content&quot;
	    android:text=&quot;Add&quot;
	    android:id=&quot;@+id/btnadd&quot;
	    /&gt;
	&lt;Button
	    android:layout_width=&quot;wrap_content&quot;
	    android:layout_height=&quot;wrap_content&quot;
	    android:text=&quot;Cancel&quot;
	    android:id=&quot;@+id/btncancel&quot;
	    /&gt;
	&lt;/LinearLayout&gt;
&lt;/LinearLayout&gt;

Creating custom dialog : Mydialog.java

package com.myclass.mydialog;
 
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
 
public class Mydialog extends Dialog implements android.view.View.OnClickListener{
	Context context;
	Button btnadd, btncancel;
	EditText etnm, etncity, etnq;
	String result;
	public Mydialog(Context context) {
		super(context);
		this.context = context;
	}
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.education_details_layout);
		btnadd = (Button) findViewById(R.id.btnadd);
		btncancel = (Button) findViewById(R.id.btncancel);
 
		etnm = (EditText) findViewById(R.id.ednm);
		etncity = (EditText) findViewById(R.id.edcity);
		etnq = (EditText) findViewById(R.id.edq);
		result = &quot;&quot;;
 
		btnadd.setOnClickListener(this);
	}
 
	public String showMyDialog()
	{
		show();
		return result;
	}
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		if(v == btnadd)
		{
			result = etnm.getText().toString()+&quot; - &quot;+etncity.getText().toString()+&quot; - &quot;+etnq.getText().toString();
			hide();
		}
		else
		if(v == btncancel)
		{
			result = &quot;&quot;;
			dismiss();
		}
	}
 
}

Main Java File : MyDialogActivity.java

package com.myclass.mydialog;
 
import android.os.Bundle;
import android.app.Activity;
import android.app.Dialog;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
 
public class MyDialogActivity extends Activity implements OnClickListener {
	Button btn;
	EditText et;
	Mydialog d;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_my_dialog);
		btn = (Button) findViewById(R.id.btn);
		et = (EditText) findViewById(R.id.etd);
		d = new Mydialog(this);
 
		btn.setOnClickListener(this);
 
	}
 
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_my_dialog, menu);
		return true;
	}
 
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		if(v == btn)
		{
			d.show();
			String result = d.result;
 
			if(result.equals(&quot;&quot;))
			{
				Toast.makeText(getBaseContext(), &quot;Action cancelled&quot;, Toast.LENGTH_LONG).show();
			}
			else
			{
				et.append(&quot;\n&quot;+result);
			}
		}
	}
}

What ever details I am accepting from dialog box needs to be appended in the EditText component in main activity.

Please help me. Thanks in advance.

Prasad March 1, 2013 at 5:37 pm

I got the answer myself. Answer is to add OnDismissListener() to dialog as below:

MyDialogActivity.java

package com.myclass.mydialog;
 
import android.os.Bundle;
import android.app.Activity;
import android.app.Dialog;
import android.content.DialogInterface;
import android.content.DialogInterface.OnDismissListener;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
 
public class MyDialogActivity extends Activity implements OnClickListener {
	Button btn;
	EditText et;
	Mydialog d;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_my_dialog);
		btn = (Button) findViewById(R.id.btn);
		et = (EditText) findViewById(R.id.etd);
		d = new Mydialog(this);
 
		btn.setOnClickListener(this);
		d.setOnDismissListener(new OnDismissListener() {
 
			@Override
			public void onDismiss(DialogInterface dialog) {
				// TODO Auto-generated method stub
				String result = d.getResult();
				if(result.equals(&quot;&quot;))
				{
					Toast.makeText(getBaseContext(), &quot;Action cancelled&quot;, Toast.LENGTH_LONG).show();
				}
				else
				{
					et.append(&quot;\n&quot;+result);
				}
			}
		});
	}
 
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_my_dialog, menu);
		return true;
	}
 
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		if(v == btn)
		{
			d.show();
 
 
		}
	}
}

Nibin February 7, 2013 at 10:44 am
very nice example…
hasith31 December 26, 2012 at 11:58 am
very useful!
thank you!
harvey December 4, 2012 at 8:18 pm
It will cause the black background,like the http://stackoverflow.com/questions/8117849/remove-black-background-of-custom-dialog?answertab=votes#tab-top
and there have a solution.
LinsLouis November 27, 2012 at 1:24 am
Great Tutorial..Worked well….thanks
LinsLouis November 27, 2012 at 1:22 am
This is Very easy Tutorial for Beginners Like Me……Thank you very much…….
linh November 17, 2012 at 1:19 am
it don’t run in Android 3.0 (API 11)
- linh November 17, 2012 at 2:36 am
  oh, I sr ! it work well :)
alireza77sh November 7, 2012 at 7:05 am
that was really nice example for beginners. thank you very much.
Mila November 7, 2012 at 2:23 am
Perfect, straight to the point!
Chi October 5, 2012 at 4:57 am
Hi, mkYong
The section
dialogButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
crashed on my app.
But not on your sample code.
What could happened?
Thanks
- Luki R Rompis February 28, 2013 at 12:11 am
  have you import this? :)
  import android.view.View.OnClickListener;
Iván Sánchez September 6, 2012 at 1:08 am
Thank you very much for the post! Just I’m searching for it.
rajini August 22, 2012 at 2:58 pm
hi thanks a lot….but by using this code,my dialog box is dismissed without clicking ok button .If i click anywhere on window it will be closed …can u tell me the reason???thank u…..
Nirav Nimbark July 18, 2012 at 8:44 pm
Can you provide any simple example of zoom in,zoom out…in android?
Nirav Nimbark July 18, 2012 at 8:42 pm
Your website is good examples for beginner.. keep it up..
Carmine July 15, 2012 at 10:56 am
Thanks very much. With this tutorial I have understood which one was the error made lost me many hours.
Thanksssssss.
Jerry March 19, 2012 at 11:07 am
Hi could you please tell me how can I add this into my existing application. I understand how to add the xml layout files, but not sure where to add the .java file. Is it under the src folder ? I tried adding your two xml files and the .java file to my app but when I launch the app nothing appears. not even an error message
- Viktor Bruder March 20, 2012 at 9:07 pm
  Hi,
  look this: http://stackoverflow.com/questions/5821749/android-crash-in-dialog-show
  final Dialog dialog = new Dialog(MainActivity.this);
  Viktor
Jerry March 19, 2012 at 11:05 am
Hi could you please tell me how can I add this into my existing application. I understand how to add the xml layout files, but not sure where to add the .java file. Is it under the src folder ? I tried adding your two xml files and the .java file to my app but when I launch the app nothing appears

Android custom dialog example

1 Android Layout Files

2. Activity

3. Demo

Download Source Code

References

Popular Posts

What is your opinion?

Do you know the answer?

1 Android Layout Files

2. Activity

3. Demo

Download Source Code

References

Related Posts

Popular Posts

What is your opinion?

Do you know the answer?