View horizontal scroll inside ViewPager

Question

I have horizontal scroll pages, as in the Android market (ViewPager).

My problem is that I want to have a horizontal scrollable view in them with some images? Is it possible?

As of now, I get a small scroll in my view, and then the whole page scrolls.

Thank you for your time!

Answer 1

You need to expand HorizontalScrollView and intercept touch events. The following example worked for me:

 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 HorizontalScrollView in your XML layout, you need to use this custom view.

What helped me get this solution, this post

Answer 2

I reworked the solution and finally found a very simple way to implement it in the same way as it was done on GMail: the HorizontalScrollView will scroll until it reaches one of its edges. Then, the next time you scroll, the whole page scrolls.

All that is required is an override of the HorizontalScrollView to check the direction of the scroll along the edges, and also make sure that the 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); } 

Answer 3

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

In the above case, scrollVIew is applicable only for two images that are not related to edittext.

Otherwise:

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

Here scrollView is applicable only to listView.