Parallax Effect in Android's ViewPager

Question

I'm trying to emulate a parallax effect when sliding through my fragments, I've read about beginFakeDrag and fakeDragBy but to be honest, I don't know even if it's the best approach to my problem.

Anyone has done something similar with the ViewPager or have a hint about how should I approach this?

Thank you

Ovipositor

Answer 1

This question is a bit old, but I found it when I was trying to do exactly that...

I implemented my own solution, basically extending ViewPager and overriding onDraw.

You can find all the code with a simple example here

Syncretize

Hi, what do i have to do to make multiple parallax effects in the viewpager ? like 2 or 3 ? – Exfoliate

Answer 2

An easy way to do this without using a custom library is to implement ViewPager.PageTransformer

I created my layouts to use the same id for their background element. For my example all background images will use the id background

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/background"
    android:src="@drawable/img12"
    android:scaleType="fitXY"/>

Then when I go in to implement ViewPager.PageTransformer I can reference that image like so:

public class Transformer implements ViewPager.PageTransformer{
    @Override
    public void transformPage(View page, float position) {
        if(position >= -1 && position <= 1){
            page.findViewById(R.id.background).setTranslationX(-position * page.getWidth() / 2);
        } else {
            page.setAlpha(1);
        }
    }
}

Finally, I assign my ViewPager.PageTransformer to my ViewPager like so.

ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setPageTransformer(false, new Transformer());

Noellenoellyn

Answer 3

I know that it's a bit old but take a look to that https://github.com/xgc1986/ParallaxPagerLibrary

It not overrides the onDraw method, and the effect not only with images, it works with every kind of view

mPager.setPageTransformer(false, new ParallaxTransformer(R.id.parallaxContent));

R.id.paraallaxContent is the id of the View you want to have this effect

unless the other solutions, don't need any any concrete structure to work, and also is layout independant

demo: youtube

Radiotherapy

Answer 4

Maybe this library can help you:

https://github.com/garrapeta/ParallaxViewPager

Haughay

Will you please mention how to add this in gradle file ? – Kiss

Answer 5

You can take a look at this :

https://github.com/luxsypher/ParallaxViewPager

you can apply a parallax effect on any element of your view and gave them all different speed

Geriatrics

Answer 6

This is a ViewPager subclass I wrote, pretty easy to use. You don't need to do anything different with it, just include the dependency and use it as a standard ViewPager. Available on GitHub.

Easton

Answer 7

This library is fully customizable in x and y directions and includes alpha effects:

https://github.com/prolificinteractive/ParallaxPager

Installation (as of v0.7, check README for updates):

1. Add as a Maven Central dependency with Gradle

2. Use a ParallaxContainer in layout XML instead of ViewPager

3. Create a layout XML file for each page (the x/y/alpha attributes can be set separately for each object moving in/out of the page)

4. There are a few copy/paste lines to add to onCreate of your Activity

Trass

I implemented this library and this is my code: parallaxContainer.setupChildren(getLayoutInflater(), R.layout.parallax_view_1, R.layout.parallax_view_2, R.layout.parallax_view_3); But it only shows the last view correctly. First view is empty, second view is actually half of the third view and the last view is seen how it should be. Whats the problem? why doesn't it load all 3 views independent one from each other? – Quicktempered

@rosualin my first suggestion would be to check the custom attributes used in layout XMLs. This step of the setup process might help. Has the xmlns:app line been added to the root? What are the x_in, etc., values for the views in each layout? Thank you for your comment, hopefully we can get this worked out. – Trass

The problem was that it was a relative layout and not linear, changed it to linear and worked. I've put some relative layouts inside the linear one and also had trouble. But then I forced all the items to have a x_in , x_out (x, y, a doesn't matter) and it worked. Apparently you need to call this even if you don't want a translation, so I simply called them with value 0 and now it's good, thanks a lot!! – Quicktempered

Answer 8

Maybe this library could be useful: https://github.com/matrixxun/ProductTour ?

it uses "ViewPager.PageTransformer" for making things move differently inside.

Loon