Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 786
Darko Petkovski Avatar asked Aug 23 '14 10:08

Darko Petkovski


People also ask

How do you create a parallax effect?

To make a parallax effect, every element is moving at a different pace and time. That is how we achieve the illusion of depth, even though we are scrolling in 2D. The rule of thumb moves the “furthest” objects the least, like how it looks in the real world.

Can you do parallax on mobile?

The parallax works on desktop browsers but it doesn't on mobile, not even Android.

What is parallax effect in Android?

It's not restricted to android/web-apps. Most of the gaming applications use this effect to give an effect of objects moving back with only one object in focus. Parallax in Android will come under material design scroll animations. Some designs include a parallax scroll effect with a header image, along with Tabs.


2 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 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> 
like image 50
Paresh Mayani Avatar answered Nov 02 '22 10:11

Paresh Mayani


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

like image 27
Yuraj Avatar answered Nov 02 '22 09:11

Yuraj