How to do the new PlayStore parallax effect

Question

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

Answer 1

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

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
                                }
                            }
                        }
                    }