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.

Answer 1

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.