CODEWITHSUNDEEP
androidandroid-layoutandroid-animationmaterial-designandroid-scroll
Darko Petkovski
Darko Petkovski

Reputation: 3912

How to do the new PlayStore parallax effect

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?

enter image description here

Upvotes: 49

Views: 58586

Answers (6)

Kit
Kit

Reputation: 2380

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

Upvotes: 0

Paresh Mayani
Paresh Mayani

Reputation: 128428

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>

Upvotes: 61

Yuraj
Yuraj

Reputation: 3195

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

Upvotes: 29

Ranjithkumar
Ranjithkumar

Reputation: 18396

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,

enter image description here

Upvotes: 19

reVerse
reVerse

Reputation: 35264

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

Upvotes: 4

Darko Petkovski
Darko Petkovski

Reputation: 3912

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:

Upvotes: 4

Related Questions