Android Parallax Effect and View Pager
Asked Answered
C

5

8

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.

Copolymer answered 9/6, 2013 at 20:28 Comment(1)
can use this for background and parallax effect is depends on motion of screenOne
M
9

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

Montparnasse answered 25/4, 2014 at 20:37 Comment(1)
Is parallax effect possible in vertical view pager?Eberto
S
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

Strathspey answered 19/9, 2013 at 19:13 Comment(0)
D
2

Maybe this library can help you:

https://github.com/garrapeta/ParallaxViewPager

Doorway answered 22/3, 2014 at 19:34 Comment(0)
P
2

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)

parallax planet animation

Phlebotomize answered 13/5, 2014 at 0:2 Comment(1)
Great library, i used it for my parallax screen and it works perfectly.Leninism
Z
1

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.

Zebu answered 9/5, 2014 at 18:32 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.