Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Parallax transformer for ViewPagers that let you set different parallax effects for each view in your Fragments.
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;
}
}
}
// 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);
@ZhenisMadiyar

This comment has been minimized.

Copy link

@ZhenisMadiyar ZhenisMadiyar commented Aug 10, 2015

Hi! Can u give source code?

@criss721

This comment has been minimized.

Copy link

@criss721 criss721 commented Dec 1, 2015

Tanks , Great

@Kolyall

This comment has been minimized.

Copy link

@Kolyall Kolyall commented Jan 12, 2016

Thanks for you, it's awesome!

@Guihgo

This comment has been minimized.

Copy link

@Guihgo Guihgo commented Feb 5, 2016

please, can u give all source code ?

@Guihgo

This comment has been minimized.

Copy link

@Guihgo Guihgo commented Feb 6, 2016

thanks, it's simple to implemment. Who want source code, send me a mail. guihgo100milha@gmail.com

@Guihgo

This comment has been minimized.

Copy link

@Guihgo Guihgo commented Mar 9, 2016

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

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

@aemxn

This comment has been minimized.

Copy link

@aemxn aemxn commented May 23, 2016

@Guihgo thank you!

@YugandharVadlamudi

This comment has been minimized.

Copy link

@YugandharVadlamudi YugandharVadlamudi commented Aug 11, 2016

Working fine thanks for providing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment