Blur and Unblur images in collapsing Toolbar

Question

In my CountryImageInfo.java I have a collapsing toolbar with an image inside. This is what it looks like:

I want to know how to blur the image as it collapses and how to unblur has it comes down again. Similar to the notification bar of iOS, I don't know if you're familiarized with it... I've seen questions similar to this but the difference was, some were asking how to blur when it is collapsed (not what I'm asking. I'm asking as it collapses. A gradual blur)...

This is my XML, by the way, everything is wrapped up in a CoordinatorLayout:

<android.support.design.widget.AppBarLayout
    android:id="@+id/testeparainfo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/actionBarDivider">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/backgroundcollapsedtoolbarinfo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="exitUntilCollapsed|scroll">


        <ImageView
            android:id="@+id/imgCountryInfoFoto"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop" />

        <ImageView
            android:id="@+id/imgCountryInfoEscuro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:background="@drawable/background_pais_info"
            android:scaleType="centerInside" />


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbaridinfo"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        </android.support.v7.widget.Toolbar>

        <TextView
            android:id="@+id/txtNomePaisInfo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginStart="30dp"
            android:layout_marginTop="520dp"
            android:paddingBottom="10dp"
            android:text="TextView"
            android:textColor="@android:color/background_light"
            android:textSize="35sp"
            app:layout_anchor="@+id/testeparainfo"
            app:layout_anchorGravity="left|bottom" />


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

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

Update:

Duplicate the image isn't really what I want because these images are a little big so, is there another approach besides duplicate the images? I searched for some libraries but I couldn't find anything that could fit my needs... I can blue all the image, is there a way to set a listener to start blurring when the user drags the collapsing bar up? Please, help, I've tried lots of things!

Answer 1

I have used RealtimeBlurView. To use this do make changes in the build.gradle of your app module.

Add dependencies in your build.gradle:

dependencies {
    compile 'com.github.mmin18:realtimeblurview:1.1.2'
}
android {
    buildToolsVersion '24.0.2'                 // Use 23.0.3 or higher
    defaultConfig {
        minSdkVersion 15
        renderscriptTargetApi 19
        renderscriptSupportModeEnabled true    // Enable RS support
    }
}

Add proguard rules if necessary:

-keep class android.support.v8.renderscript.** { *; }

Then add following view in your CollapsingToolbarLayout

<com.github.mmin18.widget.RealtimeBlurView
            android:id="@+id/blurView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:realtimeBlurRadius="20dp"
            app:realtimeOverlayColor="#8000" />

And in your activity add following code.

final AppBarLayout appBar = findViewById(R.id.testeparainfo);
final RealtimeBlurView blurView = findViewById(R.id.blurView);
blurView.setAlpha(1F);
appBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(final AppBarLayout appBarLayout, final int verticalOffset) {
        float offsetAlpha = (appBarLayout.getY() / appBar.getTotalScrollRange());
        blurView.setAlpha(offsetAlpha * -1);
    }
});

Took help of this answer

Answer 2

Try this Android Blurry Library

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
    double percentage = (double) Math.abs(verticalOffset) / collapsingToolbar.getHeight();
    if (percentage > 0.8) {
        collapsingToolbar.setTitle("Collapsed");
    } else {
        collapsingToolbar.setTitle("Expanded");
    }

Blurry.with(context)
  .radius(10 * percentage)
  .sampling(8)
  .color(Color.argb(66, 255, 255, 0))
  .async()
  .animate(500)
  .onto(blurryImage); // imgCountryInfoEscuro
}