How to create Parallax effect on View Recycler page on scroll?

Hi, I have a recycler view and every recycler element of the Contain ImageView that is in the FrameLayout and the image is Stretched to fit all the elements. Size
What I want to do to create a Parallax effect on the image of the View Recycler element.

so that I can move the image to show the hidden part of it when I scroll up and down

Like this tutorial in quick

What I did here in the scroll of Recycler View

events_list.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) { super.onScrollStateChanged(recyclerView, newState); } @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); final DynamicImageView imageView = (DynamicImageView) recyclerView.findViewById(R.id.item_image); if (imageView.getVisibility() == View.VISIBLE) { if (dy > 0) { Animation a = new Animation() { @Override protected void applyTransformation(float interpolatedTime, Transformation t) { FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) imageView.getLayoutParams(); params.topMargin = (int)(-50 * interpolatedTime); imageView.setLayoutParams(params); } }; a.setDuration(100); // in ms imageView.startAnimation(a); } else if (dy < 0) { Animation a = new Animation() { @Override protected void applyTransformation(float interpolatedTime, Transformation t) { FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) imageView.getLayoutParams(); params.topMargin = (int)(50 * interpolatedTime); imageView.setLayoutParams(params); } }; a.setDuration(100); // in ms imageView.startAnimation(a); } } } }); 

I know that this code is not an optimal solution, it should also check all visible elements, not the first problem, but my problem here is that I am changing the border of the image. I get free spaces between the elements, and the animation works perfectly any help?

+5
source share
1 answer

I found this Library to achieve what I definitely want

how is it used

 <com.fmsirvent.ParallaxEverywhere.PEWImageView android:id="@+id/grid_image" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" pew:block_parallax_x="true" pew:reverse="reverseY" android:scaleType="centerCrop" /> 
+1
source

Source: https://habr.com/ru/post/1237984/


All Articles