Custom Dialog Box in Android

Using a Dialog box in an Application reduces the need of xml layout as well as a class. Isn't it a helpful tool. Now lets learn it......

What do you need ?

xml layout for main page (activity_main.xml)
xml layout for dialog box (dialog.xml)

Java class for main page (CustomDialogActivity.java)

A button

An showCustomDialog() method

What are we going to do ?
We are going to make a button on the main page which when pressed pop ups a dialog box giving a message

Step 1 : Define an xml file with a button on it. Just remember the id of the button for further use in the java class .

You can directly copy-paste the code for the above xml file activity_main.xml

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dip">

        <Button
            android:id="@+id/buttondialog"
            android:layout_width="fill_parent"
            android:layout_height="40dip"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:text="Click here"
            android:background="#111122"
            android:textSize="25sp"
            android:textColor="#ffffff"/>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="Click the button below to see the dialog box"
            android:textSize="25sp"/>

    </RelativeLayout>

Step 2 : Create another xml file for defining the layout of the dialog box you are going to display.
Right-Click on layout under res and select New -> Android XML File

Give the name of the xml file and click Finish . I have given the name as dialog you can choose any name of your choice.

Step 3 : Define a RelativeLayout in it along with a TextView and a Back button as shown below .

The code for the above layout dialog.xml is given below :

dialog.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
        android:id="@+id/TextView1"
        android:textSize="40dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:gravity="center"
        android:textColor="#FF0000"
        android:text="Welcome to Made In Android" >
    </TextView>

    <Button
        android:id="@+id/button1"
        android:layout_width="120dip"
        android:layout_height="40dip"
        android:layout_below="@+id/TextView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="17dp"
        android:text="Back"
        android:background="#00FF00"
        android:textSize="25sp"/>

</RelativeLayout>

Step 5 : Then we define a class for the activity_main.xml .The name of the class will be CustomDialogActivity.java

CustomDialogActivity.java

package com.mia.dialogbox;

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

public class CustomDialogActivity extends Activity {

    Button buttonDialog;
    TextView textDialog;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        textDialog = (TextView)findViewById(R.id.textView1);
        buttonDialog = (Button)findViewById(R.id.buttondialog);
        buttonDialog.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                showCustomDialog(textDialog);
            }
        });
                
    }

    protected void showCustomDialog(final TextView _textDialog) {
        // TODO Auto-generated method stub
        final Dialog dialog = new Dialog(CustomDialogActivity.this);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.dialog);
        
        final TextView Text1 = (TextView)dialog.findViewById(R.id.textView1);
        Button button = (Button)dialog.findViewById(R.id.button1);    
        button.setOnClickListener(new View.OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                dialog.dismiss();
            }
        });
                
        dialog.show();
    }
}

Step 7 : Change the class-name in the AndroidManifest.xml as shown below .

AndroidManifest.xml

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

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

        <application
            android:allowBackup="true"
            android:icon="@drawable/ic_launcher"
            android:label="@string/app_name"
            android:theme="@style/AppTheme" >

            <activity
                android:name="com.mia.dialogbox.CustomDialogActivity"
                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>

Step 6 : Run the Project
As you press on the button Click here you will see a dialog box will appear .

As you press the Back button the dialogbox will be disappeared .

Explanation of the code :

We define an object of Button class and call the onClick() method as\ we have done in one of the previous post .
In the onClick() method we call the dialogbox like

showCustomDialog(textDialog);

Then we define the metod showCustomDialog and pass the parameters as the textView we are going to display

In it we define the onClick() for the Back button which closes the dialog after being clicked

protected void showCustomDialog(final TextView _textDialog) {
        // TODO Auto-generated method stub
        final Dialog dialog = new Dialog(CustomDialogActivity.this);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.dialog);
        
        final TextView Text1 = (TextView)dialog.findViewById(R.id.textView1);
        Button button = (Button)dialog.findViewById(R.id.button1);    
        button.setOnClickListener(new View.OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                dialog.dismiss();
            }
        });

After the completion of the showCustomDialog() method we get back again to the previous page activity_main.xml .

You can try to include any element like ImageView, ImageButton etc in the dialog.xml and experiment it.
You can also make spinner in dialog box.

Download the Complete Source Code

Stay Tuned with Made In Android

22 June 2014