How to make custom dialog with rounded corners in android

Question

What I am trying to do: I am trying to make a custom dialog in android With rounded corners.

What is happening: I am able to make custom dialog but it doesn't have rounded corners. I tried adding a selector but still I couldn't achieve rounded corners.

Below is my code for the same:

Java code:

private void launchDismissDlg() {

        dialog = new Dialog(getActivity(), android.R.style.Theme_Dialog);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.dlg_dismiss);
        dialog.setCanceledOnTouchOutside(true);

        Button btnReopenId = (Button) dialog.findViewById(R.id.btnReopenId);
        Button btnCancelId = (Button) dialog.findViewById(R.id.btnCancelId);

        btnReopenId.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {



            }
        });


        btnCancelId.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {



            }
        });
        dialog.setCanceledOnTouchOutside(false);
        dialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
        dialog.getWindow().setLayout(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);
        dialog.show();

    }

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:background="@android:color/white"
    android:orientation="vertical" >

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

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:gravity="center" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="&quot;I WOULD LIKE TO DISMISS THE VENDOR&quot;"
                android:textColor="@color/col_dlg_blue_light"
                android:textSize="14sp"
                android:textStyle="bold" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:gravity="center" >

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="BECAUSE"
                android:textColor="@android:color/black"
                android:textStyle="bold" />
        </TableRow>



        <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btnReopenId"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@color/col_dlg_green_light"
                android:text="REOPEN"
                android:padding="5dp"
                android:textSize="14sp"
                android:textColor="@android:color/white"
                android:textStyle="bold" />

            <Button
                android:id="@+id/btnCancelId"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@color/col_dlg_pink_light"
                android:text="CANCEL"
                android:padding="5dp"
                android:textSize="14sp"
                android:textColor="@android:color/white"
                android:textStyle="bold" />
        </TableRow>
    </TableLayout>

</LinearLayout>

@Apurva ... i have not used floating menu ... but i am talking about an alert dialog(custom) — Devrath, Mar 09 '15 at 07:43
I was asking about floating menu because I've seen round cornered pop up in only that. Never seen dialog with rounded corners. — Apurva, Mar 09 '15 at 07:46
[http://stackoverflow.com/questions/12501488/android-alertdialog-with-rounded-corners](http://stackoverflow.com/questions/12501488/android-alertdialog-with-rounded-corners) — M D, Mar 09 '15 at 07:46

score 506 · Accepted Answer · edited Nov 14 '21 at 13:44

506

Create an XML file in drawable, say dialog_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="@color/white"/>
    <corners
        android:radius="30dp" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

set it as the background in your layout XML:

android:background="@drawable/dialog_bg"

Set the background of the dialog's root view to transparent, because Android puts your dialog layout within a root view that hides the corners in your custom layout.

Java:

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

Kotlin:

dialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

edited Nov 14 '21 at 13:44

Asror Abdurakhmanov

88
1
2
7

answered Mar 09 '15 at 07:47

Koma Yip

5,359
1
11
12

1

The problem with this approach is that the button's background will also be transparent. – Henrique de Sousa Dec 01 '15 at 17:25
72

`dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));` is what mising on most of the other SO threads! +1 – Randika Vishman Feb 19 '16 at 08:06
Background TRANSPARENT is not showing please help me sir,,,@koma yip – Gowthaman M Jun 22 '17 at 04:35
Yes sir,i have recylierview on top i need TRANSPARENT dialog.but it is showing white color dialog,not showing background transparent...@KomaYip – Gowthaman M Jun 22 '17 at 04:59
I used this and lower corners are rounded now. but upper corners are still not rounded. – Vivek Pratap Singh Nov 09 '17 at 07:25
@VivekPratapSingh, i think the upper part not being fully shown? – Koma Yip Nov 09 '17 at 07:30
4

`setBackgroundDrawable` seems to be deprecated... any alternatives to that? – DarkCygnus Jun 15 '18 at 18:07
4

Add `dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));` before `setContentView` – Ravi Vaniya Nov 01 '18 at 08:36
1

This works except that the part where the dialog's buttons are shown are transparent :/ – Spikatrix Jan 09 '19 at 05:00
1

instead @color/white and save the white color in colors.xml, you can use @android:color/white – maxwellnewage Nov 28 '19 at 20:03
Where do I have to place dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); ? setBackgroundDrawable doesn't work for me. – Daniëlle Jan 06 '21 at 21:22
@Daniëlle dialog is the instance of your Dialog object you wish to make rounded, just change it to your own variable – Koma Yip Jan 18 '21 at 02:53
Superior answer: https://stackoverflow.com/a/41719997/337455 – Jeffrey Blattman Mar 24 '22 at 19:46
Another issue is that if there is a list in the dialog, the ripple effect from the click won't conform to the rounded corners – 6rchid Jun 29 '23 at 19:14

Gabriele Mariotti · Answer 2 · 2020-08-07T08:09:15.723

57

With the Androidx library and Material Components Theme you can override the getTheme() method:

import androidx.fragment.app.DialogFragment

class RoundedDialog: DialogFragment() {

    override fun getTheme() = R.style.RoundedCornersDialog

    //....

}

with:

<style name="RoundedCornersDialog" parent="@style/Theme.MaterialComponents.Dialog">
    <item name="dialogCornerRadius">16dp</item>
</style>

Or you can use the MaterialAlertDialogBuilder included in the Material Components Library:

import androidx.fragment.app.DialogFragment
import com.google.android.material.dialog.MaterialAlertDialogBuilder

class RoundedAlertDialog : DialogFragment() {

    //...

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return MaterialAlertDialogBuilder(requireActivity(), R.style.MaterialAlertDialog_rounded)
                .setTitle("Test")
                .setMessage("Message")
                .setPositiveButton("OK", null)
                .create()
    }

}

with:

<style name="MaterialAlertDialog_rounded" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="shapeAppearanceOverlay">@style/DialogCorners</item>
</style>

<style name="DialogCorners">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">16dp</item>
</style>

If you don't need a DialogFragment just use the MaterialAlertDialogBuilder.

edited Aug 07 '20 at 08:09

answered Jun 17 '20 at 15:11

Gabriele Mariotti

320,139
94
887
841

1

This one worked for me. You saved me a lot of time. Thanks :) – Arun K Babu Oct 29 '21 at 18:37
1

awesome answer, works perfect! – Matan Dahan Dec 06 '21 at 10:01
Will _probably_ only work from API level 28 upwards... – arkascha Mar 30 '22 at 14:43
@arkascha why should it work only for API 28+? – Gabriele Mariotti Mar 30 '22 at 16:26
Sorry, I have to correct my comment: _the first approch_ will only work from API level 28 upwards, since `dialogCornerRadius` has not been implemented before. Actually AndroidStudio points out that issue. – arkascha Mar 31 '22 at 06:52
Still work very well on API 32. – Thái Quốc Toàn Dec 16 '22 at 15:34
Works for min sdk 27 – DIRTY DAVE Jun 23 '23 at 03:30

SMR · Answer 3 · 2018-02-05T06:21:53.767

35

You need to do the following:

Create a background with rounded corners for the Dialog's background:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

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

    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />

</shape>

Now in your Dialog's XML file in the root layout use that background with required margin:

android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:background="@drawable/dialog_background"

finally in the java part you need to do this:

dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(layoutResId);
View v = getWindow().getDecorView();
v.setBackgroundResource(android.R.color.transparent);

This works perfectly for me.

edited Feb 05 '18 at 06:21

answered Mar 09 '15 at 07:48

SMR

6,628
2
35
56

1

if you want to use same value for all corners then you should use `` , otherwise you'll get rendering issues – Mehran Aug 25 '18 at 05:51
1

@Mehran good point. Thanks for pointing that out. Can you also share the source of this info? – SMR Aug 29 '18 at 05:53
@SMR `Path.isConvex is not supported` this is the warning you usually get in your layout if you use a shape with same value for all corners. https://stackoverflow.com/q/34736981/6605907 – Mehran Aug 29 '18 at 07:48

score 31 · Answer 4 · edited Apr 26 '17 at 06:41

31

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

this works for me

edited Apr 26 '17 at 06:41

pRaNaY

24,642
24
96
146

answered Dec 15 '16 at 11:11

Gabriel Ribeiro Silva

439
4
3

it's also working for me – Maruf Alam Jun 08 '23 at 12:07

score 22 · Answer 5 · answered Mar 13 '19 at 11:11

22

Setting

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

will prevent dialog to cast a shadow.

Solution is to use

dialog.getWindow().setBackgroundDrawableResource(R.drawable.dialog_rounded_background);

where is R.drawable.dialog_rounded_background

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" android:padding="10dp">
            <solid
                android:color="@color/dialog_bg_color"/>
            <corners
                android:radius="30dp" />
        </shape>
    </item>

</layer-list>

answered Mar 13 '19 at 11:11

Zoran

1,502
19
22

2

Most elegant and simple solution that worked on API 27, Android 8.1 Oreo. – ManuelTS Nov 03 '19 at 10:40
2

This is the correct answer in 2020 if you're still stuck with Theme.AppCompat – barnacle.m Mar 23 '20 at 16:58
1

I don't understand why this is not the accepted answer ... – Greelings Oct 26 '20 at 16:21
Perfectly working. This should be the accepted answer – Parthi Jun 29 '21 at 12:50

score 17 · Answer 6 · answered Oct 06 '19 at 12:55

17

If you use Material Components:

CustomDialog.kt

class CustomDialog: DialogFragment() {

    override fun getTheme() = R.style.RoundedCornersDialog

}

styles.xml

<style name="RoundedCornersDialog" parent="Theme.MaterialComponents.Dialog">
    <item name="dialogCornerRadius">dimen</item>
</style>

answered Oct 06 '19 at 12:55

sheddar

270
1
4
16

1

It was the solution for me, thanks! In my case, I added text and background color: – fvaldivia Nov 26 '19 at 09:34

Samet ÖZTOPRAK · Answer 7 · 2017-10-03T20:18:12.777

dimen.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <integer name="weight">1</integer>

    <dimen name="dialog_top_radius">21dp</dimen>

    <dimen name="textview_dialog_head_min_height">50dp</dimen>
    <dimen name="textview_dialog_drawable_padding">5dp</dimen>

    <dimen name="button_dialog_layout_margin">3dp</dimen>


</resources>

styles.xml

<style name="TextView.Dialog">
        <item name="android:paddingLeft">@dimen/dimen_size</item>
        <item name="android:paddingRight">@dimen/dimen_size</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:textColor">@color/black</item>
    </style>

    <style name="TextView.Dialog.Head">
        <item name="android:minHeight">@dimen/textview_dialog_head_min_height</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:background">@drawable/dialog_title_style</item>
        <item name="android:drawablePadding">@dimen/textview_dialog_drawable_padding</item>
    </style>

    <style name="TextView.Dialog.Text">
        <item name="android:textAppearance">@style/Font.Medium.16</item>
    </style>

    <style name="Button" parent="Base.Widget.AppCompat.Button">
        <item name="android:layout_height">@dimen/button_min_height</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:gravity">center</item>
        <item name="android:textAppearance">@style/Font.Medium.20</item>
    </style>

 <style name="Button.Dialog">
        <item name="android:layout_weight">@integer/weight</item>
        <item name="android:layout_margin">@dimen/button_dialog_layout_margin</item>
    </style>

    <style name="Button.Dialog.Middle">
        <item name="android:background">@drawable/button_primary_selector</item>
    </style>

dialog_title_style.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="270"
        android:endColor="@color/primaryDark"
        android:startColor="@color/primaryDark" />

    <corners
        android:topLeftRadius="@dimen/dialog_top_radius"
        android:topRightRadius="@dimen/dialog_top_radius" />

</shape>

dialog_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/backgroundDialog" />
    <corners
        android:topLeftRadius="@dimen/dialog_top_radius"
        android:topRightRadius="@dimen/dialog_top_radius" />
    <padding />
</shape>

dialog_one_button.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="wrap_content"
    android:background="@drawable/dailog_background"
    android:orientation="vertical">

    <TextView
        android:id="@+id/dialogOneButtonTitle"
        style="@style/TextView.Dialog.Head"
        android:text="Process Completed" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/dialogOneButtonText"
            style="@style/TextView.Dialog.Text"
            android:text="Return the main menu" />

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

            <Button
                android:id="@+id/dialogOneButtonOkButton"
                style="@style/Button.Dialog.Middle"
                android:text="Ok" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

OneButtonDialog.java

package com.example.sametoztoprak.concept.dialogs;

import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.TextView;

import com.example.sametoztoprak.concept.R;
import com.example.sametoztoprak.concept.models.DialogFields;

/**
 * Created by sametoztoprak on 26/09/2017.
 */

public class OneButtonDialog extends Dialog implements View.OnClickListener {

    private static OneButtonDialog oneButtonDialog;
    private static DialogFields dialogFields;

    private Button dialogOneButtonOkButton;
    private TextView dialogOneButtonText;
    private TextView dialogOneButtonTitle;

    public OneButtonDialog(AppCompatActivity activity) {
        super(activity);
    }

    public static OneButtonDialog getInstance(AppCompatActivity activity, DialogFields dialogFields) {
        OneButtonDialog.dialogFields = dialogFields;
        return oneButtonDialog = (oneButtonDialog == null) ? new OneButtonDialog(activity) : oneButtonDialog;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.dialog_one_button);
        getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

        dialogOneButtonTitle = (TextView) findViewById(R.id.dialogOneButtonTitle);
        dialogOneButtonText = (TextView) findViewById(R.id.dialogOneButtonText);
        dialogOneButtonOkButton = (Button) findViewById(R.id.dialogOneButtonOkButton);

        dialogOneButtonOkButton.setOnClickListener(this);
    }

    @Override
    protected void onStart() {
        super.onStart();
        dialogOneButtonTitle.setText(dialogFields.getTitle());
        dialogOneButtonText.setText(dialogFields.getText());
        dialogOneButtonOkButton.setText(dialogFields.getOneButton());
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.dialogOneButtonOkButton:

                break;
            default:
                break;
        }
        dismiss();
    }
}

score 13 · Answer 8 · edited Jul 31 '19 at 07:09

13

I made a new way without having a background drawable is that make it have CardView as parent and give it a app:cardCornerRadius="20dp" and then add this in the java class dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

It's another way to make it .

edited Jul 31 '19 at 07:09

ppreetikaa

1,149
2
15
22

answered Apr 14 '18 at 22:05

Sattar

2,453
2
33
47

xaif · Answer 9 · 2020-06-10T18:16:31.767

You can simply use MaterialAlertDialogBuilder to create custom dialog with rounded corners.

First create a style for the material dialog like this :

<style name="MyRounded.MaterialComponents.MaterialAlertDialog" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.App.CustomDialog.Rounded
    </item>
    <item name="colorSurface">@color/YOUR_COLOR</item>
</style>

<style name="ShapeAppearanceOverlay.App.CustomDialog.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">10dp</item>
</style>

then create a Alert Dialog object in Java class like this :

AlertDialog alertDialog =  new MaterialAlertDialogBuilder(this,R.style.MyRounded_MaterialComponents_MaterialAlertDialog)  // for fragment you can use getActivity() instead of this 
                    .setView(R.layout.custom_layout) // custom layout is here 
                    .show();

            final EditText editText = alertDialog.findViewById(R.id.custom_layout_text);   // access to text view of custom layout         
            Button btn = alertDialog.findViewById(R.id.custom_layout_btn);

            btn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                    Log.d(TAG, "onClick: " + editText.getText().toString());
                }
            });

That's all you need to do.

the most correct way, do not forget to use MaterialAlertDialogBuilder instead of AlertDialog.Builder — Zakhar Rodionov, May 21 '20 at 12:55
All the other answers are outdated and ambigious, yet this is the most simplest and accurate one! Thank you — Hamza Khan, Jun 30 '20 at 11:39

score 8 · Answer 10 · answered Jul 15 '19 at 11:46

For anyone who like do things in XML, specially in case where you are using Navigation architecture component actions in order to navigate to dialogs

You can use:

<style name="DialogStyle" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">

    <!-- dialog_background is drawable shape with corner radius -->
    <item name="android:background">@drawable/dialog_background</item>

    <item name="android:windowBackground">@android:color/transparent</item>
</style>

score 7 · Answer 11 · edited Jun 13 '22 at 17:52

7

You can use the shape for the background as-

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent"/>
    <corners android:radius="10dp" />
    <padding android:left="10dp" android:right="10dp"/>
</shape>

Have a look on this for the details.

edited Jun 13 '22 at 17:52

Dan Is Fiddling By Firelight

5,981
17
77
128

answered Mar 09 '15 at 07:46

Sanjeet A

5,171
3
23
40

score 7 · Answer 12 · edited Aug 01 '19 at 10:15

simplest way is to use from

CardView and its card:cardCornerRadius

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:card="http://schemas.android.com/apk/res-auto"
 android:orientation="vertical"
 android:id="@+id/cardlist_item"
 android:layout_width="match_parent"
 android:layout_height="130dp"
 card:cardCornerRadius="40dp"
 android:layout_marginLeft="8dp"
 android:layout_marginRight="8dp"
 android:layout_marginTop="5dp"
 android:layout_marginBottom="5dp"
 android:background="@color/white">

  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="12sp"
    android:orientation="vertical"
    android:weightSum="1">
    </RelativeLayout>

</android.support.v7.widget.CardView>

And when you are creating your Dialog

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

this solution doesn't allow CardView elevation shadow to be fully displayed — laszlo, Jul 09 '19 at 09:43

score 5 · Answer 13 · answered Feb 03 '20 at 14:20

For API level >= 28 available attribute android:dialogCornerRadius . To support previous API versions need use

<style name="RoundedDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="android:windowBackground">@drawable/dialog_bg</item>
    </style>

where dialog_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape >
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item
        android:left="16dp"
        android:right="16dp">
        <shape>
            <solid
                android:color="@color/white"/>
            <corners
                android:radius="8dp" />

            <padding
                android:left="16dp"
                android:right="16dp" />
        </shape>
    </item>
</layer-list>

For what is the layer list / the transparent shape? – User Feb 20 '20 at 14:36 — User, Feb 20 '20 at 14:36

Ucdemir · Answer 14 · 2021-03-24T12:17:16.827

5

Here is a Basic Solution:

 <style name="Style_Dialog_Rounded_Corner" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="android:windowBackground">@drawable/dialog_rounded_corner</item>
        <item name="android:windowMinWidthMinor">85%</item>
    </style>

in Drawable create shape:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners android:radius="12dp" />
</shape>

Pass style in Builder Constructor

AlertDialog alert = new AlertDialog.Builder(MainActivity.this,R.style.Style_Dialog_Rounded_Corner).create();

edited Mar 24 '21 at 12:17

answered Mar 24 '21 at 12:04

Ucdemir

2,852
2
26
44

Other solutions use both "android:background" and "android:windowBackground", but the later is enough to achieve the same result, as it is proposed in this solution. Attribute "android:windowMinWidthMinor" is not mandatory, as it is inherited from the parent. – MatJB Apr 25 '22 at 21:01
In this solution the dialog buttons also become invisible (I think white). – mcy Jun 01 '22 at 08:03

laszlo · Answer 15 · 2019-07-09T10:14:19.237

Here is the complete solution if you want to control the corner radius of the dialog and preserve elevation shadow

Dialog:

class OptionsDialog: DialogFragment() {

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup, savedInstanceState: Bundle?): View {
    dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
    return inflater.inflate(R.layout.dialog_options, container)
}

}

dialog_options.xml layout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="40dp"
    app:cardElevation="20dp"
    app:cardCornerRadius="12dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        id="@+id/actual_content_goes_here"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>
</FrameLayout>

The key is to wrap the CardView with another ViewGroup (here FrameLayout) and set margins to create space for the elevation shadow.

score 3 · Answer 16 · answered Oct 31 '19 at 12:40

In Kotlin, I am using a class DoubleButtonDialog.Java with line window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT)) as important one

class DoubleButtonDialog(context: Context) : Dialog(context, R.style.DialogTheme) {

    private var cancelableDialog: Boolean = true
    private var titleDialog: String? = null
    private var messageDialog: String? = null
    private var leftButtonDialog: String = "Yes"
    //    private var rightButtonDialog: String? = null
    private var onClickListenerDialog: OnClickListener? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
        //requestWindowFeature(android.view.Window.FEATURE_NO_TITLE)
        setCancelable(cancelableDialog)
        setContentView(R.layout.dialog_double_button)
//        val btnNegative = findViewById<Button>(R.id.btnNegative)
//        btnNegative.visibility = View.GONE
//        if (rightButtonDialog != null) {
//            btnNegative.visibility = View.VISIBLE
//            btnNegative.text = rightButtonDialog
//            btnNegative.setOnClickListener {
//                dismiss()
//                onClickListenerDialog?.onClickCancel()
//            }
//        }
        val btnPositive = findViewById<Button>(R.id.btnPositive)
        btnPositive.text = leftButtonDialog
        btnPositive.setOnClickListener {
            onClickListenerDialog?.onClick()
            dismiss()
        }
        (findViewById<TextView>(R.id.title)).text = titleDialog
        (findViewById<TextView>(R.id.message)).text = messageDialog
        super.onCreate(savedInstanceState)
    }

    constructor(
        context: Context, cancelableDialog: Boolean, titleDialog: String?,
        messageDialog: String, leftButtonDialog: String, /*rightButtonDialog: String?,*/
        onClickListenerDialog: OnClickListener
    ) : this(context) {
        this.cancelableDialog = cancelableDialog
        this.titleDialog = titleDialog
        this.messageDialog = messageDialog
        this.leftButtonDialog = leftButtonDialog
//        this.rightButtonDialog = rightButtonDialog
        this.onClickListenerDialog = onClickListenerDialog
    }
}


interface OnClickListener {
    //    fun onClickCancel()
    fun onClick()
}

In layout, we can create a dialog_double_button.xml

    <?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="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="@dimen/dimen_10"
        android:background="@drawable/bg_double_button"
        android:orientation="vertical"
        android:padding="@dimen/dimen_5">

        <TextView
            android:id="@+id/title"
            style="@style/TextViewStyle"
            android:layout_gravity="center_horizontal"
            android:layout_margin="@dimen/dimen_10"
            android:fontFamily="@font/campton_semi_bold"
            android:textColor="@color/red_dark4"
            android:textSize="@dimen/text_size_24"
            tools:text="@string/dial" />

        <TextView
            android:id="@+id/message"
            style="@style/TextViewStyle"
            android:layout_gravity="center_horizontal"
            android:layout_margin="@dimen/dimen_10"
            android:gravity="center"
            android:textColor="@color/semi_gray_2"
            tools:text="@string/diling_police_number" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dimen_10"
            android:gravity="center"
        android:orientation="horizontal"
        android:padding="@dimen/dimen_5">

        <!--<Button
            android:id="@+id/btnNegative"
            style="@style/ButtonStyle"
            android:layout_width="0dp"
            android:layout_height="@dimen/dimen_40"
            android:layout_marginEnd="@dimen/dimen_10"
            android:layout_weight=".4"
            android:text="@string/cancel" />-->

        <Button
            android:id="@+id/btnPositive"
            style="@style/ButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/red_dark4"
            android:fontFamily="@font/campton_semi_bold"
            android:padding="@dimen/dimen_10"
            android:text="@string/proceed"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:textSize="@dimen/text_size_20" />
    </LinearLayout>
</LinearLayout>

then use drawable.xml as

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="@color/white"/>
    <corners
        android:radius="@dimen/dimen_10" />
    <padding
        android:left="@dimen/dimen_10"
        android:top="@dimen/dimen_10"
        android:right="@dimen/dimen_10"
        android:bottom="@dimen/dimen_10" />
</shape>

score 3 · Answer 17 · answered Dec 16 '20 at 21:52

Create a xml in drawable ,say customd.xml.

then set it at background in your custom Dialog layout xml:

android:background="@drawable/customd"

finally in the java part for custom Dialog class you need to do this:

public class Customdialoque extends DialogFragment {

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

    getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

    View view = inflater.inflate(R.layout.activity_customdialoque, container, false);

    return view;
}

score 0 · Answer 18 · answered Aug 27 '20 at 12:03

I implemented rounded dialog using CardView in the custom layout and setting its corner radius.

Here's my xml code.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bottomSheet"
android:layout_width="match_parent"
android:layout_margin="@dimen/padding_5dp"
app:cardCornerRadius="@dimen/dimen_20dp"
android:layout_height="wrap_content">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/main_gradient_bg"
    android:paddingBottom="32dp">

    <TextView
        android:id="@+id/subdomain_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/margin_32dp"
        android:layout_marginLeft="@dimen/margin_32dp"
        android:layout_marginTop="@dimen/margin_50dp"
        android:fontFamily="@font/nunito_sans"
        android:text="@string/enter_subdomain"
        android:textColor="@color/white"
        android:textSize="@dimen/size_18sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dimen_45dp"
        app:layout_constraintLeft_toRightOf="@id/subdomain_label"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_baseline_info_24" />

    <EditText
        android:id="@+id/subdomain_edit_text_bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/dimen_20dp"
        android:layout_marginLeft="@dimen/dimen_20dp"
        android:layout_marginEnd="@dimen/dimen_20dp"
        android:layout_marginRight="@dimen/dimen_20dp"
        android:textColor="@color/white"
        android:theme="@style/EditTextTheme"
        app:layout_constraintTop_toBottomOf="@id/subdomain_label" />

    <Button
        android:id="@+id/proceed_btn"
        android:layout_width="@dimen/dimen_150dp"
        android:layout_height="@dimen/margin_50dp"
        android:layout_marginTop="@dimen/margin_30dp"
        android:background="@drawable/primary_btn_bg"
        android:text="@string/proceed"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textSize="@dimen/size_18sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/subdomain_edit_text_bottom_sheet" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

After that, i called it in Kotlin as follows :-

    val builder = AlertDialog.Builder(mContext)
    val viewGroup: ViewGroup = findViewById(android.R.id.content)
    val dialogView: View = 
    LayoutInflater.from(mContext).inflate(R.layout.subdomain_bottom_sheet, 
    viewGroup, false)
    val alertDialog: AlertDialog = builder.create()
    alertDialog.setView(dialogView,0,0,0,0)
    alertDialog.show()
    val windowParam = WindowManager.LayoutParams()
    windowParam.copyFrom(alertDialog.window!!.attributes)
    windowParam.width = AppConstant.getDisplayMetricsWidth(mContext) - 100
    windowParam.height = WindowManager.LayoutParams.WRAP_CONTENT
    windowParam.gravity = Gravity.CENTER
    alertDialog.window!!.attributes = windowParam
    
   
    alertDialog.window!!.setBackgroundDrawable
    (ColorDrawable(Color.TRANSPARENT))

Where last line is very important. Missing that would cause a color(mostly white) to show behind the corners.

score 0 · Answer 19 · answered Aug 03 '22 at 19:29

The accepted answer did round the corners for me, but unless I switched to a Material design theme, making the window background transparent had no effect and I still saw a square, shadowed background of the dialog inside my rounded background. And I don't want to switch to a Material theme because that changes the functionality of date and time pickers.

Instead, I had to hide the backgrounds of several subviews of the dialog in order to see the rounded background. And after doing all that, it was easier just to add the rounded background in code, too. So here's a fully programmatic (no XML) solution. This is in the onStart method of my DialogFragment subclass:

// add rounded corners
val backgroundShape = GradientDrawable()
backgroundShape.cornerRadius = 10.0f
backgroundShape.setColor(Color.BLUE)
this.dialog.window?.decorView?.background = backgroundShape

// make the backgrounds of the dialog elements transparent so we can see the rounded corner background
val topPanelId = this.context.resources.getIdentifier("topPanel", "id", "android")
val topPanel = this.dialog.findViewById<View>(topPanelId)
topPanel?.setBackgroundColor(Color.TRANSPARENT)
val contentPanelId = this.context.resources.getIdentifier("contentPanel", "id", "android")
val contentPanel = this.dialog.findViewById<View>(contentPanelId)
contentPanel?.setBackgroundColor(Color.TRANSPARENT)
val customPanelId = this.context.resources.getIdentifier("customPanel", "id", "android")
val customPanel = this.dialog.findViewById<View>(customPanelId)
customPanel?.setBackgroundColor(Color.TRANSPARENT)
val buttonPanelId = this.context.resources.getIdentifier("buttonPanel", "id", "android")
val buttonPanel = this.dialog.findViewById<View>(buttonPanelId)
buttonPanel?.setBackgroundColor(Color.TRANSPARENT)

score 0 · Answer 20 · answered Aug 23 '22 at 10:26

Here is another way in kotlin:

val model = ShapeAppearanceModel()
                .toBuilder()
                .setAllCorners(CornerFamily.ROUNDED, 32.0f)
                .build()
val shape = MaterialShapeDrawable(model)
shape.fillColor = ContextCompat.getColorStateList(context, R.color.white)          
ViewCompat.setBackground(dialogContentView, shape)

And then change the dialog window

dialog?.window?.setBackgroundDrawableResource(android.R.color.transparent)

How to make custom dialog with rounded corners in android

20 Answers20

Linked

Related