androidxmlandroid-toolbarandroid-collapsingtoolbarlayout

Collapsing toolbar blur image when collapsed

I need some help with my toolbar.

Right now I use a collapsing toolbar with image which collapses when I scroll up. I know I can use contentScrim to make the Toolbar transparent and therefore see the image as "toolbar background".

However, I want the image to blur(/fade) when the toolbar is collapsed.

Any suggestions how to achieve this?

Solution

  • You can use this library. (RealTimeBlurView)
    For the blur effect, just put the imageview behind the blurview. To achieve what you want just change blurview's alpha when the app bar is scrolled.

    appbar.addOnOffsetChangedListener(new OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(final AppBarLayout appBarLayout, final int verticalOffset) {
        float offsetAlpha = (appBarLayout.getY() / appbar.getTotalScrollRange());
        blurView.setAlpha( 1 - (offsetAlpha * -1));
    }
});

    UPDATE

    FastBlur
    Here's another benchmarking project to showcase all the possible blurring methods in android.
    Just get the fastest algorithm from the demo and use it in your project.

    Hope this helps!