How to create a Custom Dialog box in android?

Question

I want to create a custom dialog box like below

I have tried the following things.

1. I created a subclass of AlertDialog.Builder and used a custom Title and Custom Content View and used that but the result was not as expected.

2. Another attempt was to subclass DialogFragment and customize the dialog inside onCreateDialog that but result was not as expected.

3. Then I tried using a plain Dialog class. The result was not as expected.

In all three cases, the problem is when I overlook the title view the size of the dialog is not as expected and when I use Title view the result is there is a thick border around the content view (which really looks bad). Now I have two questions in my mind...

1. How can I achieve that? As I have already tried so many things, a direct answer will be more appreciated.

2. What is the best way to show an error or alert dialog in an android app?

EDIT Android Developer Documentation recommends that we should use either DialogFragments or Dialogs for showing Error / Alert Messages to the user. However at one point they say ...

Tip: If you want a custom dialog, you can instead display an Activity as a dialog instead of using the Dialog APIs. Simply create an activity and set its theme to Theme.Holo.Dialog in the manifest element.

What is the meaning of that? Isn't it too much to use an Activity just for showing an error message???

Answer 1

Here I have created a simple Dialog, like:

custom_dialog.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="80dp"     android:background="#3E80B4"     android:orientation="vertical" >      <TextView         android:id="@+id/txt_dia"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:layout_margin="10dp"         android:text="Do you realy want to exit ?"         android:textColor="@android:color/white"         android:textSize="15dp"         android:textStyle="bold"/>           <LinearLayout         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:background="#3E80B4"         android:orientation="horizontal" >          <Button             android:id="@+id/btn_yes"             android:layout_width="100dp"             android:layout_height="30dp"             android:background="@android:color/white"             android:clickable="true"             android:text="Yes"             android:textColor="#5DBCD2"             android:textStyle="bold" />          <Button             android:id="@+id/btn_no"             android:layout_width="100dp"             android:layout_height="30dp"             android:layout_marginLeft="5dp"             android:background="@android:color/white"             android:clickable="true"             android:text="No"             android:textColor="#5DBCD2"             android:textStyle="bold" />     </LinearLayout>  </LinearLayout> 

You have to extends Dialog and implements OnClickListener

public class CustomDialogClass extends Dialog implements     android.view.View.OnClickListener {    public Activity c;   public Dialog d;   public Button yes, no;    public CustomDialogClass(Activity a) {     super(a);     // TODO Auto-generated constructor stub     this.c = a;   }    @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     requestWindowFeature(Window.FEATURE_NO_TITLE);     setContentView(R.layout.custom_dialog);     yes = (Button) findViewById(R.id.btn_yes);     no = (Button) findViewById(R.id.btn_no);     yes.setOnClickListener(this);     no.setOnClickListener(this);    }    @Override   public void onClick(View v) {     switch (v.getId()) {     case R.id.btn_yes:       c.finish();       break;     case R.id.btn_no:       dismiss();       break;     default:       break;     }     dismiss();   } } 

How to Call Dialog ?

R.id.TXT_Exit: CustomDialogClass cdd=new CustomDialogClass(Values.this); cdd.show();   

Updates

After a long time one of my friends asked me to make a curved shape dialog with a transparent background. So, Here I have implemented it.

To Make a curved shape you need to create a separate curve_shap.XML as below,

<shape xmlns:android="http://schemas.android.com/apk/res/android" >      <solid android:color="#000000" />      <stroke         android:width="2dp"         android:color="#ffffff" />      <corners         android:bottomLeftRadius="20dp"         android:bottomRightRadius="20dp"         android:topLeftRadius="20dp"         android:topRightRadius="20dp" />  </shape> 

Now, add this curve_shap.XML in your main view Layout. In my case I have used LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"         android:layout_width="fill_parent"         android:layout_height="80dp"         android:background="@drawable/curve_shap"         android:orientation="vertical" > ... </LinearLayout> 

How to call this ?

CustomDialogClass cdd = new CustomDialogClass(MainActivity.this); cdd.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); cdd.show(); 

I hope that works for you.

Answer 2

This is an example dialog, create with xml.

the next code xml is just an example, the design or view is implemented here:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ffffffff">  <ImageView     android:layout_width="match_parent"     android:layout_height="120dp"     android:id="@+id/a"     android:gravity="center"     android:background="#DA5F6A"     android:src="@drawable/dialog_cross"     android:scaleType="fitCenter" />  <TextView     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:text="TEXTO"     android:id="@+id/text_dialog"     android:layout_below="@+id/a"     android:layout_marginTop="20dp"     android:layout_marginLeft="4dp"     android:layout_marginRight="4dp"     android:layout_marginBottom="20dp"     android:textSize="18sp"     android:textColor="#ff000000"     android:layout_centerHorizontal="true"     android:gravity="center_horizontal" />  <Button     android:layout_width="wrap_content"     android:layout_height="30dp"     android:text="OK"     android:id="@+id/btn_dialog"     android:gravity="center_vertical|center_horizontal"     android:layout_below="@+id/text_dialog"     android:layout_marginBottom="20dp"     android:background="@drawable/btn_flat_red_selector"     android:layout_centerHorizontal="true"     android:textColor="#ffffffff" />  </RelativeLayout> 

this lines of code are resources of drawable:

android:src="@drawable/dialog_cross" android:background="@drawable/btn_flat_red_selector" 

you could do a class extends Dialog, also something like this:

public class ViewDialog {      public void showDialog(Activity activity, String msg){         final Dialog dialog = new Dialog(activity);         dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);         dialog.setCancelable(false);         dialog.setContentView(R.layout.dialog);          TextView text = (TextView) dialog.findViewById(R.id.text_dialog);         text.setText(msg);          Button dialogButton = (Button) dialog.findViewById(R.id.btn_dialog);         dialogButton.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 dialog.dismiss();             }         });          dialog.show();      } } 

finally the form of call, on your Activity for example:

ViewDialog alert = new ViewDialog(); alert.showDialog(getActivity(), "Error de conexión al servidor"); 

I hope its work for you.

UPDATE

Drawable XML For dialog :

<shape xmlns:android="schemas.android.com/apk/res/android"> <stroke android:width="2dp" android:color="#FFFFFF" /> <gradient android:angle="180" android:endColor="@color/NaranjaOTTAA" android:startColor="@color/FondoActionBar" /> <corners android:bottomLeftRadius="7dp" android:bottomRightRadius="7dp" android:topLeftRadius="7dp" android:topRightRadius="7dp" /> </shape>  

This xml was provided by @GastónSaillén.