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 over the top image. How can I achieve that?

Answer 1

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 optionally app:layout_collapseParallaxMultiplier="0.7" to set the parallax multiplier) to implement parallax scrolling (say of a sibling ImageView within the 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 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

Answer 3

try the ObservableScrollView library

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

demo application from play store

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

sample demo,

Answer 4

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

Answer 5

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:

• Parallax Scrolls
• Paralloid

Answer 6

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