Android: AlertDialog with custom view and rounded corners

Question

I'm trying to build an AlertDialog with a custom view (no title or footer) and rounded corners. I've seen a lot of posts about how to do that and I tried a lot of things, but I can't build it like I want to.

This is my goal:

enter image description here

I created a drawable for the dialog called dialog_background.xml:

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

    <solid
        android:color="#FFAAAAAA" />

    <stroke
        android:width="2dp"
        android:color="#FF000000" />

    <corners android:radius="20dp" />
</shape>

And I added a style to use it:

<style name="MyDialog" parent="@android:style/Theme.Dialog">
    <item name="android:background">@drawable/dialog_background</item>
</style>

The layout of my custom view is gonna have two buttons. Right now I show you an empty LinearLayout to make it simple. This is playdialog.xml:

<LinearLayout 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"
    android:orientation="vertical"
    style="@style/MyDialog"
     >

</LinearLayout>

To build the Dialog I use a DialogFragment. This is its onCreateDialog function:

public Dialog onCreateDialog(Bundle savedInstanceState) {
    AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
    LayoutInflater inflater = getActivity().getLayoutInflater();

    builder.setView(inflater.inflate(R.layout.playdialog, null));
    return builder.create();
}

Ok, if I use the code like that I get this:

enter image description here

I tried to set the dialog background to transparent modifying my DialogFragment code:

public Dialog onCreateDialog(Bundle savedInstanceState) {
    AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
    LayoutInflater inflater = getActivity().getLayoutInflater();

    builder.setView(inflater.inflate(R.layout.playdialog, null));

    **NEW**        

    Dialog d = builder.create();
    d.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
    return d; 
}

The result is exactly the same, so then I realized that that white rectangle under my dialog is from my custom view, not from the dialog. I'm already setting my view's background to dialog_background.xml, so I can't set it to transparent too or I loose the corners, color, etc.

Then I decided to modify the dialog's background using dialog_background.xml and have my view have a solid color as background.

In my custom view layout (playdialog.xml) I replaced style="@style/MyDialog" with:

android:background="#FFAAAAAA"

And then in my DialogFragment I used this code:

public Dialog onCreateDialog(Bundle savedInstanceState) {
    AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
    LayoutInflater inflater = getActivity().getLayoutInflater();

    builder.setView(inflater.inflate(R.layout.playdialog, null));

    **NEW**        

    Dialog d = builder.create();
    d.getWindow().setBackgroundDrawableResource(R.drawable.dialog_background);
    return d; 
}

This is what I get:

enter image description here

It's almost what I wanted, but you can see my custom view borders, so it's not good enough. At this point I didn't know what else could I do.

Anyone knows how can I solve it?

Thanks!

could you fix the problem? With rounded corner, I am not able to eliminate the white sections in the corder — sabbir, Jan 07 '15 at 20:32

score 6 · Accepted Answer · answered Mar 02 '13 at 12:13

I just created a custom alert dialog. But its corners are not rounded.

First create a layout for it as -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="240sp"
android:layout_height="wrap_content"
android:background="#FFFFFF"
tools:ignore="SelectableText" >

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="1sp"
    tools:ignore="UselessParent" >

    <TableLayout 
        android:id="@+id/tablelayout_dialog_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:stretchColumns="1" >

        <TableRow
            android:id="@+id/tablerow_dialog_title"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"            
            tools:ignore="UselessParent" >

            <ImageView 
                android:id="@+id/imageview_dialog_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/alertwhite" 
                android:layout_gravity="center"
                android:background="#643c3a"
                android:contentDescription="@string/string_todo"/>

            <TextView
                android:id="@+id/textview_dialog_title"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent" 
                android:background="#643c3a"
                android:padding="10sp"
                android:gravity="center_vertical"
                android:textColor="#FFFFFF"
                android:textSize="15sp" />

        </TableRow>     
    </TableLayout>

    <View 
        android:id="@+id/viewline_dialog"
        android:layout_below="@+id/tablelayout_dialog_title"
        android:layout_width = "wrap_content" 
        android:layout_height="0.25dip"
        android:background="#ffffff"          
        android:layout_centerVertical ="true" />

    <TextView
        android:id="@+id/textview_dialog_text"
        android:layout_below="@+id/viewline_dialog"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="8sp"
        android:background="#643c3a"
        android:textColor="#FFFFFF"
        android:textSize="12sp" />

    <View 
        android:id="@+id/viewline1_dialog"
        android:layout_width = "wrap_content" 
        android:layout_height="0.5dip"
        android:background="#ffffff"          
        android:layout_centerVertical ="true" 
        android:layout_below="@+id/textview_dialog_text"/>

    <TableLayout 
        android:id="@+id/tablelayout_dialog_button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:stretchColumns="*"
        android:layout_below="@+id/viewline1_dialog"
        android:background="#a8a8a8" >

        <TableRow
            android:id="@+id/tablerow_dialog_button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"            
            tools:ignore="UselessParent" >

            <Button
                android:id="@+id/button_dialog_yes"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8sp"
                android:paddingTop="5sp"
                android:paddingBottom="5sp"
                android:background="@drawable/roundedcornerbuttonfordialog_shape"
                android:text="@string/string_yes" />

            <Button
                android:id="@+id/button_dialog_no"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8sp"
                android:paddingTop="5sp"
                android:paddingBottom="5sp"
                android:background="@drawable/roundedcornerbuttonfordialog_shape"
                android:text="@string/string_no" />

        </TableRow>
    </TableLayout>

</RelativeLayout>

Now write the code of dialog as -

public static void callAlert(String message, final Context context){
    final Dialog dialog = new Dialog(context);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.setContentView(R.layout.customdialog_layout);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.WHITE));               

    TextView tvTitle = (TextView) dialog.findViewById(R.id.textview_dialog_title);
    tvTitle.setText("MyApp..");

    TextView tvText = (TextView) dialog.findViewById(R.id.textview_dialog_text);
    tvText.setText(message);    

    Button buttonDialogYes = (Button) dialog.findViewById(R.id.button_dialog_yes);
    buttonDialogYes.setOnClickListener(new OnClickListener() {          
        public void onClick(View v) {
            // Do your stuff...
            dialog.dismiss();
        }
    });

    Button buttonDialogNo = (Button) dialog.findViewById(R.id.button_dialog_no);
    buttonDialogNo.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
            // Do your stuff...
            dialog.dismiss();
        }           
    });
    dialog.show();
}

And call this method as -

String message = "Your Message";
callAlert(message, callingClass.this);

Hope this will help you.

Using a Dialog instead of AlertDialog, like you did, solved the problem. Thanks! :D — PX Developer, Mar 02 '13 at 13:03
IMO, I would not use a TableLayout to try and do formatting. I would stick to Linear, Relative, and Frame. Flattening your view hierarchy increase performance. — jpotts18, Feb 25 '14 at 23:37
You saved my day with this `dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.WHITE)); `Thanks! — Luis Aguilar, Jul 11 '19 at 21:04

score 1 · Answer 2 · edited May 23 '17 at 12:24

1

In my case, to remove borders in dialog this solution was helpfull:

dialog.setStyle(DialogFragment.STYLE_NO_FRAME, 0);

like described here https://stackoverflow.com/a/19521674/3173384

edited May 23 '17 at 12:24

Community

1
1

answered May 09 '14 at 06:43

Penzzz

2,814
17
23

score 0 · Answer 3 · answered Dec 02 '14 at 12:26

The below code solved the issue

MyDialog mydialog = new MyDialog(this, "for testing",
            new myOnClickListener() {

                @Override
                public void onPositiveButtonClick() {
                    // TODO Auto-generated method stub
                    Toast.makeText(getApplicationContext(),
                            "I am positive button in the dialog",
                            Toast.LENGTH_LONG).show();
                }

                @Override
                public void onNegativeButtonClick() {
                    // TODO Auto-generated method stub
                    Toast.makeText(getApplicationContext(),
                            "I am negative button in the dialog",
                            Toast.LENGTH_LONG).show();
                }
            });

    // this will remove rectangle frame around the Dialog
    mydialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
    mydialog.show();

Thanks, Nagendra

it didn't eliminate the white sections in the corder :( – sabbir Jan 07 '15 at 20:32 — sabbir, Jan 07 '15 at 20:32

score -2 · Answer 4 · answered Mar 02 '13 at 11:49

-2

why don't you use the image that you are showing like "This is my goal:" save your goal bg image in drawable folder.

private AlertDialog createAlertDialog() {
    AlertDialog.Builder builder = new AlertDialog.Builder(this);
    builder.setView(getLayoutInflater().inflate(R.layout.playdialog, null));
    return builder.create();
}

then

AlertDialog dialog = createAlertDialog();
dialog.show();

answered Mar 02 '13 at 11:49

umesh

1,148
1
12
25

use of images is not recommended for reasons such as scalability, and computational re-rendering time and unnecessary power consumption for the same. – computingfreak Nov 21 '16 at 03:23

Android: AlertDialog with custom view and rounded corners

4 Answers4