Android Custom Alert Dialog Design

Question

I´m trying to implement a basic custom Alert Dialog.

It should look like this

With the following XML Code:

<?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:id="@+id/tv_custom_dialog_event"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:background="@drawable/actionbar_background"
    android:gravity="top"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingLeft="100dp"
        android:text="Delete Event ?"
        android:textColor="@color/white"
        android:textSize="20sp" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#DFDFDF" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageButton
        android:id="@+id/btn_custom_dialog_events_cancel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/ic_action_cancel" />

    <ImageButton
        android:id="@+id/btn_custom_dialog_events_true"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/ic_action_accept" />
    </LinearLayout>
</LinearLayout>

However when I run it on my emulator it looks like this:

Does anybody know why this happens and how I can fix that?

Answer 1

Assuming you have a class that extends Dialog you can do the following:

First define a style in styles.xml with something like this:

<style name="CustomDialogThemeTrasparent"    parent="@android:style/Theme.Dialog">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:windowBackground">@color/transparent</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

Then in the constructor of your custom dialog class you set this theme:

public class MyCustomDialog extends Dialog {    

public MyCustomDialog(final Context context)
{
    super(context, R.style.CustomDialogThemeTrasparent);
}

To set your custom layout as view you can make a function called setTheme() and then called in the show() of your dialog, even with parameters and a nice done layout you can make a more generic class that you can use to show your custom dialogs all over your app, something like this:

//Function to set the layout when the dialog is instantiated, here we 
//set the layout and if you want you can set parameter to 
//show/hide controls/views and can show different types of dialogs with the same class but with a unified style
private void setTheme()
{
    LayoutInflater layoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    mView = layoutInflater.inflate(R.layout.custom_dialog, null);

    this.setContentView(mView);
}

then you can make function(s) to show your dialog(s), like:

public void showDeletionDialog(String pMessage)
{
    this.setTheme();
    this.show();
}

hope it help you

Answer 2

Try this approach. You can inflate your layout:

public AlertDialog displayLayoutDialog(int layout,final Context context, int theme){
        AlertDialog.Builder builder = new AlertDialog.Builder(context, theme);
        LayoutInflater inflater = LayoutInflater.from(context);
        View view = inflater.inflate(layout, null);
        builder.setView(view);
        builder.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
            }
        });
        builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.dismiss();
            }
        });
        AlertDialog dialog= builder.create();
        dialog.show();
        Button tb = dialog.getButton(DialogInterface.BUTTON_POSITIVE);
        tb.setOnClickListener(new CustomListener(dialog, context));

        return dialog;
    }

And your Listener where all the validation and anything else that you need happens:

public class CustomListener implements View.OnClickListener {
        private final Dialog dialog;
        private Context context;
        public CustomListener(Dialog dialog, Context context) {
            this.dialog = dialog;
            this.context = context;
        }
        @Override
        public void onClick(View v) {
            Toast.makeText(context, "Custom Layout", Toast.LENGTH_LONG).show();
        }
    }

Hope it helps!!!