Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Recycler view - resizing item view while scrolling (for carousel like effect)

I need to create a vertical recyclerview in which item view in center of the screen should be resized to have zoom like effect while scrolling.

Things I have tried but didn't work :

  1. Adding a scroll listener and looping through item views by position, measuring the centered position then updating LayoutParams of centered view.

    • RecyclerView won't let compute the position of items or update view while scrolling. It throws IllegalStateException if such operations are performed in onScrolled
  2. Changing LayoutParams of centered item view in onScrollStateChanged while scrolling state is IDLE or SETTLING.

    • That only updates view after scroll has been/is going to be completed, not during scrolling on items is being performed.
  3. The last option remained is implementing own custom LayoutManager that would extend default LayoutManager.

    • As far as I know, implementing custom Layoutmanager involves dealing with a lot more complex computations that needs to handled.

Any other solutions or ideas will be appreciated.

like image 961
Krupal Shah Avatar asked Dec 23 '16 20:12

Krupal Shah


People also ask

Is recycler view scrollable?

To help you build apps with lists, Android provides the RecyclerView . RecyclerView is designed to be very efficient, even with large lists, by reusing, or recycling, the views that have scrolled off the screen.


1 Answers

I found this answer on SO, which did the exact same thing horizontally. Answer provides a working solution that extends LinearLayoutManager. I modified it a bit for also adapting vertical lists and it works. If there is any mistake in implementation, let me know in comments. Cheers!

Custom Layout Manager :

public class CenterZoomLayoutManager extends LinearLayoutManager {      private final float mShrinkAmount = 0.15f;     private final float mShrinkDistance = 0.9f;      public CenterZoomLayoutManager(Context context) {         super(context);     }      public CenterZoomLayoutManager(Context context, int orientation, boolean reverseLayout) {         super(context, orientation, reverseLayout);     }       @Override     public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {         int orientation = getOrientation();         if (orientation == VERTICAL) {             int scrolled = super.scrollVerticallyBy(dy, recycler, state);             float midpoint = getHeight() / 2.f;             float d0 = 0.f;             float d1 = mShrinkDistance * midpoint;             float s0 = 1.f;             float s1 = 1.f - mShrinkAmount;             for (int i = 0; i < getChildCount(); i++) {                 View child = getChildAt(i);                 float childMidpoint =                         (getDecoratedBottom(child) + getDecoratedTop(child)) / 2.f;                 float d = Math.min(d1, Math.abs(midpoint - childMidpoint));                 float scale = s0 + (s1 - s0) * (d - d0) / (d1 - d0);                 child.setScaleX(scale);                 child.setScaleY(scale);             }             return scrolled;         } else {             return 0;         }     }      @Override     public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State state) {         int orientation = getOrientation();         if (orientation == HORIZONTAL) {             int scrolled = super.scrollHorizontallyBy(dx, recycler, state);              float midpoint = getWidth() / 2.f;             float d0 = 0.f;             float d1 = mShrinkDistance * midpoint;             float s0 = 1.f;             float s1 = 1.f - mShrinkAmount;             for (int i = 0; i < getChildCount(); i++) {                 View child = getChildAt(i);                 float childMidpoint =                         (getDecoratedRight(child) + getDecoratedLeft(child)) / 2.f;                 float d = Math.min(d1, Math.abs(midpoint - childMidpoint));                 float scale = s0 + (s1 - s0) * (d - d0) / (d1 - d0);                 child.setScaleX(scale);                 child.setScaleY(scale);             }             return scrolled;         } else {             return 0;         }      } } 

With horizontal orientation : enter image description here

with vertical orientation :

enter image description here

like image 54
Krupal Shah Avatar answered Oct 08 '22 21:10

Krupal Shah