Custom Dialog in Android

A Custom Dialog  is a Dialog which we can customise and give our own design. Let’s see how this is done with an example.

Firstly, let’s create our custom layout. I’ve given below my xml layout which I named my_custom_dialog.xml  . I’ve included  an ImageView, a TextView and a Button in the layout.

The Xml layout my_custom_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" >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
         >
    <ImageView
        android:id="@+id/imgv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
          <TextView
              android:id="@+id/tv"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textSize="25dip"
              />
    </LinearLayout>
      <Button
          android:id="@+id/btnfinish"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Click to Finish my Custom Dialog"
          />
    </LinearLayout>

In the main.xml I’ve included a Button clicking on which will display the Custom Dialog.

The XML layout named 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/btnclick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click to start my Custom Dialog" />
 </LinearLayout>

Now let’s move on to the coding. Firstly, create an instance of the Dialog class and then set the customized layout, here, my_custom_dialog.xml, as the ContentView for the Custom Dialog by calling the method setContentView(int) and passing the custom layout resource id to it.

Here is the code:

myDialog = new Dialog(MyCustomDialog.this);
myDialog.setContentView(R.layout.my_custom_dialog);

Next, let’s give our Dialog a title as shown below:

myDialog.setTitle("My Custom Dialog Title");

Now, we need to find the View Objects in the layout.

txtv=(TextView)myDialog.findViewById(R.id.tv);
imgv=(ImageView)myDialog.findViewById(R.id.imgv);
finishbtn=(Button)myDialog.findViewById(R.id.btnfinish);

Having captured the View Objects in our layout, let’s set their properties.

txtv.setText("My Custom Dialog Text");
imgv.setImageResource(R.drawable.kitty);
finishbtn.setOnClickListener(new OnClickListener() {            
@Override
public void onClick(View v) {
          // TODO Auto-generated method stub
          myDialog.cancel();
          }
          });

Here in the ClickListener of the button ‘finishbtn’, I’ve written the code for closing the Custom Dialog.

Finally, we need to create and display the Custom Dialog. This is done using show() method.

myDialog.show();

The Whole code for the application is given below:

package com.deepthi.mycustomdialog;
 import android.app.Activity;
import android.app.Dialog;
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 MyCustomDialog extends Activity {
    /** Called when the activity is first created. */
      Button click,finishbtn;
      TextView txtv;
      ImageView imgv;
      Dialog myDialog;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        click=(Button)findViewById(R.id.btnclick);
        click.setOnClickListener(new OnClickListener() {
                 @Override
                  public void onClick(View v) {
                        // TODO Auto-generated method stub
                        myDialog = new Dialog(MyCustomDialog.this);
                        myDialog.setContentView(R.layout.my_custom_dialog);
                        myDialog.setTitle("My Custom Dialog Title");
                        txtv=(TextView)myDialog.findViewById(R.id.tv);
                        txtv.setText("My Custom Dialog Text");
                        imgv=(ImageView)myDialog.findViewById(R.id.imgv);
                        imgv.setImageResource(R.drawable.kitty);
                        finishbtn=(Button)myDialog.findViewById(R.id.btnfinish);
                        finishbtn.setOnClickListener(new OnClickListener() {
                             @Override
                              public void onClick(View v) {
                                    // TODO Auto-generated method stub
                                    myDialog.cancel();
                              }
                        });
                        myDialog.show();
                  }
            });
    }
}

The screen shot of the output is show below:

After clicking the button in the activity:

Clicking the button inside the Custom Dialog closes the Dialog.

Advertisements

, , , , , ,

  1. #1 by nani on July 30, 2012 - 4:02 pm

    Hi,
    In this post i get white border in in less than 2.2 versions
    this dialog can get black border in 2.3 on wards so how to remove that border can you please send me the solution.

  2. #2 by Nilesh on August 23, 2012 - 11:44 am

    How to remove border ??

    • #3 by Deepthi G on August 29, 2012 - 6:45 pm

      Hey
      Just try this:
      Instead of myDialog = new Dialog(MyCustomDialog.this); in the code
      try
      myDialog = new Dialog(MyCustomDialog.this,android.R.style.Theme_NoTitleBar);
      Hope this helps.. 🙂

  3. #4 by Java Sri Lankan Support on October 8, 2012 - 8:56 pm

    Android Dialog – Android Custom Dialog

    how to create Android Custom Dialg which is for user login, you may have any customized android layout.

  4. #5 by Giancarlo Leonio on March 14, 2013 - 2:44 am

    Thanks for this post! I compiled a list of some other top resources for creating your custom dialog box in android. Hope others find it useful too! http://www.verious.com/board/Giancarlo-Leonio/customizing-dialog-boxes-in-android/ Feel free to share 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: