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.
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
Before you call BottomSheetDialog.show(), you need to set set window flags and attributes.
And you will see the dialog outter background is blured.
Use BottomSheetDialogFragment and use these in the onViewCreated method: