Develop Reference

Android view handle scroll gestures but ignore touch up

I have a use case where there are two views on screen one of which is partially covering another. The one that is above needs to handle scroll events and ignore touch up. The partially obscured view should handle touch up events, including those that happen in the area of overlap that are ignored by the obscuring view.
a simplified example layout is below.
the closest i've come uses GestureDetectorCompat on the top view returning true in onDown (otherwise i don't get any further events,) true in onScroll, and false in onSingleTapUp. i have tried several things in the view behind all with the same results: i get taps on the un-obscured section, but the top view eats all of the motion events for the obscured portion.

What you want to do is not as straightforward as you would probably like because of how Android handles touch event flow. So let me set the stage with a little context first:
The reason this is a tricky proposition is because Android defines a gesture as all the events between an ACTION_DOWN and the corresponding ACTION_UP. ACTION_DOWN is the only point at which the framework is searching for a touch target (which is why you have to return true for that event to see any others). Once a suitable target has been found, ALL the remaining events in that gesture will be delivered directly to that view and nobody else.
This means that if you want a single event to go to a different destination, you will have to capture and redirect it yourself. All touch events flow from parent views to child views in one long chain. Parent views control when and how touch events move from one child to the next, including modifying the coordinates of the MotionEvent so the match the local bounds of each child view. Because of this, the most effective place to manipulate touch events is in a custom ViewGroup parent implementation.
The following example comes with a big bag of assumptions. Basically, I'm assuming that both views are nothing more than a dumb View with no internal wishes to handle touch (which is probably wrong). Applying this code to other, more complex, child views may requires some rework...but this should get you started.
The best place to force touch redirection is in a common parent of the two views, since it is the origin of the touch for both (as described above).
public class TouchUpRedirectLayout extends FrameLayout implements View.OnTouchListener {
private int mTargetViewId;
private View mTargetView;
private boolean mTargetTouchActive;
private GestureDetector mGestureDetector;
public TouchUpRedirectLayout(Context context) {
super(context);
init(context);
}
public TouchUpRedirectLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public TouchUpRedirectLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
private void init(Context context) {
mGestureDetector = new GestureDetector(context, mGestureListener);
}
public void setTargetViewId(int resId) {
mTargetViewId = resId;
updateTargetView();
}
#Override
protected void onFinishInflate() {
super.onFinishInflate();
//Find the target view, if set, once inflated
updateTargetView();
}
//Set the target view to handle gestures
private void updateTargetView() {
if (mTargetViewId > 0) {
mTargetView = findViewById(mTargetViewId);
if (mTargetView != null) {
mTargetView.setOnTouchListener(this);
}
}
}
private Rect mHitRect = new Rect();
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
switch (event.getActionMasked()) {
case MotionEvent.ACTION_UP:
if (mTargetTouchActive) {
mTargetTouchActive = false;
//Validate the up
int index = indexOfChild(mTargetView) - 1;
if (index < 0) {
return false;
}
for (int i=index; i >= 0; i--) {
final View child = getChildAt(i);
child.getHitRect(mHitRect);
if (mHitRect.contains((int) event.getX(), (int) event.getY())) {
//Dispatch and mark handled
return child.dispatchTouchEvent(event);
}
}
//Steal this event
return true;
}
//Allow default processing
return false;
default:
//Allow default processing
return false;
}
}
//Receive touch events from the target (scroll handling) view
#Override
public boolean onTouch(View v, MotionEvent event) {
mTargetTouchActive = true;
return mGestureDetector.onTouchEvent(event);
}
//Handle gesture events in target view
private GestureDetector.SimpleOnGestureListener mGestureListener = new GestureDetector.SimpleOnGestureListener() {
#Override
public boolean onDown(MotionEvent e) {
Log.d("TAG", "onDown");
return true;
}
#Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
Log.d("TAG", "Scrolling...");
return true;
}
};
}
This example layout (I subclassed FrameLayout, but you could choose whichever layout you are using currently as the parent of the two views) tracks a single "target" view for the purposes of notifying the "down" and "scroll" gestures. It also notifies us when a gesture is in play that will include an ACTION_UP event that we need to capture and forward to another obscured view.
When an up event occurs, we use the intercept functionality of ViewGroup to direct that event away from the original "target" view, and dispatch it to the next available child view whose bounds fit the event. You could just as easily hard-code the second "obscured" view here as well, but I've written it to dispatch to any and all possible children underneath...similar to the way ViewGroup handles touch delegation to children in the first place.
Here is an example layout:
<com.example.touchoverlaptest.app.TouchUpRedirectLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/view_root"
android:layout_width="match_parent"
android:layout_height="400dp"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.example.touchoverlaptest.app.MainActivity">
<View
android:id="#+id/view_obscured"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#7A00" />
<View
android:id="#+id/view_overlap"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_gravity="bottom"
android:background="#70A0" />
</com.example.touchoverlaptest.app.TouchUpRedirectLayout>
...and Activity with the view in action:
public class MainActivity extends Activity implements View.OnTouchListener {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TouchUpRedirectLayout layout = (TouchUpRedirectLayout) findViewById(R.id.view_root);
layout.setTargetViewId(R.id.view_overlap);
layout.findViewById(R.id.view_obscured).setOnTouchListener(this);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
Log.i("TAG", "Obscured touch "+event.getActionMasked());
return true;
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
The target view will fire all the gesture callbacks, and the obscured view will receive the up events. The OnTouchListener in the activity is simply to validate that the events are delivered.
If you would like more detail about custom touch handling in Android, here is a video link to a presentation I did recently on the topic.

Two dimensional scrolling... a suggestion that needs feedback

While spending a copious amount of time googling for a relatively simple solution to my problem I found this as a solution for two-dimensional scrolling. I have a a horizontalscrollview nested in a scrollview. I fiddled with this in a few ways and was unsuccessful in making anything functional. Does anyone have any ideas on how to make a concept like this work?
Scrollview scrollY = (ScrollView)findViewById(R.id.scrollY);
LinearLayout scrollYChild = (LinearLayout)findViewById(R.id.scrollYChild);
#Override
public boolean dispatchTouchEvent(MotionEvent event) {
scrollYChild.dispatchTouchEvent(event);
scrollY.onTouchEvent(event);
return true;
}
I have also found this: http://blog.gorges.us/2010/06/android-two-dimensional-scrollview/ but I'm don't understand at all how to implement such a long piece of code properly.
It doesn't make much sense to me that two-dimensional scrolling is inherent in a webview but nonexistent elsewhere... Any and all help is appreciated.
Edit: How exactly does this work when zoomed in on an image in the gallery. Surely there has to be a way to implement that same functionality here.

Im not sure about the blog you have posted, this was my solution:
/**
* This class disables Y-motion on touch event.
* It should only be used as parent class of HorizontalScrollView
*/
public class ParentScrollView extends ScrollView {
private GestureDetector mGestureDetector;
View.OnTouchListener mGestureListener;
#SuppressWarnings("deprecation")
public ParentScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
mGestureDetector = new GestureDetector(new YScrollDetector());
setFadingEdgeLength(0);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if( mGestureDetector.onTouchEvent(ev)&super.onInterceptTouchEvent(ev)){
return true;
}else{
return false;
}
}
// Return false if we're scrolling in the x direction
class YScrollDetector extends SimpleOnGestureListener {
#Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
if(Math.abs(distanceY) > Math.abs(distanceX)) {
return true;
}
return false;
}
}
}
XML:
<com.example.Views.ParentScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<HorizontalScrollView
android:id="#+id/tlDBtable"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</HorizontalScrollView>
</com.example.Views.ParentScrollView>
Basically the parent scrollview which only scrolls veritcal will be disabled because you will use a new custom class. Then you put a HScrollview within the scroll view. The Parentscroll view will pass the touch even if its not vertical to the horiszontalscroll view which makes it 2D scrolling effect.

Using Android's SlidingPaneLayout with ViewPager

I'm trying to use the SlidingPaneLayout with ViewPager, like so
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scientific_graph_slidingPaneLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--
The first child view becomes the left pane.
-->
<ListView
android:id="#+id/left_pane"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left" />
<!--
The second child becomes the right (content) pane.
-->
<android.support.v4.view.ViewPager
android:id="#+id/scientific_graph_viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</android.support.v4.widget.SlidingPaneLayout>
The SlidingPaneLayout slides when I pull from the left edge; however, I can't seem to get the ViewPager to slide when I pull from the right edge. When I pull from the right edge, it slides very little and then snaps back.
Is doing this even possible? Is there a better way to do this?
I found that by moving my finger up and the to the left, I can swipe the view pager.

The root cause is the implementation of #onInterceptTouchEvent. An older implementation of SlidingPaneLayout made a call to #canScroll, which would check if the touch target could scroll, and if so, would scroll the touch target instead of sliding the panel. The most recent implementation looks like it always intercepts the motion event, once the drag threshold exceeds the slop, except in the case where the X drag exceeds the slop and the Y drag exceeds the X drag (as noted by the OP).
One solution to this is to copy SlidingPaneLayout and make a few changes to get this to work. Those changes are:
Modify the ACTION_MOVE case in #onInterceptTouchEvent to also check #canScroll,
if (adx > slop && ady > adx ||
canScroll(this, false, Math.round(x - mInitialMotionX), Math.round(x), Math.round(y)))
{ ... }
Modify the final check in #canScroll to special case ViewPager. This modification could also be done in a subclass by overriding #canScroll, since it doesn't access any private state.
protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) {
...
/* special case ViewPagers, which don't properly implement the scrolling interface */
return checkV && (ViewCompat.canScrollHorizontally(v, -dx) ||
((v instanceof ViewPager) && canViewPagerScrollHorizontally((ViewPager) v, -dx)))
}
boolean canViewPagerScrollHorizontally(ViewPager p, int dx) {
return !(dx < 0 && p.getCurrentItem() <= 0 ||
0 < dx && p.getAdapter().getCount() - 1 <= p.getCurrentItem());
}
There is likely a more elegant way to do this by fixing the ViewDragHelper, but this is something Google should address in a future update of the support package. The hacks above should get the layout working with ViewPagers (and other horizontally scrolling containers?) now.

Building off of #Brien Colwell's solution, I've written a custom subclass of SlidingPaneLayout that handles this for you, and also adds edge swiping so that when the user scrolls far to the right, they don't have to scroll all the way back to the left in order to open the pane.
Since this is a subclass of SlidingPaneLayout, you don't need to change any of your references in Java, just make sure that you instantiate an instance of this class (usually in your XML).
package com.ryanharter.android.view;
import android.content.Context;
import android.support.v4.view.MotionEventCompat;
import android.support.v4.widget.SlidingPaneLayout;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ViewConfiguration;
/**
* SlidingPaneLayout that, if closed, checks if children can scroll before it intercepts
* touch events. This allows it to contain horizontally scrollable children without
* intercepting all of their touches.
*
* To handle cases where the user is scrolled very far to the right, but should still be
* able to open the pane without the need to scroll all the way back to the start, this
* view also adds edge touch detection, so it will intercept edge swipes to open the pane.
*/
public class PagerEnabledSlidingPaneLayout extends SlidingPaneLayout {
private float mInitialMotionX;
private float mInitialMotionY;
private float mEdgeSlop;
public PagerEnabledSlidingPaneLayout(Context context) {
this(context, null);
}
public PagerEnabledSlidingPaneLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public PagerEnabledSlidingPaneLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
ViewConfiguration config = ViewConfiguration.get(context);
mEdgeSlop = config.getScaledEdgeSlop();
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (MotionEventCompat.getActionMasked(ev)) {
case MotionEvent.ACTION_DOWN: {
mInitialMotionX = ev.getX();
mInitialMotionY = ev.getY();
break;
}
case MotionEvent.ACTION_MOVE: {
final float x = ev.getX();
final float y = ev.getY();
// The user should always be able to "close" the pane, so we only check
// for child scrollability if the pane is currently closed.
if (mInitialMotionX > mEdgeSlop && !isOpen() && canScroll(this, false,
Math.round(x - mInitialMotionX), Math.round(x), Math.round(y))) {
// How do we set super.mIsUnableToDrag = true?
// send the parent a cancel event
MotionEvent cancelEvent = MotionEvent.obtain(ev);
cancelEvent.setAction(MotionEvent.ACTION_CANCEL);
return super.onInterceptTouchEvent(cancelEvent);
}
}
}
return super.onInterceptTouchEvent(ev);
}
}

Limited Swipe Area Android

I need to limit the swipe area inside a ViewPager. For example, if the user make the gesture to swipe on top half space of the screen it swipe to the next fragment, but if the user make the gesture on the bottom half of the screen it do nothing.
There is a way to do that?

This might be a what you need:
public class MyPager extends ViewPager {
public MyPager(Context context) {
super(context);
}
public MyPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if(inNeutralArea(ev.getX(),ev.getY())){
//--events re-directed to this ViewPager's onTouch() and to its child views from there--
return false;
}else {
//--events intercepted by this ViewPager's default implementation, where it looks for swipe gestures--
return super.onInterceptTouchEvent(ev);
}
}
private boolean inNeutralArea(float x, float y) {
//--check if x,y inside non reactive area, return true/false accordingly--
return false;
}
}
Use this MyPager class in layout xml in place of ViewPager.

Don't forget to do to the same in overriding the onTouchEvent, otherwise the ViewPager will still scroll on Android 4.1 and later. Caught me ofguard and took me a while to figure it out.

gesture issue with mapview in viewpager page

My app's main interface is a viewpager where the user just slides the pages horizontally to get to the various pages. One of the pages has a google mapview (pasted below). My problem is that if the user is on the map page and uses a horizontal slide gesture, the page slides to the next page instead of the map moving sideways. It's as if the viewpager is getting the gesture before the map.
If the user is clever and begins sliding the map in a diagonal or vertical direction the map begins moving and then the gesture can continue horizontally. But I would prefer the map move instead of the page on a simple horizontal slide gesture. The page can always be slid using the textview.
Is there any way I can make this happen?
thanks,
Gary
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ContentPanel"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/tvMAP"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Map"
style="#style/bigtype" />
<com.google.android.maps.MapView
android:id="#+id/mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:apiKey="mykeygoeshere"
android:clickable="true" />
</LinearLayout>

Of course there is:
public class CustomViewPager extends ViewPager {
public CustomViewPager(Context context) {
super(context);
}
public CustomViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) {
if(v instanceof MapView){
return true;
}
return super.canScroll(v, checkV, dx, x, y);
}
}
This will make the map ignore all the slides inside the map and just care about the slides/draggs outside the map. Hope it helps. (I do this right now for a webview with horizontal scroll)
EDIT: Forgot to mention that instead of the ViewPager you need to use the CustomViewPager in yout layout.
<com.yourpackage.CustomViewPager
android:id="#+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

If using Google Maps V2, use
scrollingView.getClass().getPackage().getName().startsWith("maps.")
in canScroll method:
#Override
protected boolean canScroll(View scrollingView, boolean checkV, int dx, int x, int y) {
if (scrollingView.getClass().getPackage().getName().startsWith("maps.")) {
return true;
}
return super.canScroll(scrollingView, checkV, dx, x, y);
}
Becase scrollingView is maps.j.b when using maps v2.
Also in my code, these classes are used:
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;

for ViewPager2, you can solve this issue by creating a custom view that extends, google's mapView. and override the dispatchTouchEvent method. The code should be as below
class CustomMapView: MapView {
private var dontIntercepMove = false
override fun dispatchTouchEvent(ev: MotionEvent?): Boolean {
when (ev?.action) {
MotionEvent.ACTION_DOWN -> dontIntercepMove = ev.x < LEFT_SCROLL_OFFSET * width || ev.x > RIGHT_SCROLL_OFFSET * width
MotionEvent.ACTION_MOVE -> if (!dontIntercepMove && parent != null) parent.requestDisallowInterceptTouchEvent(true)
}
return super.dispatchTouchEvent(ev)
}
}
This will allow the mapview to scroll when you swipe on it.. and when you swipe on the edges the viewpager will work