How can I change default black dim background "color" (not the amount of dim) of Dialog?

Question

enter image description here

(This is a random image of showing a Dialog found on the Internet.)

I've been implementing a custom Dialog. I could handle almost everything on the dialog except for that default black dim background under the dialog itself, but over the entire screen behind it. Basically I want to change its color and alpha value.

I've been wandering through StackOverflow but only answers I found were about changing background of Dialog itself. In any case if you need it, here's my simple codes.

CustomDialog.java

public class HTDialog extends Dialog{

    public HTDialog(Context context, boolean cancelable, OnCancelListener cancelListener) {
        super(context, cancelable, cancelListener);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setCanceledOnTouchOutside(true);
        setContentView(R.layout.custom_dialog);
    }
}

custom_dialog.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dialog_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="280dp"
    android:background="@drawable/bg_popup"
    android:paddingTop="20dp">

    <ImageView
        android:id="@+id/dialog_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/icon" />

</RelativeLayout>

try dialog.getWindow().setBackgroundDrawableResource(R.drawable.yourdrawable); — Harry's Lab, Mar 24 '15 at 07:38
possible duplicate of [Custom screen dim with Dialog](http://stackoverflow.com/questions/6257332/custom-screen-dim-with-dialog) — , Mar 24 '15 at 07:45
@Harry That's not solving my problem because I already have `background` in my `custom_dialog.xml`, which has exactly the same effect. — Lee Han Kyeol, Mar 24 '15 at 07:52
@yushi That post deals with the same aspect but is there any way to change the color, not the amount of dim? — Lee Han Kyeol, Mar 24 '15 at 07:53
set getWindow().setBackgroundDrawableResource(R.drawable.yourdrawable); will solve the issue.try this please — Karthika PB, Mar 24 '15 at 10:00

score 33 · Accepted Answer · answered Apr 07 '15 at 01:26

This is a workaround but it's not really a pure solution because background touch is disabled and should be configured manually.

First, set custom dialog theme like this.

styles.xml

<style name="CustomDialogTheme" parent="android:Theme.Dialog">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

Setting windowIsFloating to false forces Dialog view to be expanded to full screen. Setting windowBackground to transparent removes default black dim background under Dialog. windowNoTitle option gets rid of the upper title bar.

CustomDialog.java

Apply the theme and construct your custom_dialog view as follows.

public HTCustomDialog(Context context) {
    super(context, R.style.CustomDialogTheme);
    setContentView(R.layout.custom_dialog);
}

custom_dialog.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/main_solid_80">

    <RelativeLayout
        android:id="@+id/dialog_root"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:background="@drawable/bg_popup"
        android:padding="16dp">

</RelativeLayout>

Now that CustomDialog view is a full-screen view, set background of your root layout to whatever color you'd like.

Sample result

I mosaiced the result a bit.

Result

score 4 · Answer 2 · answered Mar 24 '15 at 07:37

4

use custom style.

<style name="transparent_dialog_borderless" parent="android:Theme.Dialog">
    <item name="android:windowFrame">@null</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:background">#FF333333</item>
    <item name="android:windowBackground">@null</item>
    <item name="android:backgroundDimEnabled">true</item>
</style>

android:backgroundDimEnabled:control the black dim background

answered Mar 24 '15 at 07:37

howerknea

355
3
12

4

I tried `background`, which changes the "inside" background of `Dialog`. I tried `windowBackground`, which changes the "outside" background of `Dialog`, which changes the color only within the size of `Dialog`. Could you let me know the item name which deals with the color of `backgroundDim`? – Lee Han Kyeol Mar 24 '15 at 07:55

score 1 · Answer 3 · answered Mar 24 '15 at 08:05

1

Try to set the style for your dialog windows,

Example:

Dialog dialog = new Dialog(context,android.R.style.Theme_Translucent_NoTitleBar);

answered Mar 24 '15 at 08:05

Srinivasan

4,211
3
25
35

score 0 · Answer 4 · edited Apr 08 '19 at 09:31

0

try the code,

View checkBoxView = View.inflate(context, R.layout.alertbox, null);



    final AlertDialog.Builder builder = new AlertDialog.Builder(context);

             builder.setView(checkBoxView);
             builder.setCancelable(false);
                Dialog d = builder.create();

                d.getWindow().setBackgroundDrawable(new ColorDrawable(0));
                d.setView(checkBoxView, 0, 0, 0, 0);
                d.show();

nb: the line d.setView(checkBoxView, 0, 0, 0, 0); will make it...

edited Apr 08 '19 at 09:31

Papps

174
1
18

answered Mar 24 '15 at 07:39

Karthika PB

1,363
9
16

What is `d` in the answer? – Lee Han Kyeol Apr 07 '15 at 00:56

score 0 · Answer 5 · answered Feb 02 '18 at 14:12

This worked for me:

val dialog = AlertDialog.Builder(context)
                .setView(view)
                .setCancelable(true)
                .setPositiveButton(R.string.done_label, { dialog, _ -> dialog.dismiss() })
                .create()
        dialog.window.setDimAmount(0f)
        dialog.show()

dialog.window.setDimAmount(0f) is the key.

score 0 · Answer 6 · answered Mar 22 '19 at 13:36

The following custom DatePickerDoalog class not only makes dim color customizable but also it makes dim appearing animated

/**
 * @author Taras Yurkiv @Devlight
 */
public class DatePickerDialogCustomDim extends DatePickerDialog {

    private final long animDuration = 100;
    private float dimAmount = 0.7f;

    private Drawable dimDrawable;
    private ViewGroup root;

    private OnDismissListener outsideDismissListener;

    private final OnDismissListener dismissListener = new OnDismissListener() {

        @Override
        public void onDismiss(DialogInterface dialog) {
            final ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(dimDrawable,
                    PropertyValuesHolder.ofInt("alpha", (int) (255 * dimAmount), 0));
            animator.setTarget(dimDrawable);
            animator.setDuration(animDuration);
            animator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    ViewGroupOverlay overlay = root.getOverlay();
                    overlay.remove(dimDrawable);
                }
            });
            animator.start();
            if (outsideDismissListener != null)
                outsideDismissListener.onDismiss(dialog);
        }
    };


    @TargetApi(Build.VERSION_CODES.N)
    public DatePickerDialogCustomDim(@NonNull Context context) {
        this(context, 0);
    }

    @TargetApi(Build.VERSION_CODES.N)
    public DatePickerDialogCustomDim(@NonNull Context context, @StyleRes int themeResId) {
        this(context, themeResId, null, -1, -1, -1);
        init(context);
    }

    public DatePickerDialogCustomDim(@NonNull Context context,
                                     @Nullable OnDateSetListener listener,
                                     int year,
                                     int month,
                                     int dayOfMonth) {
        this(context, 0, listener, year, month, dayOfMonth);
    }

    public DatePickerDialogCustomDim(@NonNull Context context,
                                     @StyleRes int themeResId,
                                     @Nullable OnDateSetListener listener,
                                     int year,
                                     int monthOfYear,
                                     int dayOfMonth) {
        super(context, themeResId, listener, year, monthOfYear, dayOfMonth);
        init(context);
    }

    private void init(Context context) {
        root = ((Activity) context).getWindow().getDecorView().findViewById(android.R.id.content);
        super.setOnDismissListener(dismissListener);
    }

    public void setDimAmount(@FloatRange(from = 0, to = 1f) float dim) {
        dimAmount = dim;
    }

    @Override
    public void show() {
        super.show();
        dimDrawable = new ColorDrawable(Color.WHITE); // a dim color
        dimDrawable.setBounds(0, 0, root.getWidth(), root.getHeight());

        ViewGroupOverlay overlay = root.getOverlay();
        overlay.add(dimDrawable);

        ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(dimDrawable,
                PropertyValuesHolder.ofInt("alpha", 0, (int) (255 * dimAmount)));
        animator.setTarget(dimDrawable);
        animator.setDuration(animDuration);
        animator.start();
    }

    @Override
    public void setOnDismissListener(@Nullable OnDismissListener listener) {
        outsideDismissListener = listener;
    }
}

it works in conjunction of a style

<style name="DatePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@color/accent</item>
    <item name="android:textColorLink">@color/primary</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>

score 0 · Answer 7 · answered Dec 16 '21 at 11:20

set a float value for backgroundDimAmount between 0-1 (it is a float value)

    <style name="DarkTransparentBgDialog" parent="@android:style/Theme.Dialog">
       <item name="android:backgroundDimEnabled">true</item>
       <item name="android:backgroundDimAmount">0.87</item>
    </style>

in DialogFragment (in Kotlin)

override fun getTheme() = R.style.DarkTransparentBgDialog

How can I change default black dim background "color" (not the amount of dim) of Dialog?

CustomDialog.java

custom_dialog.xml

7 Answers7

styles.xml

CustomDialog.java

custom_dialog.xml

Sample result

Linked