RecyclerViewPager, Part #2: Cards Carousel!

In my previous post I went on and on about closing the basic features gap between a ViewPager and a RecyclerView, acting like one (with the help of a PagerSnapHelper).

Yet there are other cool stuff you can do with a ViewPager. I’ve long known it for being able to provide 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!

Utilizing RecyclerView’s versatility, we can have that fixed using a RecyclerView-ish 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.

Contribute / Report bugs?

The code’s available in my demo app on Github. Feel free to star & PR!

d4vidi/VP2RV