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