Android12 pop-up window external and internal Gaussian blur effect implementation

Table of contents

1. Implementation of Gaussian blur effect inside the pop-up window:

2. Implementation of Gaussian blur effect outside the pop-up window:

3. Gaussian blur effect is provided both inside and outside the pop-up window:

---

1. Implementation of Gaussian blur effect inside the pop-up window:

Effect:

Just declare the Gaussian blur properties in style:

<!--高斯模糊Dialog-->
<style name="BlurDialogTheme" parent="Theme.MaterialComponents.Dialog">
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@drawable/dialog_bg</item>
    <item name="android:windowBackgroundBlurRadius" tools:ignore="NewApi">30dp</item>
</style>

backgroundDimEnabled is whether the dark color in the pop-up window is enabled. You can set it according to the actual situation.

dialog_bg.xml can declare the radius and background darkness:

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

Used in dialog:

new AlertDialog.Builder(this, R.style.BlurDialogTheme)

2. Implementation of Gaussian blur effect outside the pop-up window:

Realization effect:

Option One:

Android12 has a new Gaussian blur API:

In Android 12, it is easier to apply common graphics effects to View. The setRenderEffect interface is added to View:

public void setRenderEffect(@Nullable RenderEffect renderEffect) {
        ...
}

accomplish:

So we use this API to implement:

View decorView = getWindow().getDecorView();
decorView.setRenderEffect(RenderEffect.createBlurEffect(25F, 25F, Shader.TileMode.CLAMP));
Dialog dialog = new AlertDialog.Builder(this)
                    .setTitle("test dialog")
                    .setMessage("this is message!")
                    .setPositiveButton("关闭",null)
                    .create();
dialog.setOnDismissListener(dialog1 -> {
         decorView.setRenderEffect(null);
});
dialog.show();

If it is not Android 12, it can also be implemented. You need to have the outermost view. Get the Gaussian blur of the content displayed on the current interface and set it to the outer view as the background. This article will not go into details.

In fact, style also provides us with Gaussian blur attributes outside the pop-up window, which does not require code to dynamically set:

Option II:

Statement in style:

    <!--高斯模糊Dialog-->
    <style name="BlurDialogTheme" parent="Theme.MaterialComponents.Dialog">
        <item name="android:windowBlurBehindEnabled" tools:ignore="NewApi">true</item>
        <item name="android:windowBlurBehindRadius" tools:ignore="NewApi">10dp</item>
    </style>

Then use it in the dialog:

new AlertDialog.Builder(this, R.style.BlurDialogTheme)

There is one difference between the two methods. After using style setting, if the background is dynamic, the blur effect will still exist, while using setRenderEffect, the blur effect will disappear.

3. Gaussian blur effect is provided both inside and outside the pop-up window:

Effect:

dialog_bg.xml: left #2f000000, right #2fffffff

 accomplish:

It is a combination of the above two situations. If you are lazy, just use style:

   <!--高斯模糊Dialog-->
    <style name="BlurDialogTheme" parent="Theme.MaterialComponents.Dialog">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@drawable/dialog_bg</item>
        <item name="android:windowBlurBehindEnabled" tools:ignore="NewApi">true</item>
        <item name="android:windowBlurBehindRadius" tools:ignore="NewApi">10dp</item>
        <item name="android:windowBackgroundBlurRadius" tools:ignore="NewApi">30dp</item>
    </style>