skip to Main Content

I’m trying to blur a bottomsheet by using the new Android 12 RenderEffect API.

However until now I can get the blur effect on the whole view, making the texts unreadable.

Problem in screenshot

Now, here’s my bottom sheet layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:orientation="vertical">

<Space
    android:layout_width="1dp"
    android:layout_height="6dp"/>

<View
    android:id="@+id/smallButtonRect"
    android:layout_width="24dp"
    android:layout_height="4dp"
    android:layout_gravity="center"
    android:background="@drawable/bg_bottom_line"/>

<Space
    android:layout_width="1dp"
    android:layout_height="14dp"/>

<!-- navigation header layout -->
<RelativeLayout
    android:id="@+id/header_layout"
    android:layout_width="match_parent"
    android:paddingBottom="10dp"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="22sp"
        android:text="@string/data_saver_title"
        android:fontFamily="@font/manrope"
        android:textColor="@color/colorTextPrimary" />

</RelativeLayout>

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:paddingStart="20dp"
    android:paddingEnd="20dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:layout_gravity="center">

    <TextView
        android:id="@+id/subtitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="15sp"
        android:fontFamily="@font/manrope"
        android:text="@string/data_saver_description"
        android:textColor="@color/colorTextSecondary" />

</LinearLayout>

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:paddingStart="20dp"
    android:paddingEnd="20dp"
    android:paddingBottom="@dimen/card_padding">

    <com.google.android.material.button.MaterialButton
        android:id="@+id/data_saver_enabled"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@android:color/transparent"
        android:fontFamily="@font/manrope"
        android:stateListAnimator="@null"
        app:icon="@drawable/ic_data_on"
        android:text="@string/data_saver_enabled"
        android:textAllCaps="false"
        app:cornerRadius="@dimen/button_round" />

</LinearLayout>

While this is how I create the bottom sheet:

    final View bottomNav = getLayoutInflater().inflate(R.layout.bottom_sheet_data_saver,null);

    bottomSheetData = new BottomSheetDialog(MainActivity.this, R.style.BottomSheetDialogTheme);

    bottomSheetData.setContentView(bottomNav);

    bottomSheetData.setCancelable(true);
    bottomSheetData.show();

And here how I apply the blur with the new API:

    ((View) bottomNav.getParent()).setRenderEffect(RenderEffect.createBlurEffect(10f, 10f, Shader.TileMode.CLAMP));

What am I doing wrong? How can I do to be able to apply the blur only in the background thus making the bottom sheet blurry to the lower overlay contents?

Update: as suggested by an user i have tried this. I’m not getting blur on the bottom sheet.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
        bottomSheetData.getWindow().addFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND);
        bottomSheetData.getWindow().getAttributes().setBlurBehindRadius(10);
    }

2

Answers


  1. Before you call BottomSheetDialog.show(), you need to set set window flags and attributes.

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
        dialog.window!!.addFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND)
        dialog.window!!.attributes.blurBehindRadius = blurRadius
    }
    

    And you will see the dialog outter background is blured.

    Login or Signup to reply.
  2. Use BottomSheetDialogFragment and use these in the onViewCreated method:

    Window window = getDialog().getWindow();
             window.addFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND);
             window.getAttributes().setBlurBehindRadius(10);
             window.setAttributes(window.getAttributes()); 
    

    image

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search