Does anyone know how can I achieve the new parallax scrolling effect - you can see the effect when you open an app on the PlayStore and try to scroll down, the content goes over the top image. How can I achieve that?
- 1just 100 or so lines of code, see: gist.github.com/pskink/d7089e5a82c970917be1 and sample implementation: gist.github.com/pskink/d7f0673b77fe8537b270pskink– pskink2015-05-18 13:09:28 +00:00Commented May 18, 2015 at 13:09
Add a comment |
6 Answers
Google has recently announced Design support library and with this it has support for implementing Collapsing Toolbar.
In addition to pinning a view, you can use
app:layout_collapseMode="parallax"(and optionallyapp:layout_collapseParallaxMultiplier="0.7"to set the parallax multiplier) to implement parallax scrolling (say of a sibling ImageView within theCollapsingToolbarLayout)
Example:
<android.support.design.widget.AppBarLayout android:layout_height="192dp" android:layout_width="match_parent"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <android.support.v7.widget.Toolbar android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> 
2 Comments
Chad Bingham
This is the preferred way. No need for 3rd party!
Sasa
@Paresh Mayani i have kind of similar problem, can you please take a look at it, stackoverflow.com/questions/34760578/… thanks
You could try this (FadingActionBar library): https://github.com/ManuelPeinado/FadingActionBar
Try an example of this library on android: https://play.google.com/store/apps/details?id=com.manuelpeinado.fadingactionbar.demo
EDIT: Rather than third party library use this AppBarLayout and CollapsingToolbarLayout http://android-developers.blogspot.in/2015/05/android-design-support-library.html
Comments
try the ObservableScrollView library
https://github.com/ksoichiro/Android-ObservableScrollView
demo application from play store
sample demo,
6 Comments
Paresh Mayani
Why to suggest 3rd party library when Google has already announced Design support library!
Ranjithkumar
@PareshMayani Thanks for info..But why downvote only for me?. all the answers are give 3rd party library including accepted answer..
Muzaffer
Material design library doesn't support fling gesture. Bad experience with scrollview! I'll try this library.
Ranjithkumar
It`s any necessary we only use the official methods.. If better than official we can go for 3rd party..for ex Networking library Retrofit faster than official library.Then what is our choice?
ShayHaned
Certainly an upvote because the cost of adding official design support library to the gradle dependency certainly equals the cost of adding 3rd party gradle dependency, sometimes with the added benefits of far greater support as mentioned by @wisemann
|
Actually few minutes after posting this question I bumped on two of libraries that do the effect I'm looking for and even more.
Here are links to them:
Comments
There's a library called FadingActionBar that does exactly what you're asking for. You can find the library on GitHub (click) and a Demo-Application in the Play Store (click).
Usage would be something like this:
FadingActionBarHelper helper = new FadingActionBarHelper() // Set the ActionBar drawable - basically the color .actionBarBackground(R.drawable.ab_background) // Set the Header - usually an image .headerLayout(R.layout.header) // Set the main layout .contentLayout(R.layout.activity_scrollview); setContentView(helper.createView(this)); helper.initActionBar(this); 
Comments
You may custom the parallax animation by tracking the Recycler View Scrolling
Firstly in the image view layout. Set the parent layout is smaller than image view so that prevent the image outside the bound when set translationY
<android.support.percent.PercentRelativeLayout android:id="@+id/index_level6_image_section" android:layout_width="match_parent" android:layout_height="200dp" android:clipChildren="false"> <ImageView android:id="@+id/index_level6_parallaxImage" android:layout_width="match_parent" android:layout_height="240dp" android:layout_centerInParent="true" android:background="@color/timberwolf" android:layout_marginTop="-20" android:layout_marginBottom="-20" android:scaleType="centerCrop" app:imageUrl="@{level6CellViewModel.level6ImageUrl}" /> </android.support.percent.PercentRelativeLayout> After that, track the recycler view scrolling effect and transitionY the image view.
*** I am using rxbinding and kotlin for implementation. You may use traditional listening method and java approach with the same idea.
RxRecyclerView.scrollEvents(recyclerView) .subscribe { event -> // get the visible cell items of the recycler view val firstVisible = layoutManager.findFirstVisibleItemPosition() val visibleCount = Math.abs(firstVisible - layoutManager.findLastVisibleItemPosition()) /** loop the visible cell items from the recycler view */ for (i in firstVisible..firstVisible + visibleCount) { event.view().layoutManager?.findViewByPosition(i)?.let { cellItem -> /** only for index cell level 6 parallax image */ cellItem.findViewById(R.id.index_level6_parallaxImage)?.let { imageView -> /** setting the parallax effect */ val translationY = (cellItem.top - cellItem.height) / level6ParallaxRate imageView.translationY = -translationY } } } } 