Which control to use to make a Google Play style horizontal scroll

Question

I am trying to make a horizontal scrolling list much like one we can find in the Google Play app. I have made the fragment (100dp x 150dp), and the adapter, but am struggling to find an element that will work.

The fragment looks like this :

It is just a cardview with a imageview, and a couple textviews within.

My goal is to make many of them together, horizontally, and scrollable like this:

I tried using a ViewPager, but that only allows for one full screen element, but I need a list that continues off the page. A HorizontalScrollView on the other hand would not "snap" to an element as seen in the gif above.

Any suggestions on which element would suite this the best?

did you try two way grid view or horizontal grid inside a vertical listview — santoXme, Dec 22 '15 at 06:22
@Mohit the horizontal scroll view does not snap each element to the left side of the screen, but keeps it where you stopped scrolling. — Jay S., Dec 22 '15 at 06:24
@santoXme ok I will try that. Do you know if we can make the elements snap to the edge of the screen? — Jay S., Dec 22 '15 at 06:26
@santoXme take a look at the gif. I'm not scrolling completely, only part way, and the control is snapping so the the closest element ends up on the left. When I try to scroll past the app 'Township' I didn't scroll enough, so it snapped back. — Jay S., Dec 22 '15 at 06:30
you want that same this for your application .snap the item to edge of that device ...form both side or or single side? — santoXme, Dec 22 '15 at 06:35
@santoXme both sides. If I scroll more than half, snap to the next element, else snap back to the current element — Jay S., Dec 22 '15 at 06:36
you can get this by creating a custom horizontal scroll-view ..using gesture detractor ..and if your all item size horizontal scroll view is same than is very easy to get a snap — santoXme, Dec 22 '15 at 06:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98645/discussion-between-santoxme-and-jay-s). — santoXme, Dec 22 '15 at 06:48
A viewpager can be implemented to show multiple views at once too. Look at this [link](https://commonsware.com/blog/2012/08/20/multiple-view-viewpager-options.html) — Yash Ladia, Dec 22 '15 at 07:55
@Amy I used your solution, and it worked great for me. If you would like to add that as an answer, I'd be happy to accept it. Thank you! — Jay S., Dec 23 '15 at 20:59

score 4 · Accepted Answer · edited Mar 19 '16 at 14:29

4

I'd suggest using the RecyclerView "pattern" and simply use a LinearLayoutManager with its orientation set to HORIZONTAL.

edited Mar 19 '16 at 14:29

Alexander Suraphel

10,103
10
55
90

answered Jan 04 '16 at 06:17

yennsarah

5,467
2
27
48

but how to repeat it dynamically as shown in above image, Different horizontal views for different categories. Please update. I want to make it dynamic . – 89n3ur0n Apr 27 '16 at 12:25

score 1 · Answer 2 · answered Dec 22 '15 at 07:39

1

If I were you, I would use ViewPage and implement an PagerAdapter. In the custom PagerAdapter, override method getPageWidth(), adjust page width as the card's width.

answered Dec 22 '15 at 07:39

Chievent

11
1

score 0 · Answer 3 · answered May 11 '16 at 12:37

It will work with Horizontal RecyclerView, make Horizontal LinearLayoutManager like below code

RecyclerView rclViewOrder;
rclViewOrder.setHasFixedSize(true);
RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);

rclViewOrder.setLayoutManager(mLayoutManager);
RecyclerView.Adapter mAdapter = new ViewOrderWaiterAdapter(activity, orderItemInfoList);
rclViewOrder.setAdapter(mAdapter);

Which control to use to make a Google Play style horizontal scroll

3 Answers3