/ ViewPager

A simple ViewPager with parallax effect

A simple ViewPager with parallax effect

ParallaxViewPager

a simple ViewPager with parallax effect.

The first gif
foreground speed = 2*background speed witch is speedRatio = 0.5
the second gif
foreground speed = background speed witch is speedRatio = 1

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

Usage

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

GitHub