19

I'm working on Google plus android app and wondering how did they achieve scrolling effect in profile view, I searched through out web for 2 days and didn't find any tutorial on this, anybody do not know what i'm talking about can view the screenshots I've taken on my Nexus 7.

Now my curiosity is in knowing how to achieve this effect, anyone who have idea please guide me.View the GIF

Steph Sharp
  • 11,462
  • 5
  • 44
  • 81
Nitin Misra
  • 4,472
  • 3
  • 34
  • 52

5 Answers5

20

---OLD INFO----

You can also achieve this effect by using the Android-ParallaxHeaderViewPager a good example of scrolling tab header by kmshack Github page

The Sample code is give in this Here Git Hub link

enter image description here

The explanation for the solution is begin described in the github page

NEW UPADTE 25-4-2015

A new Library works with app compact and tool bar Andriod-Seamless-ViewPager-Header

Andriod-Seamless-ViewPager

And there is another example also avilable PlayNewsStandDemo

Check this PlayNewsStandDemo

PlayNewsStandDemo

Hope this will help you

Ramz
  • 7,116
  • 6
  • 63
  • 88
14

The top is called a parallax effect, where the background image scrolls at half the speed of the actual scroll.

There is a good library you can use for that called Paralloid:

https://github.com/chrisjenx/Paralloid

The other part is the sticky tabs, which can be implemented using StickyListHeaders:

https://github.com/emilsjolander/StickyListHeaders

Eduard
  • 3,482
  • 2
  • 27
  • 45
8

You can achieve that using something we like to call "Parallax Effect". I've made an easy to use library that can be used to get that effect.

If you want to use it on a RecyclerView you can use this library: https://github.com/kanytu/android-parallax-recyclerview

If you can use lists like ListView, ScrollView etc you can use this one: https://github.com/kanytu/android-parallax-listview

I know this is a link only answer however such effect requires a lot of coding and therefor can't be posted as an answer.

Here are some screens of the effect you get:

enter image description hereenter image description here

Pedro Oliveira
  • 20,442
  • 8
  • 55
  • 82
  • how to get the right side style ? the action bar is transparent then fade to blue ? – ralphgabb May 11 '15 at 09:11
  • 1
    Check my github. On the readme there's a snipet of how to do that. https://github.com/kanytu/android-parallax-recyclerview/blob/master/README.md – Pedro Oliveira May 11 '15 at 09:38
6

This is a good resource : http://antoine-merle.com/blog/2013/10/04/making-that-google-plus-profile-screen/ --Explains the sticky footer, parallax and view hierarchy.

If your looking for the late animation on scroll, have a look here :

google plus scrolling technique in android

Community
  • 1
  • 1
Adnan Mulla
  • 2,872
  • 3
  • 25
  • 35
  • you've provided me with first example link that's what i want, I want to achieve same effect in image and content in this image http://i.stack.imgur.com/72f2G.png could you please help ? – Nitin Misra Jan 02 '14 at 12:56
  • same as the `translation` of `image` and `content` relatively in G+ app – Nitin Misra Jan 02 '14 at 12:57
2

You can use CollapsingToolbarLayout provided by google design library. The following link provides a detailed explanation how to achieve what you want

http://inthecheesefactory.com/blog/android-design-support-library-codelab/en

Robert
  • 5,278
  • 43
  • 65
  • 115
Ravi Theja
  • 3,371
  • 1
  • 22
  • 34