How can someone create a horizontal scroll list with snapping effect to the center

Question

OK! I've been trying to do this on and of for the last few weeks and cant seem to find a good solution to how I can accomplish what I want. Been trying with HorizontalScrollView, Gallery (which is deprecated).

I am now looking into RecycleView because I came over this method .smoothScrollToPosition() and thought that might help me.

Here is an illustration of what I want to accomplish:

I also have to be able to create the relativelayouts programmatically

Can anyone point out to me how this can be accomplished? Is there any native way to do it?

EDIT: After looking further in to @CommonsWare suggestion about looking into ViewPager and the commonsware.com/blog/2012/08/20/ third post from Dave Smith I think this is the way to go. Havent modefied it to my use yet, but its looking good.

I am using Dave Smiths sample from his Github: https://gist.github.com/devunwired/8cbe094bb7a783e37ad1

Answer 1

Do not use that approach, it will use to much memory (if at some point you'll need to extend to a more generic solution) because you will have to keep an elevate number of ViewPager Pages (Fragment) in memory. I had this same challenge and I've accomplished this with HorizontalListView.

So you need to create an Adapter that will add "stubs" View's in order to get the first one or the last one (could be more depending on the desired visible views at the same time) centred in the screen since this is a ListView. For the snapping effect you can use something like this (all items need to have equal dimensions):

View.OnTouchListener hListViewsOnTouchListener = new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_UP && v instanceof HListView) {
                    View c = ((HListView) v).getChildAt(0);
                    int posToGo = Math.abs(c.getX()) < c.getWidth() / 2 ? ((HListView) v).getFirstVisiblePosition() : ((HListView) v).getFirstVisiblePosition() + 1;
                    ((HListView) v).smoothScrollToPositionFromLeft(posToGo, 0);
                }
                return false;
            }
        };

This approach not only uses less memory but it's generic regarding the number of child views, it's smoother and all the elements are clickable (not only the centred one)... well it's a ListView :)
Here's a screen shot of the final output example:

Take care.