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

Android Parallax Image View

What is Parallax Image View?

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.

Today we’re going to see today Parallax Image View library which creates effect such as vertical parallax, horizontal parallax etc. on android ImageView when it’s being vertically or horizontally scrolled (moving) on the screen.

Screenshot

Implementation of Parallax Image View

• Step 1 Add repository into root build.gradle

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

• Step 2 Add library dependency into app build.gradle

dependencies {
    compile 'com.github.abdularis:ParallaxImageView:1.0'
}

or Download this project here :

How to use Parallax Image View

• Create vertical parallax image view

<com.github.abdularis.piv.VerticalScrollParallaxImageView
    android:id="@+id/image_view"
    android:layout_width="200dp"
    android:layout_height="170dp"
    android:src="@drawable/img1"/>

• Create Horizontal parallax image view

<com.github.abdularis.piv.HorizontalScrollParallaxImageView
    android:id="@+id/image_view"
    android:layout_width="200dp"
    android:layout_height="170dp"
    android:src="@drawable/img1"/>

• Create and customize effect on your own

<com.github.abdularis.piv.ScrollTransformImageView
    android:id="@+id/image_view"
    android:layout_width="200dp"
    android:layout_height="170dp"
    android:src="@drawable/img1"/>

Add functionality in Parallax Image View

In the java/kotlin code you can set the effect (transformer) manually. There are three built-in effect classes, VerticalParallaxTransformer, HorizontalParallaxTransformer, HorizontalScaleTransformer.

ScrollTransformImageView img = findViewById(R.id.image_view);

// create horizontal scale effect
img.setViewTransformer(new HorizontalScaleTransformer())

// create vertical or horizontal parallax effect manually
// img.setViewTransformer(new VerticalParallaxTransformer())
// img.setViewTransformer(new HorizontalParallaxTransformer())
//
// the VerticalParallaxImageView or HorizontalParallaxImageView are nothing but the ScrollTransformImageView with coresponding parallax effect

You can create your own custom effect by extending ViewTransformer.

public class CustomTransformer extends ViewTransformer {
    @Override
    public void onAttached(@NotNull ScrollTransformImageView view) {
        // do something when this transformer is set into image view
    }

    @Override
    public void onDetached(@NotNull ScrollTransformImageView view) {
        // do something when this transformer is remove from image view
    }

    @Override
    public void apply(@NotNull ScrollTransformImageView view, @NotNull Canvas canvas, int viewX, int viewY) {
        // do transformation effect or so, this would be called everytime image view move/scrolled
    }
}

Hope you enjoy this article and if i am right then please share this article with your friends.