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

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.

Answer 2

Add the below theme in values -> style.xml

<style name="Theme_Dialog" parent="android:Theme.Light">
     <item name="android:windowNoTitle">true</item>
     <item name="android:windowBackground">@android:color/transparent</item>
</style>

Use this theme in your onCreateDialog method like this:

Dialog dialog = new Dialog(FlightBookActivity.this,R.style.Theme_Dialog);

Define your dialog layout including title bar in the xml file and set that xml file like this:

dialog.setContentView(R.layout.your_dialog_layout);

Answer 3

The above screenshot is my outcome.

Steps :

1. Need to create xml. // ui design
2. Need to write method. // define access methods
3. Call wherever you want. // access callback

Please refer the given link for code reference CustomDialogBox.