How to create scrollable page of carousels in Android?

paulscode picture paulscode · Nov 22, 2014 · Viewed 15.2k times · Source

I am attempting to build a UI for my Android app which contains a vertically scrollable page of horizontally scrollable carousels (something like what the Netflix app does). How is this type of behaviour accomplished?

A basic implementation would be enough to get me started. There are a few other requirements for the UI, which I'll include here for reference, since it may impact what classes or libraries I can use.

1) Vertical scrolling between carousels should be smooth, but when user releases, the UI should "snap to" the closest carousel (so the user is always on a carousel row, not between two carousels).

2) Horizontal scrolling on a carousel should be smooth, but when user releases, the UI should "snap to" the closest item in the carousel.

3) Should be possible to overlay additional information over an item in the carousel

4) UI should be adaptable to any screen size.

5) Should be navigable with the arrow keys (for touchscreen-less devices)

6) Should work on a wide range of Android versions (possibly through the support library)

7) Should be OK to use in an open-source app licensed under the GPL

Acceptable answers DO NOT have to meet all of these requirements. At a minimum, a good answer should involve navigating multiple carousels (versus only one carousel).

Here is a mock-up of basically what I am envisioning (I'm flexible, doesn't have to look like this.. point is just to clarify what I am talking about -- each row would contain a lot of items that could be scrolled left and right, and the whole page could be scrolled up and down)

enter image description here

Answer

mmlooloo picture mmlooloo · Dec 5, 2014

Main Idea

In order to have a flexible design and having unlimited items you can create a RecyclerView as a root view with a LinearLayoutManager.VERTICAL as a LayoutManager. for each row you can put another RecyclerView but now with a LinearLayoutManager.HORIZONTAL as a LayoutManager.

Result

enter image description here

Source

Code

Requirements

1) Vertical scrolling between carousels should be smooth, but when user releases, the UI should "snap to" the closest carousel (so the user is always on a carousel row, not between two carousels).

2) Horizontal scrolling on a carousel should be smooth, but when user releases, the UI should "snap to" the closest item in the carousel.

In order to achieve those I used OnScrollListener and when the states goes SCROLL_STATE_IDLE I check top and bottom views to see which of them has more visible region then scroll to that position. for each rows I do so for left and right views for each row adapter. In this way always one side of your carousels or rows fit. for example if top is fitted the bottom is not or vise versa. I think if you play a little more you can achieve that but you must know the dimension of window and change the dimension of carousels at runtime.

3) Should be possible to overlay additional information over an item in the carousel

If you use RelativeLayout or FrameLayout as a root view of each item you can put information on top of each other. as you can see the numbers are on the top of images.

4) UI should be adaptable to any screen size.

if you know how to support multiple screen size you can do so easily, if you do not know read the document. Supporting Multiple Screens

5) Should be navigable with the arrow keys (for touchscreen-less devices)

use below function

mRecyclerView.scrollToPosition(position);

6) Should work on a wide range of Android versions (possibly through the support library)

import android.support.v7.widget.RecyclerView;

7) Should be OK to use in an open-source app licensed under the GPL

Ok

happy coding!!