Luis Luis - 6 months ago 387
Android Question

Dim and Blur Background Behind Fragment Android

So I have a custom "dialog" of sorts, it's really just a fragment inside a framelayout.
Anyway, I want it to blur and dim the anything that is behind it once its displayed.
I am currently using this, inside the onCreateView

// Dim and blur background
getActivity().getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
getActivity().getWindow().addFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND);


However, this is not blurring or dimming the other framelayout which contains a RecyclerView and a CardView, these elements are still being shown in full opacity, not sure why?

Here is a screeshot, as you can see the background gets blurred but not all the views behind the fragment get dimmed

enter image description here

I'd like to be able to achieve the look that NavigationDrawer has when you open it, here is an example inside the same app and everything is being dimmed and blurred correctly.

enter image description here

Here is my XML file incase it helps,

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".controllers.MainActivity"
android:id="@+id/app_bar_main_layout">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

// This is the framelayout for a fragment
// The fragment contains a RecyclerView and a CardView
// This is what I would like to be dimmed.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/frame_layout_container"
android:background="@color/colorCardDisplayBackground"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</FrameLayout>


// This is my custom "Dialog" fragment
<FrameLayout
android:elevation="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="@+id/card_fragment_container">

<ImageButton
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:layout_gravity="bottom|end"
android:layout_marginRight="15dp"
android:background="@drawable/round_button_background"
android:elevation="8dp"
android:src="@drawable/ic_done_white_24dp"
android:scaleType="center"
android:visibility="gone"
android:id="@+id/final_confirm_card_button"/>
</FrameLayout>

<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:id="@+id/mainFab"
android:layout_height="wrap_content"
fab:fab_icon="@drawable/ic_add_white_48dp"
fab:fab_colorNormal="@color/colorAccent"
fab:fab_colorPressed="@color/colorAccentLight"
android:layout_gravity="bottom|end" />



Answer

As stated in the comment the FLAG_BLUR_BEHIND was not working with the frame layout I was using.

I instead decided to just change the foreground of the parent

// Dim the background // Where mainFrameLayout is as FrameLayout mainFrameLayout.getForeground().setAlpha(220);

And when you would like to remove the "dim" effect

// Remove dim background color mainFrameLayout.getForeground().setAlpha(0);

Comments