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!
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