Use Custom Dialog Box in Android

Custom Dialog box can be used to display a custom message on Android devices. We can use the "android.app.Dialog" class to render a custom dialog box.
In this tutorial, we shall see how to create a custom dialog in Android with the following steps :
i. Create a custom dialog layout using XML.
ii. Attach the layout to Dialog.
iii. Display the Dialog.

1. XML layout files

We shall use two files- main.xml and custom.xml to display the dialog box, the earlier file shall display the main screen and the latter shall display the 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:gravity="center"

    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="#000" 



        android:textSize="20dp"



        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_marginLeft="100dp"



        android:layout_below="@+id/image"/>


</RelativeLayout>

2. Java Code

We shall add a listener to the button and set the title for the dialog box as well as the custom message.

File: Main.java

package com.endeavour.tutorial;

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 Main 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("Your Title Goes Here");

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

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

                     text.setText("Your custom dialog text goes here!");

                     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. Output

The following output shall be displayed.

i. Home screen with the "Show Custom Dialog" button

ii. When the button is pressed