Android Parallax Effect and View Pager

Question

I'm trying to achieve a parallax effect in my application. I have a FragmentActivity that implements the OnPageChangeListener interface and listens to my ViewPager scrolling events.

To achieve this effect in my XML I have a LinearLayout behind all the other views with my background, and I move it in the onPageScrolled callback. If I simply swipe it's all ok, the effect works and the background position change. But when my finger leaves the screen, the background is redrawn at his original position (even if I'm in a new page). I can't understand why this happens. Here the code of my FragmentActivity :

public class MainActivity extends FragmentActivity implements OnPageChangeListener {

// DEFINE THE PAGEADAPTER
private ViewPager viewPager;
private com.angtrim.ecomilano.PagerAdapter pagerAdapter;
private int oldPosition = 0;
private int offSet = 0;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    // CREATE VIEWPAGER
    viewPager = (ViewPager) findViewById(R.id.viewpager);
    pagerAdapter = new PagerAdapter(getApplicationContext(),getSupportFragmentManager());
    // SET THE ADAPTER
    viewPager.setAdapter(pagerAdapter);        
    // SET FIRST ITEM
    viewPager.setCurrentItem(0);   
    // SET CHANGE PAGE LISTENER
    viewPager.setOnPageChangeListener(this);        
}    

@Override
public void onPageScrollStateChanged(int arg0) {
    // TODO Auto-generated method stub      
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

    // RIGHT SWIPE
    if((oldPosition < arg2))
    {       
        offSet = (int)((arg2 - oldPosition)*0.5);               
        oldPosition = arg2;
    }
    // LEFT SWIPE
    else if( (oldPosition > arg2))
    {   
        offSet = (int) (-(oldPosition - arg2)*0.5);         
        oldPosition = arg2;
    }

    findViewById(R.id.backi).offsetLeftAndRight(offSet);        
}

@Override
public void onPageSelected(int arg0) {
    // TODO Auto-generated method stub

}
}

Thank you.

Solution 1

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

Solution 2

I know the question is old, and I can't really answer your question. But, a guy named Matthieu created an excellent example of ViewPager parallax effect which can be found at the following link.

https://github.com/MatthieuLJ/ViewPagerParallax

Solution 3

Maybe this library can help you:

https://github.com/garrapeta/ParallaxViewPager

Solution 4

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 the custom 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 (head to the README for the exact lines)

Solution 5

Take a look at this small library I created - it's a ViewPager subclass, which requires no extra configuration for the parallax effect to work.

View more solutions

Comments

[Shirane85]

Great library, i used it for my parallax screen and it works perfectly.

[user1076881]

Is parallax effect possible in vertical view pager?