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 :
-
Adding a scroll listener and looping through item views by position, measuring the centered position then updating
LayoutParams
of centeredview
.-
RecyclerView
won't let compute the position of items or update view while scrolling. It throwsIllegalStateException
if such operations are performed inonScrolled
-
-
Changing
LayoutParams
of centered item view inonScrollStateChanged
while scrolling state isIDLE
orSETTLING
.- That only updates view after scroll has been/is going to be completed, not during scrolling on items is being performed.
-
The last option remained is implementing own custom
LayoutManager
that would extend defaultLayoutManager
.- As far as I know, implementing custom
Layoutmanager
involves dealing with a lot more complex computations that needs to handled.
- As far as I know, implementing custom
Any other solutions or ideas will be appreciated.
Solution 1:
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 :
with vertical orientation :