Blur is not displaying properly

[Peterragheb]

I am using the blurview inside a framelayout and a progressbar on top of it. For some reason the green button behind the blurview is showing like that and there is a white distorted rectangle forming around the progress bar The radius I'm using is 20 (and the problem isn't affected by changing the radius.

[Dimezis]

Post your layout and what you're passing as a root view to the BlurView

[Peterragheb]

<layout 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">

    <data>

        <variable
            name="viewmodel"
            type="com.Views.Login.LoginViewModel" />
    </data>

    <FrameLayout
        android:id="@+id/fl_rootContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true"
        android:fitsSystemWindows="true"
        android:layoutDirection="rtl">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="0.07"
            android:scaleType="centerCrop"
            android:src="@drawable/pattern_5" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="0.5" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:scaleType="center"
                android:src="@drawable/logo_on_white_3" />

            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="0.25" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/sign_in_handler_activity_phone_image_view_margin_end"
                android:layout_marginEnd="@dimen/sign_in_handler_activity_mobile_text_field_edit_text_margin_start"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/iv_phone"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_gravity="center"
                    android:scaleType="center"
                    android:src="@drawable/phone" />

                <com.Utilities.Validation.ValidationEditText
                    android:id="@+id/et_phoneNumber"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/sign_in_handler_activity_mobile_text_field_edit_text_margin_end"
                    android:fontFamily="@font/font_cairo_regular"
                    android:gravity="start|center_vertical"
                    android:hint="@string/sign_in_handler_activity_mobile_text_field_edit_text_hint"
                    android:imeOptions="actionNext"
                    android:inputType="phone"
                    android:maxLines="1"
                    android:textAlignment="viewStart"
                    android:textColor="@color/sign_in_handler_activity_mobile_text_field_edit_text_text_color"
                    android:textColorHint="@color/default_hint"
                    android:textSize="@dimen/sign_in_handler_activity_mobile_text_field_edit_text_text_size" />

            </LinearLayout>

            <TextView
                android:id="@+id/tv_phoneNumberError"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="66dp"
                android:layout_marginEnd="@dimen/sign_in_handler_activity_mobile_text_field_edit_text_margin_start"
                android:text="@{viewmodel.errorPhoneNumber}"
                android:textColor="#ff0000" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/sign_in_handler_activity_phone_image_view_margin_end"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="@dimen/sign_in_handler_activity_mobile_text_field_edit_text_margin_start"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/iv_password"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_gravity="center"
                    android:scaleType="center"
                    android:src="@drawable/lock" />

                <com.Validation.ValidationEditText
                    android:id="@+id/et_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/sign_in_handler_activity_mobile_text_field_edit_text_margin_end"
                    android:fontFamily="@font/font_cairo_regular"
                    android:gravity="start|center_vertical"
                    android:hint="@string/sign_in_handler_activity_password_text_field_edit_text_hint"
                    android:imeOptions="actionDone"
                    android:inputType="textPassword"
                    android:maxLines="1"
                    android:textAlignment="viewStart"
                    android:textColor="@color/sign_in_handler_activity_password_text_field_edit_text_text_color"
                    android:textColorHint="@color/default_hint"
                    android:textSize="@dimen/sign_in_handler_activity_password_text_field_edit_text_text_size" />
            </LinearLayout>

            <TextView
                android:id="@+id/tv_passwordError"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="66dp"
                android:layout_marginEnd="@dimen/sign_in_handler_activity_mobile_text_field_edit_text_margin_start"
                android:text="@{viewmodel.errorPassword}"
                android:textColor="#ff0000" />

            <Button
                android:id="@+id/btn_login"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginStart="40dp"
                android:layout_marginTop="26dp"
                android:layout_marginEnd="40dp"
                android:background="@drawable/sign_in_handler_activity_sign_in_button_button_ripple"
                android:fontFamily="@font/font_cairo_bold"
                android:gravity="center"
                android:text="@string/sign_in_handler_activity_sign_in_button_button_text"
                android:textColor="@color/sign_in_handler_activity_sign_in_button_button_text_color"
                android:textSize="@dimen/sign_in_handler_activity_sign_in_button_button_text_size" />

            <LinearLayout
                android:id="@+id/ll_forgotPassword"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="26dp"
                android:background="?attr/selectableItemBackground"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/font_cairo_bold"
                    android:gravity="center"
                    android:text="@string/sign_in_handler_activity_forgot_password_button_button_text"
                    android:textColor="@color/sign_in_handler_activity_forgot_password_button_button_text_color"
                    android:textSize="@dimen/sign_in_handler_activity_forgot_password_button_button_text_size" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/colorAccent" />
            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />

            <Button
                android:id="@+id/btn_signUp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginStart="40dp"
                android:layout_marginEnd="40dp"
                android:layout_marginBottom="@dimen/sign_in_handler_activity_new_account_button_button_margin_bottom"
                android:background="@drawable/sign_in_handler_activity_new_account_button_button_ripple"
                android:fontFamily="@font/font_cairo_bold"
                android:gravity="center"
                android:text="@string/sign_in_handler_activity_new_account_button_button_text"
                android:textColor="@color/sign_in_handler_activity_new_account_button_button_text_color"
                android:textSize="@dimen/sign_in_handler_activity_new_account_button_button_text_size" />

        </LinearLayout>

        <View
            android:id="@+id/v_blurBackground"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#CCffffff"
            android:visibility="invisible" />

        <include
            android:id="@+id/layout_progress" layout="@layout/layout_progress_bar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </FrameLayout>

</layout>

layout_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data/>
    <FrameLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <eightbitlab.com.blurview.BlurView
            android:id="@+id/bv_blur"
            android:clickable="false"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <LinearLayout
            android:id="@+id/ll_progressBar"
            android:visibility="gone"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <ProgressBar
                android:id="@+id/pb_loading"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:visibility="invisible"
                android:background="@null"/>
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1.25"/>
        </LinearLayout>
    </FrameLayout>
</layout>

View decorView = activity.getWindow().getDecorView();
            ViewGroup rootView = (ViewGroup) viewGroup;
            Drawable windowBackground = decorView.getBackground();
            bvBlur.setupWith(rootView)
                    .setFrameClearDrawable(windowBackground)
                    .setBlurAlgorithm(new RenderScriptBlur(activity))
                    .setBlurRadius(radius)
                    .setHasFixedTransformationMatrix(false);
            bvBlur.setClickable(true);
            bvBlur.setVisibility(View.VISIBLE);

I am passing fl_rootContainer as the viewgroup (root view)

[Dimezis]

Can you post the screenshot with BlurView disabled? And another with blur radius = 1

[Peterragheb]

Here are the screenshots you asked for and sorry for the late reply.

[Dimezis]

Can you please also show me the sign_in_handler_activity_new_account_button_button_ripple?

[Peterragheb]

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/click_overlay">

    <item
        android:id="@android:id/mask"
        android:drawable="@drawable/sign_in_handler_activity_new_account_button_button_background"/>

    <item android:drawable="@drawable/sign_in_handler_activity_new_account_button_button_background"/>
</ripple>

sign_in_handler_activity_new_account_button_button_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke
        android:color="@color/sign_in_handler_activity_new_account_button_button_border_color"
        android:width="@dimen/sign_in_handler_activity_new_account_button_button_border_size"/>

    <corners android:radius="@dimen/sign_in_handler_activity_new_account_button_button_radius"/>
</shape>

sign_in_handler_activity_new_account_button_button_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke
        android:color="@color/sign_in_handler_activity_new_account_button_button_border_color"
        android:width="@dimen/sign_in_handler_activity_new_account_button_button_border_size"/>

    <corners android:radius="@dimen/sign_in_handler_activity_new_account_button_button_radius"/>
</shape>

I also apply animation to the button onclick

 public static void startAnimationOne(View view) {

        Keyframe kf1 = Keyframe.ofFloat(0.0f, 0.3f);
        Keyframe kf2 = Keyframe.ofFloat(0.2f, 1.1f);
        Keyframe kf3 = Keyframe.ofFloat(0.4f, 0.9f);
        Keyframe kf4 = Keyframe.ofFloat(0.6f, 1.03f);
        Keyframe kf5 = Keyframe.ofFloat(0.8f, 0.97f);
        Keyframe kf6 = Keyframe.ofFloat(1.0f, 1f);

        PropertyValuesHolder pvh1 = PropertyValuesHolder.ofKeyframe(View.SCALE_X, kf1, kf2, kf3, kf4, kf5, kf6);
        PropertyValuesHolder pvh2 = PropertyValuesHolder.ofKeyframe(View.SCALE_Y, kf1, kf2, kf3, kf4, kf5, kf6);

        Animator animator1 = ObjectAnimator.ofPropertyValuesHolder(view, pvh1, pvh2);
        animator1.setDuration(1000);
        animator1.setInterpolator(PathInterpolatorCompat.create(0.22f, 0.61f, 0.36f, 1f));

        Keyframe kf7 = Keyframe.ofFloat(0.0f, 0f);
        Keyframe kf8 = Keyframe.ofFloat(0.6f, 1f);
        Keyframe kf9 = Keyframe.ofFloat(1.0f, 1f);

        PropertyValuesHolder pvh3 = PropertyValuesHolder.ofKeyframe(View.ALPHA, kf7, kf8, kf9);

        Animator animator2 = ObjectAnimator.ofPropertyValuesHolder(view, pvh3);
        animator2.setDuration(1000);
        animator2.setInterpolator(PathInterpolatorCompat.create(0.22f, 0.61f, 0.36f, 1f));

        AnimatorSet set1 = new AnimatorSet();
        set1.playTogether(animator1, animator2);
        set1.setTarget(view);
        AnimatorSet set2 = new AnimatorSet();
        set2.playTogether(set1);
        set2.start();
    }

[Dimezis]

My apologies, I meant sign_in_handler_activity_sign_in_button_button_ripple. Basically the drawable of that green button. The reason I'm asking is because I believe it has a drawable that is not rendering properly in a software (non-hardware accelerated) mode, which the BlurView uses. So I'd like to see how exactly it looks like and potentially suggest a fix

[Peterragheb]

sign_in_handler_activity_sign_in_button_button_ripple.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/click_overlay">

    <item
        android:id="@android:id/mask"
        android:drawable="@drawable/sign_in_handler_activity_sign_in_button_button_background"/>

    <item android:drawable="@drawable/sign_in_handler_activity_sign_in_button_button_background"/>
</ripple>

sign_in_handler_activity_sign_in_button_button_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="@dimen/sign_in_handler_activity_sign_in_button_button_radius"/>

    <solid android:color="@color/sign_in_handler_activity_sign_in_button_button_background_color"/>
</shape>

[Dimezis]

Does it happen only with this animation on button click?

[Peterragheb]

Yes. But it also creates a square white box around the progress bar if it kept spinning for a long time like 10 seconds. Also if I use it as a fragment background and add views on top of it it makes shadows around these views.

[Dimezis]

Is it still happening if you remove .setFrameClearDrawable(windowBackground)?

[Peterragheb]

Yes it is.

[abiistar]

well?...this is my issues to...when i called blurview in listener...then My blur layout gets bigger than real size

[Henryyyyyyy]

When the bottom layer is moving(such as RecyclerView scrolling,ViewPager animating),the weird square occur. RealtimeBlurView perform the same issue as yours

[Dimezis]

Folks, to start debugging things like that, I would need an example project. I can't help just by looking at a screenshot. Most likely though those views don't render themselves properly in software mode, so it's probably not fixable with the current API