How to blur the Collapsing toolbar image whan expanded like WhatsApp?

Question

I think this question is answered so many times but none of them worked in my case. I have a collapsing toolbar with an image loaded from the web using Picasso. I'm displaying a title on the image when collapsing toolbar is expanded. But my issue is when the image is light in color I can't see the title as it's in white color.

I tried setting the tint to Imageview in XML,

android:tint="@color/colorGrey"

but it's applying for the entire image.

I checked the collapsing toolbar on What's app, where it has a blurred image towards the bottom where the title is present. So, How to achieve the blur effect like What's app collapsing toolbar image?

score 0 · Accepted Answer · answered May 28 '18 at 17:12

I figured it out by referring to this answer. I just added two views within CollapsingToolbarLayout. One has the layout_gravity as top and the other at the bottom. Like below,

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:toolbarId="@+id/toolbar">

        <ImageView
            android:id="@+id/iv_cover_photo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <View
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_gravity="center_horizontal|bottom"
            android:background="@drawable/image_gradient_bottom" />

        <View
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_gravity="top"
            android:background="@drawable/image_gradient_top" />


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

Now, this looks almost similar to the Whats' App android profile page image.

How to blur the Collapsing toolbar image whan expanded like WhatsApp?

1 Answers1