How to achieve Google Play Newsstand Page Tab UI?

Question

What I want to achieve?

I recorded a video of the Tab transition animation.

• Video: https://www.dropbox.com/s/h8k5uy3z5gwbzoc/File%206-24-15%2C%2019%2015%2012.mov?dl=0

There are several flows I would like to describe below:

• Centering the selected item in normal (I did this)

• Transit the tab container when user scroll it up to the top. I thought it was a padding animation but it doesn't seem to the right way.

• Transit the tab container back when user scroll it down.

• Change the transparency along with the scroll. (I can almost do this by catching the scrolling event)

What I have tried?

• I use this https://github.com/jpardogo/PagerSlidingTabStrip to achieve the center position of selected tab.

• I'm using padding to transit the tab container but I think it's not the right way.

• Still no code here, but I'll post it if it's helpful.

Please help!

Answer 1

Try new google design support library and go through the AppBar and it's layout_scrollFlags options for various mode.

Answer 2

https://github.com/florent37/MaterialViewPager

https://github.com/naman14/PlayNewsStandDemo

This guys made the exact mock of GooglePlayNewStand.