Overlaping cards in recyclerview when scrolling in android

Question

My problem is, I would like to create a RecyclerView with images for their cards (donno if I should use CardView or simple Relative Layout).

If scrolling down, images would move up with a kind of overlap:

first card is seen
when second card at y=0 hits top of the screen, it starts shrinking and the next card starts to move up above it (covering space of the previous card) and when fully shown it moves up until the next card needs to move over the previous one.

I know this description is lame, I don't know how to show it. It is somehow similar to Parallax but I don't know exactly how to achieve this. Do I need to write a full calculation on how the card will shrink.

If so, where do I put this to make it scrollable in recyclerView?
Do I make my own RecyclerView class or LayoutManager or both?

I would just like to get pointed in the right direction to start experimenting but I don't know where to begin.

I've created the basic RecyclerView with custom adapter for the images and content but now I need to add this customized scrolling for the list.

score 2 · Answer 1 · edited May 23 '17 at 12:00

2

I would suggest you to use RecyclerView's OnScrollListener (You can find more about it here).

What I am thinking how to achieve is you can get the first visible elements and the last visible element from the recycler view and calculate the margins like, for example, You can set the top most visible element's bottom-mergin high(-ve), with slightly decreasing as you move to center. At center set it zero. And from center to bottom set bottom-margin in the same manner but in reveres order.

Like As something like this:

Visible item  |  bottom-magrin
    10        |      -20
    11        |      -15
    12        |      -10
    13        |      -05
    14        |       00
    15        |      -05
    16        |      -10
    17        |      -15
    18        |      -20

You can set it as if you have less no of visible items, this is just an example.

Hope it helps you to get started and play with it to find out more.

Edit: To get the visible items refer this answer: https://stackoverflow.com/a/25053500/1820644

edited May 23 '17 at 12:00

Community

1
1

answered Dec 15 '15 at 20:26

kirtan403

7,293
6
54
97

I started with recyclerView.addOnScrollListener but I couldn't find where I can get visible items, positions or something like that – slorangex Dec 15 '15 at 20:53
Check updated answer I have added the reference there – kirtan403 Dec 15 '15 at 20:56
ok thank you very much, I shall try to work with this, I will wait with accepting answer for a bit tho, thanks – slorangex Dec 15 '15 at 21:03
No Problem, Hope it will help you :) – kirtan403 Dec 15 '15 at 21:04

Overlaping cards in recyclerview when scrolling in android

1 Answers1