Add fading effect in blurview top and remove flickering when view is passed through it.

[AasthaDoshi]

Can we apply gradient blur into this to such extent that it gives a shadow effect on the view which is passed through it from top? Also get rid of blurview flickering when view passed through it?

[Dimezis]

You should be able to do it with a custom BlurAlgorithm

[AasthaDoshi]

@Dimezis Do you have any example or idea to proceed with this? Actually what I want is that when any text or view passed through BlurView then it should show a shadowlayer on top. Just like attached image.

[Dimezis]

Subclass the BlurView and draw a transparent gradient mask in draw() to fade the top edge

[AasthaDoshi]

@Dimezis Are you aware about any library with this solution? I tried to apply outer blurmaskfilter but it did not work for me.

[Dimezis]

Are you aware about any library with this solution?

I'm not, but you don't necessarily need any additional libraries for this. Something like this will probably work https://stackoverflow.com/questions/50556388/how-to-make-a-transparent-alpha-gradient-mask-to-make-one-layer-fade-into-tran

[AasthaDoshi]

Thanks @Dimezis! Let me try this solution as well.

[AasthaDoshi]

Hi @Dimezis, Thanks for the hint again!

After applying some additional adjustments I was able to achieve desired result up to some extent. But one question though why does this blur view flickers when any item of recyclerview passed through it. When user scroll normally or fastly then no flickering is noticed but on slow scroll it is noticeable.

<FrameLayout
        android:id="@+id/clBlurRoot"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="@id/glBanner">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_menu_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/transparent"
            android:clipToPadding="false"
            android:overScrollMode="never"
            android:scrollbars="vertical"
            tools:itemCount="4"
            tools:listitem="@layout/item_navigation" />

        <com.klaraui.utilities.blur.FadingEdgeLayout
            android:id="@+id/fading_edge_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:fel_edge="top"
            app:fel_size_top="45dp"
            app:layout_constraintBottom_toBottomOf="parent">

            <com.klaraui.utilities.blur.BlurView
                android:id="@+id/blurView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toBottomOf="parent">

                                 <--Chid Content-->

             </com.klaraui.utilities.blur.BlurView>

        </com.klaraui.utilities.blur.FadingEdgeLayout>

    </FrameLayout>

 val radius = 5f
 val decorView = window.decorView
 val windowBackground = decorView.background
 binding.blurView.setupWith(binding.clBlurRoot as ViewGroup) // or RenderEffectBlur
.setFrameClearDrawable(windowBackground) // Optional
.setBlurRadius(radius)