Android horizontal scrollview behave like iPhone (paging)

Question

I have a LinearLayout inside a HorizontalScrollView. The content is just a image. While scrolling, I need to achieve the same behavior you get when setting the paging option

Answer 1

The new Compatibility Package (revision 3) in Android added a ViewPager which does that.

http://developer.android.com/sdk/compatibility-library.html

Answer 2

So, my solution is:

1. Intercept the onTouch event and calculate whether the page should change to the next or keep on the current
2. Inherit from HorizontalScrollView and override the method computeScroll

The method computeScroll the called to move the list. By default I suppose it's implemented to decelerate with a certain ratio... Since I don't want this motion, I just override it without specifing a body.

The code for the event handler is:

_scrollView.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if(event.getAction() == MotionEvent.ACTION_UP)
            {
                float currentPosition = _scrollView.getScrollX();
                float pagesCount = _horizontalBar.getChildCount();
                float pageLengthInPx = _horizontalBar.getMeasuredWidth()/pagesCount;
                float currentPage = currentPosition/pageLengthInPx;

                Boolean isBehindHalfScreen =  currentPage-(int)currentPage > 0.5;

                float edgePosition = 0;
                if(isBehindHalfScreen)
                {
                    edgePosition = (int)(currentPage+1)*pageLengthInPx;
                }
                else
                {
                    edgePosition = (int)currentPage*pageLengthInPx;
                }

                _scrollView.scrollTo((int)edgePosition, 0);
            }

            return false;
        }
    });

And in my inherited HorizontalScrollView

@Override
    public void  computeScroll  (){
        return;
    }

Answer 3

i found another way to get the same effect and i think is more readable. Here is the way:

@Override
        public boolean onTouch(View v, MotionEvent event) {
            if(event.getAction() == MotionEvent.ACTION_UP)
            {
                float currentPosition = hsv.getScrollX();
                float pagesCount = hsv.getChildCount();
                float pageLengthInPx = hsv.getMeasuredWidth()/pagesCount;

                int page = (int) (Math.floor((currentPosition - pageLengthInPx / 2) / pageLengthInPx) + 1);
                hsv.scrollTo((int) (page * pageLengthInPx), 0);
            }

            return false;
        }

Answer 4

I came across a nice solution here:

Horizontal Pager

this is a cleaned up GitHub version of the code found here:

Real View Switcher

It may seem like overkill for just using it on images, but this solution allows for infinite paging with using a little trick (ie: when on first page you can scroll back to last page and when on last page you can scroll forward to first page). It also allows you to have an unknown number of pages and dynamically generate content by using another little trick. Please see my comment in the second link here

for details on how i accomplished this.

Hope this helps.