Android Toolbar and User Image Animation Like Twitter

Question

I'm trying to achieve the toolbar and User image animation like the one that is used in Twitter's user profile.

I tried a lot of things but I cannot achieve pinning the collapsed toolbar at the top of the screen quickly with the some background it had when it was expanded and making the User Image be first above the toolbar and then make a scale down and move below the toolbar while scrolling.

How does twitter make the smooth effect in the User Profile image? How they first have this image in front of the toolbar and then while scrolling goes behind and achieve that smooth effect going below the toolbar?

I tried all the following scenarios:

Toolbar with parallax effect with CollapseParallaxMultiplier.
Pin Toolbar setting height 100dp and minHeight ?attr/actionBarSize.
2 Toolbars, one with the image background and the other one pinning it with transparent background color.
Scalling UserImage and then moving the Y position (cannot achieve effect that send the User Image below the toolbar when scrolling) smoothly.

None of the previous scenarios worked well for me.

XML hierarchy:

<android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.AppBarLayout>
       <android.support.design.widget.CollapsingToolbarLayout>
             <LinearLayout>
                   <!--Some TextViews and ImageViews-->
             </LinearLayout>
             <ImageView src="My User profile Img"/> <!--Image first above toolbar and when toolbar is collapsing scale down and then go below toolbar-->
             <ImageView src="My background"  app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.8"/> 
             <android.support.v7.widget.Toolbar app:layout_collapseMode="pin"/>
       </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

  <!--Second Part, where the ViewPager should be pinned below the Toolbar-->
  <NestedScrollView app:layout_behavior="@string/appbar_scrolling_view_behavior">
   <LinearLayout> 
      <android.support.design.widget.TabLayout/>
      <android.support.v4.view.ViewPager/>
     </LinearLayout>
     </NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Attached you can see the Twitter effect on the user profile activity.

@mio4kon No, o achieve something similar but no this effect :( — JpCrow, Apr 09 '18 at 13:15
Have you achieved the scrolling effect? First toolbar with header image collapse, then user information collapse with the tab layout pinned below the toolbar — Ralph, Jan 08 '19 at 17:17
been searching all day and I still can't achieve it :( thanks for the reply! — Ralph, Jan 08 '19 at 18:25

score 5 · Answer 1 · answered May 04 '16 at 21:39

5

I believe you're trying more difficult than it should be

CollapsingToolbarLayout have this contentScrim element that is normally used with a color, but in reality it can be any Drawable.

From the source code you can see that it's drawn directly behind the Toolbar

// This is a little weird. Our scrim needs to be behind the Toolbar (if it is present),
// but in front of any other children which are behind it. To do this we intercept the
// drawChild() call, and draw our scrim first when drawing the toolbar

https://android.googlesource.com/platform/frameworks/support/+/refs/heads/master/design/src/android/support/design/widget/CollapsingToolbarLayout.java#271

So I guess you start by doing the "standard" XML layout:
`Coordinator -> AppBar -> CollapsingToolbar -> Toolbar

and then call setContentScrim with some BitmapDrawable just to see what happens.

collapsingToolbar.setContentScrim(
                   context.getResources()
                     .getDrawable(R.drawable.something);

After that you'll need some geometry to make it look like exactly in place, but it's not scope of my answer. It seems that twitter also makes the image a bit blurred, but then it's a different question (use RenderScript).

Also, it might be that the scrim keeps moving while you scroll the view, then you'll might need to create a custom drawable that will allow you to offset the drawing position to make it look proper. But that's all "maybes" and "buts". The main idea is there.

answered May 04 '16 at 21:39

Budius

39,391
16
102
144

Thanks for the answer, i will try using contentscrim with a drawable and let you know if it works! – JpCrow May 04 '16 at 22:45
@JpCrow Not sure on the effect you want, but I've looked a few more times, and it seems to me that what Twitter uses as content scrim is a blurred version of the same image on the background. That way when the CollapsableLayout changes the alpha of it, you see that transition – Budius May 05 '16 at 09:05
Budius, do you think that twitter have all the "top" content in the AppBarLayout and in the nestedScrollview only the viewpager? – JpCrow May 05 '16 at 13:04
I don't think there's a nestedScrollView at all. The app I work at used to have Header/ViewPager like Twitter and it's really complicate to sync it all together. But with the CoordinatorLayout use case I believe it's just the ViewPager with the `app:layout_behavior="@string/appbar_scrolling_view_behavior"` and `height=match_parent`. The CoordinatorLayout moves the ViewPager up-down and the RecyclerView inside the ViewPager receives the rest of the scrolling movement. – Budius May 05 '16 at 16:23
but yes... @JpCrow all the rest of the "top" content is inside the `CollapsingToolbar` – Budius May 05 '16 at 16:27
I tried like you say but cannot achieve what i want, the same as twitter, the Content Scrim is only when i finish scrolling up to the toolbar, i need to have it always. I will try some more test and let you know – JpCrow May 05 '16 at 18:55
I believe Twitter uses 2 times the image. Once in a normal ImageView inside the `CollapsibleToolbar` with `app:layout_collapseMode="parallax"` and the other as the content scrim with a blurred/darkened image (you can notice on twitter that last moment when it transitions from one to the other). – Budius May 05 '16 at 19:08

score -1 · Answer 2 · answered May 11 '16 at 05:24

You can try below xml file:

<android.support.design.widget.CoordinatorLayout >
     <android.support.design.widget.AppBarLayout>
         <android.support.design.widget.CollapsingToolbarLayout
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">
             <ImageView
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin" />
         </android.support.design.widget.CollapsingToolbarLayout>

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

      <NestedScrollView app:layout_behavior="@string/appbar_scrolling_view_behavior">
   <LinearLayout> 
      <android.support.design.widget.TabLayout/>
      <android.support.v4.view.ViewPager/>
     </LinearLayout>
     </NestedScrollView>

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

Also use Pallete to add parallax color to CollapsingToolbar.

For more detail you can refer this link.

Thanks, but that is not what i was trying to achieve. Thats the normal and pretty example. :D — JpCrow, May 11 '16 at 13:05

Android Toolbar and User Image Animation Like Twitter

2 Answers2

Linked