Open AasthaDoshi opened 4 months ago
You should be able to do it with a custom BlurAlgorithm
@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.
Subclass the BlurView and draw a transparent gradient mask in draw() to fade the top edge
@Dimezis Are you aware about any library with this solution? I tried to apply outer blurmaskfilter but it did not work for me.
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
Thanks @Dimezis! Let me try this solution as well.
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)
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?