How to make a new parallax effect PlayStore

Question

Does anyone know how I can achieve a new parallax scrolling effect - you can see the effect when you open the application in the PlayStore and try to scroll down, the contents will move over the top image. How can i achieve this?

Answer 1

Google recently announced a design support library , while supporting the implementation of the Collapsing toolbar .

In addition to pinning the view, you can use app:layout_collapseMode="parallax" (and optionally app:layout_collapseParallaxMultiplier="0.7" to set the parallax factor) to perform parallax scrolling (say about ImageView marriage in CollapsingToolbarLayout )

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> 

Answer 2

You can 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: Instead of a third-party library, this AppBarLayout and CollapsingToolbarLayout http://android-developers.blogspot.in/2015/05/android-design-support-library.html

Answer 3

try the ObservableScrollView library

https://github.com/ksoichiro/Android-ObservableScrollView

demo application from the play store

https://play.google.com/store/apps/details?id=com.github.ksoichiro.android.observablescrollview.samples2

demo sample

Answer 4

There is a library called FadingActionBar that does exactly what you ask for. You can find the library on GitHub (click) and the demo application on the Play Store (click) .

Usage will 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); 

Answer 5

Actually, a few minutes after the publication of this question, I came across two libraries that make the effect I'm looking for, and even more.

Here are the links to them:

• Scroll Parallax
• Paralloid

Answer 6

You can customize the parallax animation by tracking the scrolling view of the Recycler

Firstly, in the image view layout. Set the parent layout smaller than the image view to prevent the image outside the frame when setting the translation

 <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 scrolling effect of the recycler view and the transition to the image.

*** I am using rxbinding and kotlin for implementation. You can use the 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 } } } }