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.
You know your projects stand out of the herd. There is something special about them. It seems to me all of them are really brilliant.
How to implement this type of Parallax View, please help me.
https://in.pinterest.com/pin/455848793513618431/
Thank you