Android custom dialog example

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

  1. Create a custom dialog layout (XML file).
  2. Attach the layout to Dialog.
  3. Display the Dialog.
  4. 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.

android custom dialog example

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

android custom dialog example

Download Source Code

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

References

  1. Android Dialog Javadoc
  2. Android Dialog example
  3. Android relative layout example
  4. Android prompt dialog (custom AlertDialog) example

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
Akshay Nimje
Guest
Akshay Nimje

This time problem on create how to drop down list item click to open in the popup windows and alert show on activity.
for example drop down 4 item (a, b, c, d) choose the a activity start the first popup or alert message after that show in main activity

Sarad Mohanan
Guest
Sarad Mohanan

this was very useful to me but can some please let me know how to call a custom dialog from service i wrote the code inside onClick part in a different file passed the context from service and called the custom.xml file from the java file i wrote but its failing

Smithd997
Guest
Smithd997

I really like and appreciate your blog post.Thanks Again. febdcacdkefdkcce

moein tavasolynia
Guest
moein tavasolynia

this tutorials is very helpful thank you

moein tavasolynia
Guest
moein tavasolynia

hi iam moein thank you very much for your tutorials

sandeep
Guest
sandeep

Nice one! easy to understand

Nirodha Mihiran Wijesuriya
Guest
Nirodha Mihiran Wijesuriya

Thanks, that’s helpful me too.

Jérémy Dubrulle
Guest
Jérémy Dubrulle

Very helpful thx

arpit
Guest
arpit

when i put another button so it crash When i comment it works perfectly Please help me see my code here Thanks in advance

final Dialog dialog = new Dialog(MainActivity.this);

dialog.setContentView(R.layout.custom_dialog);

dialog.setTitle(“Quit”);

// set the custom dialog components – text, image and button

TextView text = (TextView) dialog.findViewById(R.id.textDialog);

text.setText(“ARE YOU SURE WANT TO LOG OUT?”);

// ImageView image = (ImageView)

// dialog.findViewById(R.id.imageDialog);

// image.setImageResource(R.drawable.image0);

Button Yes = (Button) dialog.findViewById(R.id.btn_dialog_yes);

// if button is clicked, close the custom dialog

Yes.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Intent logIn = new Intent(getApplicationContext(),

Login.class);

startActivity(logIn);

//dialog.dismiss();

}

});

Button No = (Button) dialog.findViewById(R.id.btn_dialog_no);

// if button is clicked, close the custom dialog

No.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

dialog.dismiss();

}

});

dialog.show();

break;

Philip Jeffrey Trowe
Guest
Philip Jeffrey Trowe

Why not take a look at my blog about how to create an Android app that displays an Image in an ImageView control of the main Activity at the full width of the screen.

The app uses the following Android SDK objects:

. Display
. ImageView
. LinearLayout
. Bitmap
. Activity
. XML layout
. LayoutParams

Also:
. layout_width
. layout_height
. orientation
. id
. vertical
. match_parent

XML attributes and values are covered.

Click the link BELOW! to see

http://androidprogrammeringcorner.blogspot.com/2015/06/pak-longs-android-programming-corner.html

Simm
Guest
Simm

Simple as possible example..what a searcher always want to see. HIGHLY Recommended … easy to digest.. keep up the good work

Tanat Mongkonborrirug
Guest
Tanat Mongkonborrirug

Thank you so much ,this topic is usefull

Ruud Th
Guest
Ruud Th

It’s a shame you don’t correct your code. P. Nelnik is right, so rewrite your code !!

Ruud Th
Guest
Ruud Th

Thanks, lovely tutorial.

sasa
Guest
sasa

Thank you Mkyong for this tutorial, can you please tell me how can i
handle a click out side the dialog to close the dialog, in other words
in need to dismiss dialog by clicking out side dialog box.

searock
Guest
searock

Thanks

Idris Bohra
Guest
Idris Bohra

awesome blog…always firstly refer your blog for any query..

Johns
Guest
Johns

Thanks for the code. You could use Ben’s line as an option for who sets the title on the xml file itself.

Nguy?n Th?ch
Guest
Nguy?n Th?ch

Thanks alot my teacher <3

Cristhian Camilo
Guest
Cristhian Camilo

Good example

Sergio A Guzmán
Guest
Sergio A Guzmán

Excellent example, with help of this I’ve created my own-custom-pretty dialog
Thank you so much!

Charles
Guest
Charles

Thanks. Simple and straight to the point

Paradisos
Guest
Paradisos

Why do You declare the private Button button; and not as

Button button = (Button) findViewById(R.id.buttonShowCustomDialog);

The truth is the app crashes but I don’t understand why.

P Nelnik
Guest
P Nelnik

Thanks, that’s helpful.

One little change I needed to make to get it to compile was to change the line:
dialogButton.setOnClickListener(new OnClickListener() {

to
dialogButton.setOnClickListener(new View.OnClickListener() {

knvchowdary
Guest
knvchowdary

Yes,Ur guide is ultimate,in same way shall I keep more than one images in DialogBox

chris
Guest
chris
Having trouble implimenting this, produces error when i access the option dialogs however, when i comment out the onclick meathod, it shows the dialog with out problem. Any ideas? package com.example.joybot; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.webkit.WebView; import android.webkit.WebSettings; import android.widget.EditText; import android.widget.RadioButton; import android.widget.RadioButton.*; import android.widget.TextView; import android.widget.Button; import com.MobileAnarchy.Android.Widgets.Joystick.JoystickClickedListener; import com.MobileAnarchy.Android.Widgets.Joystick.JoystickMovedListener; import com.MobileAnarchy.Android.Widgets.Joystick.JoystickView; import android.app.ActionBar; import android.app.Dialog; import android.content.Context; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button.*; //import android.location.*; //import com.google.android.maps.*; public class MainActivity extends Activity { ActionBar actbar; TextView txtX, txtY; JoystickView joystick; WebView mapper; int joyx, joyy; WebSettings webSettings; final Context context = this;… Read more »
Anonymous
Guest
Anonymous

Thank you very much. Me too searching for it.

Joe
Guest
Joe
Hi mkYong, First of all congratulations for your demos, are so useful. I’m new on the android world and i have a problem, i’m trying to show a dialog when i choose a concrete option in my spinner, but when i do this, my application crashes and stops the program. The code is something like this: public void onItemSelected(final AdapterView parent, View view, int pos,long id) { String addSM = parent.getItemAtPosition(pos).toString(); if (addSM == “A?adir”){ // custom dialog final Dialog dialog = new Dialog(controlador.context); dialog.setContentView(R.layout.dialog_afegirsuper); dialog.setTitle(“Title…”); // set the custom dialog components – text, image and button TextView text =… Read more »
Ricardo A. Hermosilla Carrillo
Guest
Ricardo A. Hermosilla Carrillo

When you compare strings, you must do it like this:
if(addSM.equals(“Añadir”))
The way you are doing it is wrong. Try this change and then make a reply if everything is going well.

Regards

Binh Lee
Guest
Binh Lee

@Ricardo A.Hermosilla Carrillo
Yes, you said right. Better way is using if(“Añadir”.equals(addSM)) this will
prevent the case addSM is null too.

Niharika88
Guest
Niharika88

please any one help me I want to create one popup dialog after clicking one button,So in that dialog box I need one Title bar,in the down i want 3 messages has to display ,1) will change based on the requ 2) constant 3) *T&C APPLY that is also constant. These 3 messages should be different sizes

Sergio A Guzmán
Guest
Sergio A Guzmán

I recommend you not to work with spanish-symbols and/or non-english-symbols, it can give some problems if not configured properly.
“Anadir” rather “Añadir” :)
//////
Te recomiento no trabajar con símbolos en español y/o en otro idioma distinto del inglés, a veces puede traer algunos problemas si no es configurado apropiadamente.
es mejor “Anadir” en vez de “Añadir”

Eagle_Eye
Guest
Eagle_Eye

Thanx Very Much Sir..
It Helped Me A Lot…
Thanx Very Very Much Again..
:D

Monica
Guest
Monica
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… Read more »