Horizontal Scroll View inside ViewPager

Question

I have horizontal scrolling pages as in the android market (ViewPager).

My problem is that i want to have a Horizontal Scrolling View in them with some images?Is that possible??

As now,i m getting a little scroll in my view and then the whole page is scrolling.

Thanks for your time!

watch [this](http://stackoverflow.com/questions/7774642/scroll-webview-horizontally-inside-a-viewpager) answer. But instead of custom WebView in that answer, you may need to extend your HorizontalScrollingView. — grine4ka, Oct 30 '13 at 09:19

score 20 · Answer 1 · answered Jul 18 '12 at 06:08

20

You need to extend the HorizontalScrollView and intercept touch events. What worked for me was the following sample:

public class MyScrollView extends HorizontalScrollView {

    public MyScrollView(Context p_context, AttributeSet p_attrs)
    {
        super(p_context, p_attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent p_event)
    {
        return true;
    }

    @Override
    public boolean onTouchEvent(MotionEvent p_event)
    {
        if (p_event.getAction() == MotionEvent.ACTION_MOVE && getParent() != null)
        {
            getParent().requestDisallowInterceptTouchEvent(true);
        }

        return super.onTouchEvent(p_event);
    }
}

Then, instead of using the HorizontalScrollView in your layout XML, you need to use this custom view.

What helped me get to this solution is this post

answered Jul 18 '12 at 06:08

Muzikant

8,070
5
54
88

It works for me, other solutions don't! But it seems it disables click handling on buttons inside your custom scrollview. Any idea? – user1365836 Nov 06 '12 at 11:19
@user1365836 Yeah... that can be a bit messy... What I did was using getHitRect and find the exact button pressed and then calling its onClick function – Muzikant Nov 07 '12 at 02:29
7

If the only thing you want to do is allow scrolling but still allow the user to click the elements inside, you just have to control everything from inside onInterceptTouchEvent(). https://gist.github.com/brandondenney/b8ddd655664eb295129d – Brandon Feb 07 '13 at 17:29
I have several fragments inside a ViewPager which allows swiping left and right. The problem is in one of the fragments I have a custom chart view that uses touch events to determine where to draw a vertical line (the line acts as a "cursor" along chart's x-axis). Dragging the cursor horizontally was causing the ViewPager to intercept this as a page swipe. So I overrode the chart's onInterceptTouchEvent() (see @Brandon's comment above), and that resolved the issue perfectly: touches INSIDE chart drag the cursor, yet touches OUTSIDE chart still swipes the page as it should. Thank you Brandon!! – The Awnry Bear Apr 01 '13 at 02:09
@Muzikant Can you give me an example about `onClick()`. – Ali Jun 22 '13 at 13:28

3c71 · Answer 2 · 2013-01-09T13:47:48.813

I've reworked a solution and finally found a very simple way to implement it the same way it's been done on GMail: the HorizontalScrollView will scroll until it reaches one of its edges. Then on next scrolling, the whole page will scroll.

All it required was overriding the HorizontalScrollView to check scroll direction vs edges and also make sure content can actually scroll.

@Override
public boolean onTouchEvent(MotionEvent ev) 
{
    if (no_scrolling)
        return false;

    //  Standard behavior
    //
    return super.onTouchEvent(ev);
}

boolean no_scrolling = false;
float old_x, old_y;
@Override
public boolean onInterceptTouchEvent(MotionEvent ev)
{
    int action = ev.getActionMasked();
    Log.d(at_data.TAG, "HSV scroll intercept: " + String.format("0x%08x", action));

    if (action == MotionEvent.ACTION_DOWN)
    {
        old_x = ev.getX();
        old_y = ev.getY();
        no_scrolling = false;

    }
    else if (action == MotionEvent.ACTION_MOVE)
    {
        float dx = ev.getX() - old_x;
        float dy = ev.getY() - old_y;

        if (Math.abs(dx) > Math.abs(dy) && dx != 0)
        {
            View hsvChild = getChildAt(0);
            int childW = hsvChild.getWidth();
            int W = getWidth();

            Log.d(at_data.TAG, "HSV " + childW + " > " + W + " ? dx = " + dx + " dy = " + dy);
            if (childW > W)
            {
                int scrollx = getScrollX();
                if ( (dx < 0 && scrollx + W >= childW) || (dx > 0 && scrollx <= 0))
                {
                    Log.d(at_data.TAG, "HSV Wider: on edge already");
                    no_scrolling = true;
                    return false;
                }
                else
                {
                    Log.d(at_data.TAG, "HSV Wider: can scroll");
                    no_scrolling = false;
                }
            }
            else
            {
                Log.d(at_data.TAG, "HSV cannot scroll in desired direction");
                no_scrolling = true;
            }
        }
    }

    //  Standard behavior
    //
    return super.onInterceptTouchEvent(ev);
}

score 0 · Answer 3 · edited Dec 30 '12 at 12:06

<Linearlayout>
    <linearlayout>
        <scrollView>
           <ImageView1></ImageView>
           <ImageView2></....>
        </scrollView>
    </Linearlayout>
    <EditText>
</Linearlayout>

In the above case, scrollVIew is applicable for only the two images not for the edittext.

In other case:

 <Linearlayout>
    <linearlayout>
        <scrollView>
            here listVIew with Images using listView adapter
        </scrollView>
    </Linearlayout>
    <EditText>
</Linearlayout>

Here scrollView is applicable for only listView.

Horizontal Scroll View inside ViewPager

3 Answers3

Linked