How to Add Parallax ViewPager Android Library

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
Parallax ViewPager with speedRation 0.5
Parallax ViewPager with speedRation 0.5
  • the second gif foreground speed = background speed witch is speedRatio = 1
Parallax ViewPager with speedRation 1
Parallax ViewPager with speedRation 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.

By Tell Me How

It is a technology blog and admin has excellent experience in programming from 5+ year. You can contact us at ceo.tellmehow@gmail.com

Share your thoughts

Leave a Reply

Loading Facebook Comments ...
Loading Disqus Comments ...