Creating Custom Dialog in Android

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.

dialog.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/ic_launcher" />

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Medium Text"

        android:textAppearance="?android:attr/textAppearanceMedium" />

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content" >

        <Button

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Button" />

        <Button

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Button" />

        <Button

            android:id="@+id/button3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Button" />

    </LinearLayout>

</LinearLayout>

activity_caustom_dialog_main.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" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:padding="@dimen/padding_medium"

        android:text="@string/hello_world"

        tools:context=".CaustomDialogMainActivity" />

    <Button

        android:id="@+id/btn_show_dialog"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/textView1"

        android:layout_below="@+id/textView1"

        android:text="Button" />

</RelativeLayout>

CaustomDialogMainActivity.java

package com.savtech.android.caustomdialog;

import android.os.Bundle;

import android.app.Activity;

import android.app.Dialog;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.view.View.OnClickListener;

import android.webkit.WebChromeClient.CustomViewCallback;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

import android.support.v4.app.NavUtils;

public class CaustomDialogMainActivity extends Activity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_caustom_dialog_main);

Button btn_ShowDialog = (Button) findViewById(R.id.btn_show_dialog);

btn_ShowDialog.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

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

// to set dialog a custom layout.......

dialog.setContentView(R.layout.dialog);

// to set dialog title .......

dialog.setTitle("This is Dialog Title ...");

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

text.setText("Android custom dialog example!");

ImageView image = (ImageView) dialog

.findViewById(R.id.imageView1);

image.setImageResource(R.drawable.ic_launcher);

Button dialogButton1 = (Button) dialog

.findViewById(R.id.button1);

Button dialogButton2 = (Button) dialog

.findViewById(R.id.button2);

Button dialogButton3 = (Button) dialog

.findViewById(R.id.button3);

dialogButton1.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

Toast.makeText(getApplicationContext(), "Button 1",

Toast.LENGTH_SHORT).show();

}

});

dialogButton2.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

Toast.makeText(getApplicationContext(), "Button 2",

Toast.LENGTH_SHORT).show();

}

});

dialogButton3.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

Toast.makeText(getApplicationContext(), "Button 3",

Toast.LENGTH_SHORT).show();

}

});

dialog.show();

}

});

}

}

Now run this application ......

Now click on the Button and you will see this Dialog...with Image View ,Text View and 3 Buttons.

Now click on Button 2 ......see the Toast Message .....

Enjoy...........