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

Answer 1

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.

Answer 2

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.