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!

Check this [answer](https://stackoverflow.com/a/44980413/9734616). It might help you — Brijesh Joshi, Jul 05 '18 at 09:57
@BrijeshJoshi It actually doesn't because the person who asked the question wanted just the blur when the image is collapsed, not gradually ahah — André Silva, Jul 05 '18 at 10:13
Yes but if you look at the accepted answer, you'll find that the person has added OnOffsetChangedListener on the appbar which is providing the the detail of how much offset has been changed according to which he has set the alpha to the blurView. So eventually that will help you. — Brijesh Joshi, Jul 05 '18 at 10:16
I tried to do what the answer said but it gives me this error when I try to run my app: `More than one file was found with OS independent path 'lib/arm64-v8a/libRSSupport.so'` — André Silva, Jul 05 '18 at 10:19
I have achieved this with the suggested answer only. I did some changes to it. Posting them in answer — Brijesh Joshi, Jul 05 '18 at 10:53

Khaled Lela · Answer 1 · 2018-07-05T13:16:59.520

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
}

edited Jul 05 '18 at 13:16

answered Jul 04 '18 at 22:53

Khaled Lela

7,831
6
45
73

The "rootView" is what? – André Silva Jul 05 '18 at 08:01
This solution did not help me – André Silva Jul 05 '18 at 09:53
@AndréSilva rootView is to be `blurryImage // imgCountryInfoEscuro` check my answer update, you can also use `async` or without. ` – Khaled Lela Jul 05 '18 at 13:19

score 1 · Accepted Answer · answered Jul 05 '18 at 10:59

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

I'll try it! But just one thing, how do I add `proguard rules`? Where do I install it? — André Silva, Jul 05 '18 at 11:00
It still gives me this error: `More than one file was found with OS independent path 'lib/arm64-v8a/libRSSupport.so'` — André Silva, Jul 05 '18 at 11:03
Can you share your build.gradle file. So that i can look into it, and provide proper information — Brijesh Joshi, Jul 05 '18 at 11:05
The error you are getting is possibly because the RealTimeBlurView is conflicting with some other lib. Tracking that — Brijesh Joshi, Jul 05 '18 at 11:10

Blur and Unblur images in collapsing Toolbar

2 Answers2