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.

Answer 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