Recently we discuss about some Android UI library like slanting ImageView and FAB menu with Gooey effect but today we explore the Parallax effect using Parallax ViewPager Android Library.

What is parallax ViewPager effect?

The effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g. through the viewfinder and the lens of a camera.

Recommended Article:

AwesomeLayoutManager Android Layout Library

Hope you clear about parallax and many time you want this effect in your Android layout thats why this Parallax ViewPager Android Library by which you can easily implement this effect in your Android project.

Lets clear more easily by some demo which are given below:

• The first gif foreground speed = 2*background speed witch is speedRatio = 0.5

• the second gif foreground speed = background speed witch is speedRatio = 1

How to Add Parallax ViewPager Library to your project

Gradle

• Add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
    	...
    	maven { url 'https://jitpack.io' }
    }
}

• Add the dependency

dependencies {
    compile 'com.github.demoNo:ParallaxViewPager:v1.0.0'
}

Maven

• Add the JitPack repository to your build file

<repositories>
    <repository>
        <id>jitpack.io</id>
        <url>https://jitpack.io</url>
    </repository>
</repositories>

• Add the dependency

<dependency>
    <groupId>com.github.demoNo</groupId>
    <artifactId>ParallaxViewPager</artifactId>
    <version>v1.0.0</version>
</dependency>

Just like normal ViewPager

<li.yohan.parallax.ParallaxViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

ParallaxViewPager mPager = ((ParallaxViewPager) findViewById(R.id.pager));
mPager.setAdapter(new Adapter());

set background image just like ViewPager.

You can set in xml:

android:background="@drawable/background"

or in code

setBackgroundResource(int resid)
setBackground(Drawable background)

Configuration

• you can set speed ratio in xml

<li.yohan.parallax.ParallaxViewPager
     android:id="@+id/viewPager"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
   app:speedRatio="0.5f" />

• also set in code

ParallaxViewPager mPager = ((ParallaxViewPager) findViewById(R.id.pager));
 mPager.setAdapter(new Adapter());
mPager.setSpeedRatio(0.5f);

Note: the default ratio is 0.5f

Restrictions

1. The background image’s width should larger than height.
2. The background image’s width should larger than ViewPager’s width.
3. You can’t set pager with padding.
4. If the ratio that user set is not proper, it will be recalculate and reset.

Hope you enjoyed this library and please comment us with your suggestions.