Parallax transformer for ViewPagers that let you set different parallax effects for each view in your Fragments.

ParallaxPageTransformer.java

package com.aracem.utils.animations.pagetransformation;

import org.jetbrains.annotations.NotNull;

import android.support.v4.view.ViewPager;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

/**
 * Parallax transformer for ViewPagers that let you set different parallax 
 * effects for each view in your Fragments.
 * 
 * Created by Marcos Trujillo (#^.^#) on 1/10/14.
 */
public class ParallaxPageTransformer implements ViewPager.PageTransformer {

    private List<ParallaxTransformInformation> mViewsToParallax
            = new ArrayList<ParallaxTransformInformation>();

    public ParallaxPageTransformer() {
    }

    public ParallaxPageTransformer(@NotNull List<ParallaxTransformInformation> viewsToParallax) {
        mViewsToParallax = viewsToParallax;
    }

    public ParallaxPageTransformer addViewToParallax(
            @NotNull ParallaxTransformInformation viewInfo) {
        if (mViewsToParallax != null) {
            mViewsToParallax.add(viewInfo);
        }
        return this;
    }

    public void transformPage(View view, float position) {

        int pageWidth = view.getWidth();

        if (position < -1) {
            // This page is way off-screen to the left.
            view.setAlpha(1);

        } else if (position <= 1 && mViewsToParallax != null) { // [-1,1]
            for (ParallaxTransformInformation parallaxTransformInformation : mViewsToParallax) {
                applyParallaxEffect(view, position, pageWidth, parallaxTransformInformation,
                        position > 0);
            }
        } else {
            // This page is way off-screen to the right.
            view.setAlpha(1);
        }
    }

    private void applyParallaxEffect(View view, float position, int pageWidth,
            ParallaxTransformInformation information, boolean isEnter) {
        if (information.isValid() && view.findViewById(information.resource) != null) {
            if (isEnter && !information.isEnterDefault()) {
                view.findViewById(information.resource)
                        .setTranslationX(-position * (pageWidth / information.parallaxEnterEffect));
            } else if (!isEnter && !information.isExitDefault()) {
                view.findViewById(information.resource)
                        .setTranslationX(-position * (pageWidth / information.parallaxExitEffect));
            }
        }
    }


    /**
     * Information to make the parallax effect in a concrete view.
     *
     * parallaxEffect positive values reduces the speed of the view in the translation
     * ParallaxEffect negative values increase the speed of the view in the translation
     * Try values to see the different effects. I recommend 2, 0.75 and 0.5
     */
    public static class ParallaxTransformInformation {

        public static final float PARALLAX_EFFECT_DEFAULT = -101.1986f;

        int resource = -1;
        float parallaxEnterEffect = 1f;
        float parallaxExitEffect = 1f;

        public ParallaxTransformInformation(int resource, float parallaxEnterEffect,
                float parallaxExitEffect) {
            this.resource = resource;
            this.parallaxEnterEffect = parallaxEnterEffect;
            this.parallaxExitEffect = parallaxExitEffect;
        }

        public boolean isValid() {
            return parallaxEnterEffect != 0 && parallaxExitEffect != 0 && resource != -1;
        }

        public boolean isEnterDefault() {
            return parallaxEnterEffect == PARALLAX_EFFECT_DEFAULT;
        }

        public boolean isExitDefault() {
            return parallaxExitEffect == PARALLAX_EFFECT_DEFAULT;
        }
    }
}

UseExample.java

// Example of use
// Views affected. Background & 'horizontal phone image'
// You can watch this video with the result https://www.youtube.com/watch?v=3fp5Bdk29OQ&feature=youtu.be

 ParallaxPageTransformer pageTransformer = new ParallaxPageTransformer()
                .addViewToParallax(new ParallaxTransformInformation(R.id.img_background, 2, 2))
                .addViewToParallax(new ParallaxTransformInformation(R.id.tutorial_img_phone, -0.65f,
                        PARALLAX_EFFECT_DEFAULT));
  mViewPager.setPageTransformer(true, pageTransformer);

Hi! Can u give source code?

Tanks , Great

Thanks for you, it's awesome!

please, can u give all source code ?

thanks, it's simple to implemment. Who want source code, send me a mail. [email protected]

Hi guy, i post on git, see out:
http://guihgo.github.io/ParallaxViewPager/

@Aracem what is your e-mail to add as Collaborator ?

@Guihgo thank you!

Working fine thanks for providing