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.
Related
I know it might be a silly question but I need to know after I implement this code:
recyclerView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
return false;
}
});
Why the recyclerView is still scrolling when the listener returns false? Or more precisely where is the scrolling behavior processed and handled?
I know that return true means the touch event is consumed and false means the touch event should get passed to the next view in view hierarchy. In my mind (which is possibly wrong), the return type shouldn't change the view behavior. Because when you don't process the onTouchListener, it means no touch event (including scrolling behavior) is processed so the recyclerView shouldn't be scrolling no matter the return type is true or false. What is wrong in my perception? I hope I'm clear enough.
I know that return true means the touch event is consumed and false means the touch event should get passed to the next view in view hierarchy
This is not true, the correct order when a View handle a touch event is:
View.dispatchTouchEvent() will be called first
Sends event to View.OnTouchListener.onTouch() if exits
If not consumed, process View.onTouchEvent()
In your case because your return false in View.OnTouchListener.onTouch(), it means you do not consume the event, so the event will be routed to View.onTouchEvent() of RecyclerView, which explains why the RecyclerView is still scrolling.
Solution 1
Return true in View.onTouchListener.onTouch() to show that the RecyclerView will consume all touch events.
recyclerView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
// I will consume all touch events,
// so View.onTouchEvent() will not be called.
return true;
}
});
Solution 2
Create a sub-class that extends from RecyclerView and return false in View.onTouchEvent() to show that the RecyclerView don't show interested in any touch event.
public class MyRecyclerView extends RecyclerView {
public MyRecyclerView(#NonNull Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
}
#Override
public boolean onTouchEvent(MotionEvent e) {
// I don't show interested in any touch event.
return false;
}
}
This is a great presentation about Android Touch System, you should take a look.
For practicing purpose, I am create a customized Tooltip control. To use the Tooltip control, a hosting UIControl (e.g. a Button) will be assigned to my Tooltip control, and I want my Tooltip control is be able to listen to the mouse press event on the hosting control (i.e. the Button), and show / dismiss itself accordingly.
I am having problem finding a way to listening to mouse events of the hosting control. I tried:
Set the Hosting Control's setOnTouchListener, this works, but it will override the existing OnTouchListener of the Hosting Control, thus undeserable.
Go to the Hosting Control's ViewGroup, and add a **Observer to the ViewGroup. But there is no way to observe the mouse event on the ViewGroup.
So is listening to other control's mouse event doable from a custom view, if so, what's the recommended way to implement it ?
Thanks.
I also thought of another way to do it, as followed:
Get the ViewGroup of the hosting control;
In the ViewGroup, add a transparent view to listen to the mouse event.
In the handler of mouse event of the transparent view, check whether the mouse event is happened on the Hosting Control.
If happened on the Hosting Control, respond correspondingly.
I will try this approach after I post my question, but it seems to be resource-intensive way of implementing something seemingly straightforward.
I will let you know if this approach works or not, any comment / thought is very appreciated.
Thanks ~!
Try to use this approach. I've already tried this approach with OnClickListener and it works great.
public class CustomButton extends Button {
private OnTouchListener outsideListener;
private OnTouchListener innerListener = new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (outsideListener != null) {
outsideListener.onTouch(v, event);
}
//some code here ...
}
};
#Override
public void setOnTouchListener(OnTouchListener listener) {
outsideListener = listener;
}
public CustomButton(Context context) {
super(context);
super.setOnTouchListener(innerListener);
}
public CustomButton(Context context, AttributeSet attrs) {
super(context, attrs);
super.setOnTouchListener(innerListener);
}
public CustomButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
super.setOnTouchListener(innerListener);
}
}
as I mentioned in my question, I thought of a way to implement what I wanted. I am sharing my way of implementing here. But still, it seems to be resource-intensive way of solving seemingly simple problem. If you have an easier solution, or any comment, please leave a comment. Much Appreciated ~!
My custom MaterialTooltip class:
public class MaterialToolTip {
/// Implementation
}
An example of how to use my MaterialToolTip class:
public class MainActivity extends AppCompatActivity {
MaterialToolTip toolTip;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// anchorButton is the button to which ToolTip will be added to.
Button anchorButton = (Button)findViewById(R.id.button);
this.toolTip = new MaterialToolTip.Builder(this)
//.anchorView property is used to specify the view that will use this tooltip
.anchorView(anchorButton)
.maxWidth(R.dimen.simpletooltip_max_width)
.build(); // that's all the consumer needs to do, as soon as the tooltip is attached to the View, the tooltip decided when to show / dismiss by listening to View's event.
}
}
Within my MaterialToolTip class:
Create a transparent view that listens to mouse event
#SuppressLint("ViewConstructor")
public class ToolTipPressInterceptView extends View {
OnAnchorViewMouseEventListener mListener;
ToolTipPressInterceptView(Context context, View anchorView) {
super(context);
//get the anchorView's onScreenLocation
int[] output = new int[2];
anchorView.getLocationOnScreen(output);
anchorViewRect = new RectF(output[0], output[1], output[0] + anchorView.getMeasuredWidth(), output[1] + anchorView.getMeasuredHeight()) ;
//set the dimension to match parent
this.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
this.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:{
if (anchorViewRect.contains(event.getX(), event.getY())){
mListener.onMouseEvent(AnchorViewMouseEventType.PRESSED);
}
}
case MotionEvent.ACTION_UP:{
if (anchorViewRect.contains(event.getX(), event.getY())){
mListener.onMouseEvent(AnchorViewMouseEventType.RELEASED);
}
}
}
return false;
}
});
}
}
Get the ViewGroup of the hosting control, and add the transparent view to the ViewGroup;
private MaterialToolTip(Builder builder){
//.. Other initialisation logic
//.. add the TransparentView to the ViewGroup;
mRootView = (ViewGroup)mAnchorView.getRootView();
ToolTipPressInterceptView view = new ToolTipPressInterceptView(mContext, mAnchorView);
//mAnchorViewTouchListener is listener to Mouse Event
view.setOnTouchListener(mAnchorViewTouchListener);
mRootView.addView(view);
}
If happened on the Hosting Control, respond correspondingly.
private final View.OnTouchListener mAnchorViewTouchListener = new
View.OnTouchListener(){
#Override
public boolean onTouch(View v, MotionEvent event){
int action = MotionEventCompat.getActionMasked(event);
switch(action) {
case (MotionEvent.ACTION_DOWN) :
// show
show();
case (MotionEvent.ACTION_UP) :
// dismiss
dismiss();
}
return false; //return false so the other handlers is able to
}
};
I am using a ViewPager with a TouchImageView inside it and it works great, (I have used this solution in many of my Android apps).
However I have an app for which there are many other controls on the same screen so they are all inside a scrollview control.
In this scenario I see the scrollview does not play nice and I am not able to pan within the zoomed image. When I use my finger to pan upward or downward the entire page scrolls instead of the image panning.
So here is what I am trying to do....
Inside the TouchImageView I detect Zoom Begin and Zoom End and have created an interface to make a callback to my Activity onZoomBegin() and onZoomEnd() methods.
In the onZoomBegin() method I want to disable the scrollview from responding to any touch events and in onZoomEnd() I can re-enable it.
So far here are the things I have tried doing in the onZoomBegin() method for which none are working....
scrollView.setEnabled(false);
scrollView.requestDisallowInterceptTouchEvent(true);
also I have tried the answer to a similar question which was to takeover the onTouchListener like such:
scrollView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
return true;
}
});
This does stop the scrollview from scrolling but the scrollview is still intercepting the touch events cause the image still will not pan up or down.
I've tried checking nestedScrollingEnabled in the layout designer, no joy....
I just want to know is there a way to totally disable a scrollview and then re-enable it from responding to touch events?
I found this answer on another question somewhere but by the time I realized it was the solution to my problem (answer to my question) then I lost reference to it. I will keep looking so I can edit this post to give credit where credit is due.
public class CustomScrollView extends ScrollView {
// true if we can scroll the ScrollView
// false if we cannot scroll
private boolean scrollable = true;
public CustomScrollView(Context context) {
super(context);
}
public CustomScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public void setScrollingEnabled(boolean scrollable) {
this.scrollable = scrollable;
}
public boolean isScrollable() {
return scrollable;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
// if we can scroll pass the event to the superclass
if (scrollable)
return super.onTouchEvent(ev);
// only continue to handle the touch event if scrolling enabled
return false; // scrollable is always false at this point
default:
return super.onTouchEvent(ev);
}
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
// Don't do anything with intercepted touch events if
// we are not scrollable
if (!scrollable)
return false;
else
return super.onInterceptTouchEvent(ev);
}
}
This part I just figured out for myself.... In the TouchImageView I added a callback interface which is called when a zoom begins and ends so in my Activity I only had to do this:
private class OnZoomListener implements TouchImageView.OnZoomListener {
#Override
public void onZoomBegin() {
isZoomed = true;
scrollView.scrollTo(0, 0);
scrollView.setScrollingEnabled(false); // <-- disables scrollview
hideImageControls();
sizeViewPager();
}
#Override
public void onZoomEnd() {
scrollView.setScrollingEnabled(true); // <-- enables scrollview
showImageControls();
isZoomed = false;
}
}
Hi i'm working on a Battleships game in Android and currently i'm trying to implement the ship positioning activity.
I have a custum view with onDraw representing the board on which you position the ships.
I want to be able to rotate ships by singletapping them and drag a ship by longclicking it. The thing is i can't just use onClick and onLongClick because i need to know where was the click on the canvas. I tried using onTouch but that didn't work. I also tried using GestureDetector but it just meseed up everything.
Do you have any suggestions on how to approach this logic?
i need to know where was the click on the canvas
You have a custom view, hence you can easily use GestureDetector.SimpleOnGestureListener. Just override the onTouchEvent() of your CustomView and use the onLongPress of the GestureDetector. I would suggest you to handle this within the CustomView itself, rather than do it in Activity or Fragment. This would keep things modularized.
You can follow the code below to get this done:
CustomView.java
public class CustomView extends View {
private GestureDetectorCompat mGestureDetector;
private LongPressGestureListener longPressGestureListener;
CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
longPressGestureListener= new LongPressGestureListener(this);
mGestureDetector = new GestureDetectorCompat(context, longPressGestureListener);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
mGestureDetector.onTouchEvent(event);
// Handle any other event here, if not long press.
return true;
}
}
LongPressGestureListener.java
public class LongPressGestureListener extends GestureDetector.SimpleOnGestureListener {
#Override
public void onLongPress(MotionEvent e) {
super.onLongPress(e);
// e will give you the location and everything else you want
// This is where you will be doing whatever you want to.
int eIndex = MotionEventCompat.getActionIndex(e);
float eX = MotionEventCompat.getX(e, eIndex);
float eY = MotionEventCompat.getY(e, eIndex);
Log.d("X:Y = " + eX + " : " + eY);
}
#Override
public boolean onDown(MotionEvent e) {
return true;
}
}
You will need to use View.OnTouchListener.
Set the touch listener to your canvas with view.setOnTouchListener(listener).
Implement your touch listener. You will need to implement the onTouch(View v, MotionEvent event) method. In this method, you will have access to the touch event, and you will be able to decide, if it is a simple click, a long press, etc, and do the appropriate action.
You can read more about it in this answer on SO.
I have a application that need event handling on a unusual way.
For my question, let me first explain a simple case that the current event handling system of Android don't fits for me.
Supposing that I have a FrameLayout (that I'll call ViewSwiper since now) that all Views added on it are MATCH_PARENT X MATCH_PARENT (that I'll call PageView), it's handles events by translating the actual View and replace it based on the direction of moving.
This component I already have done and work properly ( Using Animation to swipe views ).
But the problem is on that PageView I add on top of it, in case of ImageViews that return false on it's onTouchEvent, the ViewSwiper will handle the events and let another PageView enter the screen, but if I add a ScrollView on that, all the events will be consumed by the Scroll and the ViewSwiper will not have chance to replace the PageView.
So I figured out that returning false onTouchEvent of the ScrollView the parent can assume it's events, I wrote this sub-class of ScrollView to test it:
public class ScrollViewVertical extends ScrollView {
public ScrollViewVertical(Context context) {
super(context);
setOverScrollMode(OVER_SCROLL_ALWAYS);
setVerticalScrollBarEnabled(false);
}
public boolean onTouchEvent(MotionEvent evt) {
super.onTouchEvent(evt);
return false;
}
}
But returning false make any further events to get dispatched to the parent, but I need these events for VERTICAL scrolling, so I have the idea to return falses only if the user are moving HORIZONTAL, that's what my code looks like:
public class ScrollViewVertical extends ScrollView {
private MovementTracker moveTracker;
public ScrollViewVertical(Context context) {
super(context);
setOverScrollMode(OVER_SCROLL_ALWAYS);
setVerticalScrollBarEnabled(false);
moveTracker = new MovementTracker();
}
public boolean onTouchEvent(MotionEvent evt) {
if (moveTracker.track(evt))
if (moveTracker.getDirection() == Direction.HORIZONTAL)
return false;
return super.onTouchEvent(evt);
}
}
PS: MovementTracker will returns true on track() after some events and tell on which direction the user is moving.
But in that case, the ScrollView keep receiving events since it's returns true on the first events.
Any ideas on how can I handle the events on ViewSwiper when it's child returns false (even if some trues are returned).
PS: I can give more info about this if needed, and accept different solutions also.
Based on answers I tried the following:
#Override
public boolean dispatchTouchEvent(MotionEvent ev) {
onTouchEvent(ev);
return intercept;
}
public boolean onTouchEvent(MotionEvent evt) {
boolean x = super.onTouchEvent(evt);
if (moveTracker.track(evt)) {
intercept = moveTracker.getDirection() != Direction.VERTICAL;
if (!intercept)
getParent().requestDisallowInterceptTouchEvent(false);
}
return x;
}
Still nothing.
try this in onTouchEvent() of the scrollview
//if (evt.getAction() == MotionEvent.ACTION_MOVE) {
if (moveTracker.track(evt)){
if (moveTracker.getDirection() == Direction.VERTICAL){
//Or the direction you want the scrollview keep moving
getParent().requestDisallowInterceptTouchEvent(true);
}
}
return true;
Update
Please try the following to the custom Scrollview
#Override
public boolean dispatchTouchEvent(MotionEvent ev) {
super.dispatchTouchEvent(ev);
return false;
}
And nothing else
This way i assume the MotionEvent will perform on both views. And since they don't conflict (One is vertical the other one is Horizontal) this could work
Based on the answer from weakwire, I came to the following solution:
On ViewSwiper
#Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if(!super.dispatchTouchEvent(ev))
onTouchEvent(ev);
return true;
}
And on ScrollHorizontal I return false on dispatchTouchEvent when I don't need then anymore.