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

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.