The missing piece in implementing a cards carousel using a RecyclerView!

amit d4vidi
Jul 19, 2018 · 3 min read

Edit: I’ve replaced this story with a more elaborate mini-series explaining how to further ViewPager-ize a RecyclerView:

Looks like a ViewPager, sounds like ViewPager… it’s a RecyclerView!

With the birth of RecyclerView in Android SDK v22.1.0, Google have introduced a genuine improvement in the quality of UI infrastructure Android has to offer for developers. Providing an impressive amount of extensibility and flexibility without giving up on a hint of performance, RecyclerView has effectively made older solutions such as ListView obsolete.

In Android SDK v25.1.0 SnapHelpers came to be, with PagerSnapHelper specifically — allegedly aiming this time around at giving the (arguably) clunky ViewPager the boot.

And so it does allow for quite a similar behavior in the naïve use case:

RecyclerView + PagerSnapHelper vs. a ViewPager: Quite Similar

Yet the ViewPager has also been renowned for providing a ‘page by page’ solution for views that do not necessarily take up the whole screen. For example, with minimal tweaking, you can set up this list of Cards:

The main layout in my soon-to-be app, Langwitch

Try to do that with a PagerSnapHelper out of the box and you will fail miserably. As pointed out in the docs, they kind’a don’t want that to fall through:

PagerSnapHelper can help achieve a similar behavior to ViewPager. Set both RecyclerView and the items of the RecyclerView.Adapter to have MATCH_PARENT height and width and then attach PagerSnapHelper to the RecyclerView using attachToRecyclerView(RecyclerView).

An Item Decorator To The Rescue!

So as I’ve previously pointed out, RecyclerView is super flexible, allowing this to be fixed nevertheless using a simple decorator:

In essence, the decorator simply pads each view so it would artificially fit the screen — also allowing for a ‘hint’ at the previous and next card to show next to it.

So assuming we want each card (or whatever view you have) to take up 80% of the total screen’s width, and the neighbouring cards to show 1% on each side as a hint— as in the screenshot, all it takes is to apply the decorator, like so:

Is this restricted to PagerSnapHelper?

Absolutely not. The decorator stands in its own right, and can be used even if all you’re looking for is just proper padding.

Future Steps

While this narrows the gap between the full-featured ViewPager and the RecyclerView, still ViewPager supports scrollable “paged” layouts much better. For example, With ViewPager it’s much easier to monitor which page is currently the one in focus on the screen, and the overall scrolling state (could be interesting in case you wish to apply adaptive transformations over the views).

I’ll try to tackle these kind of gaps in upcoming posts.

In the meantime, hope you’ve enjoyed this post!

amit d4vidi

Written by

Enthusiastic Android developer @ Wix by day, guitar shredder by night.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade