search

Dimezis / BlurView

Dynamic iOS-like blur of underlying Views for Android
Apache License 2.0
3.49k stars 331 forks source link

BlurView is not blurring well enough text and some images #219

Open hmmmk opened 4 weeks ago

hmmmk commented 4 weeks ago

1) Lib version 2.0.5 2) Pixel 7 Pro, Android 14

So the issue is that somehow BlurView is not blurring properly some TextViews and images (ImageView). And I can not understand how to fix this. You can see that in the attached screenshot. As for the types of elements it's just TextView and ImagView, but the BottomNavigationView also contains lotties in some of the buttons and the background of it is ShapeDrawable.

I tried to look over the docs of the lib and samples and tried to use setFrameClearDrawable() with background of parentFragment rootView, but this didn't change nothing. Can you tell me what am I doing wrong and is there any way for fixing this?

2024-08-14 17 26 50

Dimezis commented 4 weeks ago

What content root do you pass to the BlurView? Does the same happen if you pass the activity's window decorView?

hmmmk commented 4 weeks ago

What content root do you pass to the BlurView? Does the same happen if you pass the activity's window decorView?

I'm doing it like this

val fragment = requireParentFragment() val rootView = fragment.requireView() as ViewGroup

And I'm doing it in BottomSheetDialogFragment. So basically rootView of a parent fragment. I didn't try it with activity's decorView

hmmmk commented 4 weeks ago

@Dimezis just tried to use fragment.window.decorView.findViewById<ViewGroup>(android.R.id.content) as root view, same thing

Dimezis commented 4 weeks ago

What's the size and position of the BlurView? Can you verify it's where it's supposed to be in the Layout Inspector? Do you animate BlurView's position or its parent? If so, how?

hmmmk commented 4 weeks ago

@Dimezis okay, I think it will be better to share an xml file with you

` <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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" android:layout_width="match_parent" android:layout_height="match_parent" tools:background="@color/gray_tem_text">

<eightbitlab.com.blurview.BlurView
    android:id="@+id/bgView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/bg_rounded_top_rectangle"
    app:blurOverlayColor="#CC000000"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <eightbitlab.com.blurview.BlurView
            android:id="@+id/blurClose"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="8dp"
            android:background="@drawable/oval_shape"
            app:blurOverlayColor="#CC000000"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/closeIv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:src="@drawable/ic_close" />
        </eightbitlab.com.blurview.BlurView>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/firstOptionCl"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="56dp"
            android:layout_marginEnd="6dp"
            android:background="@drawable/bg_rounded_rectangle"
            android:clickable="true"
            android:focusable="true"
            app:layout_constraintBottom_toTopOf="@+id/thirdOptionCl"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@id/multiplePurchaseCl"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/coinAnimatedIv">

            <ImageView
                android:id="@+id/firstOptionIv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="22dp"
                android:src="@drawable/ic_coin_first_option"
                app:layout_constraintBottom_toTopOf="@+id/firstOptionPriceTv"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_chainStyle="packed" />

            <TextView
                android:id="@+id/firstOptionPriceTv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="21dp"
                android:fontFamily="@font/gilroy_extrabold"
                android:text="100 000"
                android:textColor="#FDC903"
                android:textSize="20sp"
                app:layout_constraintBottom_toTopOf="@+id/firstOptionBtn"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/firstOptionIv" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/firstOptionBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:layout_marginBottom="16dp"
                android:backgroundTint="#FDC903"
                android:fontFamily="@font/gilroy_extrabold"
                android:text="1 999 ₽"
                android:textColor="@color/black"
                app:cornerRadius="12dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/firstOptionPriceTv" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/multiplePurchaseCl"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="16dp"
            android:background="@drawable/bg_rounded_rectangle"
            android:clickable="true"
            android:focusable="true"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/firstOptionCl"
            app:layout_constraintTop_toTopOf="@id/firstOptionCl">

            <ImageView
                android:id="@+id/secondOptionIv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="22dp"
                app:layout_constraintBottom_toTopOf="@+id/secondOptionPriceTv"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_chainStyle="packed"
                android:src="@drawable/ic_coin_first_option" />

            <TextView
                android:id="@+id/secondOptionPriceTv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="21dp"
                android:fontFamily="@font/gilroy_extrabold"
                android:text="200 000"
                android:textColor="#FDC903"
                android:textSize="20sp"
                app:layout_constraintBottom_toTopOf="@+id/secondOptionBtn"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/secondOptionIv" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/secondOptionBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:layout_marginBottom="16dp"
                android:backgroundTint="#FDC903"
                android:fontFamily="@font/gilroy_extrabold"
                android:text="4 999 ₽"
                android:textColor="@color/black"
                app:cornerRadius="12dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/secondOptionPriceTv" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/thirdOptionCl"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="6dp"
            android:background="@drawable/bg_rounded_rectangle"
            android:clickable="true"
            android:focusable="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@id/fourthOptionCl"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/firstOptionCl">

            <ImageView
                android:id="@+id/thirdOptionIv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="22dp"
                android:src="@drawable/ic_coin_third_option"
                app:layout_constraintBottom_toTopOf="@+id/thirdOptionPriceTv"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_chainStyle="packed" />

            <TextView
                android:id="@+id/thirdOptionPriceTv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="21dp"
                android:fontFamily="@font/gilroy_extrabold"
                android:text="300 000"
                android:textColor="#FDC903"
                android:textSize="20sp"
                app:layout_constraintBottom_toTopOf="@+id/thirdOptionBtn"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/thirdOptionIv" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/thirdOptionBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:layout_marginBottom="16dp"
                android:backgroundTint="#FDC903"
                android:fontFamily="@font/gilroy_extrabold"
                android:text="10 999 ₽"
                android:textColor="@color/black"
                app:cornerRadius="12dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/thirdOptionPriceTv" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/fourthOptionCl"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="16dp"
            android:background="@drawable/bg_rounded_rectangle"
            android:clickable="true"
            android:focusable="true"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/thirdOptionCl"
            app:layout_constraintTop_toTopOf="@id/thirdOptionCl">

            <ImageView
                android:id="@+id/fourthOptionIv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="22dp"
                app:layout_constraintBottom_toTopOf="@+id/fourthOptionPriceTv"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_chainStyle="packed"
                android:src="@drawable/ic_coin_fourth_option" />

            <TextView
                android:id="@+id/fourthOptionPriceTv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="21dp"
                android:fontFamily="@font/gilroy_extrabold"
                android:text="500 000"
                android:textColor="#FDC903"
                android:textSize="20sp"
                app:layout_constraintBottom_toTopOf="@+id/fourthOptionBtn"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/fourthOptionIv" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/fourthOptionBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:layout_marginBottom="16dp"
                android:backgroundTint="#FDC903"
                android:fontFamily="@font/gilroy_extrabold"
                android:text="15 999 ₽"
                android:textColor="@color/black"
                app:cornerRadius="12dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/fourthOptionPriceTv" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <ImageView
            android:id="@+id/coinAnimatedIv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toTopOf="@+id/firstOptionCl"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed"
            tools:srcCompat="@tools:sample/avatars" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</eightbitlab.com.blurview.BlurView>

</androidx.constraintlayout.widget.ConstraintLayout>`

This is the layout. And if you ask about animations - no. At least I'm not doing it manually. I mean the dialog itself is being animated when dragging, but it's controlled by BottomSheetDialogFragment, not my code.

Dimezis commented 4 weeks ago

Don't know how to help you.

Judging by the screenshot, the blur probably didn't get updated when you dragged the sheet.

hmmmk commented 4 weeks ago

Don't know how to help you.

Judging by the screenshot, the blur probably didn't get updated when you dragged the sheet.

  • Make sure you're using 2.0.5, since I saw you're declaring the same dependency twice in your build.gradle
  • Pass the topmost Activity root (activity.window.decorView)
  • Try debugging blur updates when dragging the sheet and see if updateBlur gets called.

I don't think that's the issue because it is blurring image in the middle of the screen. But the top part and the bottom part is not blurred

hmmmk commented 4 weeks ago

The thing is that I noticed this issue not only in this case. Some time ago, I tried to put blur in the background of BottomNavigationView with a RecyclerView underneath it, and there were the same issue: some TextView's and ImageView's were not blurred at all

Dimezis commented 4 weeks ago

But the top part and the bottom part is not blurred

The bottom part is not blurred because once again, you're passing the root that doesn't include the bottom bar.

In any case, I can't help you without a repro sample

hmmmk commented 4 weeks ago

But the top part and the bottom part is not blurred

The bottom part is not blurred because once again, you're passing the root that doesn't include the bottom bar.

In any case, I can't help you without a repro sample

Can you look into it, if I share access to the sample project?

Dimezis commented 4 weeks ago

Sure