Android Question [Solved] How to drag panel outside CLV?

Marvel

Active Member
Licensed User
I'm looking for a way to drag a view into and out of a CLV to another panel at a go without lifting your finger.

Usecase
I have 30 puzzle piece views in a horizontal CLV. I want to drag each piece outside the CLV and place them on another panel.

Problem
Immediately you drag a piece out of the CLV, remove it and add it to another panel, you can't just get the touch information from the panel without lifting your finger. This defeats the purpose of dragging a piece from a CLV to a position on another panel at a go.

Below is what I'm working towards;
CLV drag outside.gif



Does anyone know a way to go about this or a better way to get this done?
 

Attachments

  • DragOutsideCLV.zip
    10.5 KB · Views: 123

Brian Dean

Well-Known Member
Licensed User
Longtime User
You could cover the entire screen with a transparent panel to receive the touch events and calculate which CLV element was below the down touch. You could then adjust that element's position to follow the touch movement and when it crossed a threshold in the target panel change the panel parent. I think.
 
Upvote 0

Marvel

Active Member
Licensed User
You could cover the entire screen with a transparent panel to receive the touch events and calculate which CLV element was below the down touch. You could then adjust that element's position to follow the touch movement and when it crossed a threshold in the target panel change the panel parent. I think.
I tried this. The problem is that you will not be able to scroll the clv as the panel receives the touch event instead of the clv
 
Upvote 0

Alexander Stolte

Expert
Licensed User
Longtime User
The problem is that you will not be able to scroll the clv as the panel receives the touch event instead of the clv
Solution for this:
B4X:
Private objPages As Reflector
objPages.Target = xclv.sv
objPages.SetOnTouchListener("xclv_Touch")
B4X:
Private Sub xclv_Touch(ViewTag As Object, Action As Int, X As Float, y As Float, MotionEvent As Object) As Boolean
'Do something
End Sub
 
Upvote 0

Marvel

Active Member
Licensed User
Solution for this:
B4X:
Private objPages As Reflector
objPages.Target = xclv.sv
objPages.SetOnTouchListener("xclv_Touch")
B4X:
Private Sub xclv_Touch(ViewTag As Object, Action As Int, X As Float, y As Float, MotionEvent As Object) As Boolean
'Do something
End Sub
Not sure I understand how this will help. I tried it earlier too. If I remember correctly, once I set a touch listener to scroll view wrapped by the clv, it becomes impossible to scroll the clv
 
Upvote 0

Alexander Stolte

Expert
Licensed User
Longtime User
Not sure I understand how this will help. I tried it earlier too. If I remember correctly, once I set a touch listener to scroll view wrapped by the clv, it becomes impossible to scroll the clv
i use this code in the AS WheelPicker and as you can see you can scroll all xclv.
 
Upvote 0

Marvel

Active Member
Licensed User
i use this code in the AS WheelPicker and as you can see you can scroll all xclv.
I just tried it again now and it's working. I probably missed something when I tried it before.
Thanks. I'll see if it solves my problems totally
 
Last edited:
Upvote 0

Marvel

Active Member
Licensed User
I just tried it again now and it's working. I probably missed something when I tried it before.
Thanks. I'll see if it solves my problems totally
False alarm. I remember why I said it does not work now. It works with an emulator when using the mouse to scroll but not on an actual phone. The transparent panel on top is the one getting the touch event instead.
 

Attachments

  • DragOutsideCLV_2.zip
    10.3 KB · Views: 131
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
??
Library ViewsEx

see:
etc.
 
Upvote 0

Brian Dean

Well-Known Member
Licensed User
Longtime User
Sorry for the delay - I am in a different time zone. I am going back to your post #5.
If I remember correctly, once I set a touch listener to scroll view wrapped by the clv, it becomes impossible to scroll the clv
If that is what you did then you are setting the listener to the wrong control. The listener should be set for the overlay panel. Then, as @Alexander Stolte says, the touch handler will issue a return value which can be set False to allow the event to pass to the underlying scroller.

Here is a "proof of concept" using a scrollview rather than a CSV. I hope this helps and I have not misread your problem.
 

Attachments

  • Overlay.zip
    9.2 KB · Views: 111
Upvote 0

Marvel

Active Member
Licensed User
Sorry for the delay - I am in a different time zone. I am going back to your post #5.

If that is what you did then you are setting the listener to the wrong control. The listener should be set for the overlay panel. Then, as @Alexander Stolte says, the touch handler will issue a return value which can be set False to allow the event to pass to the underlying scroller.

Here is a "proof of concept" using a scrollview rather than a CSV. I hope this helps and I have not misread your problem.
Thanks Brian. I see where my mistake comes from now. I had a misconception of how the touchlistener works.
 
Upvote 0

Marvel

Active Member
Licensed User
Now another problem is that when using SetOnTouchListener with the return value set to False, it only returns ACTION_DOWN, but I need to get ACTION_UP and ACTION_MOVE.

At this point, I think I have to find another solution
 
Upvote 0

Brian Dean

Well-Known Member
Licensed User
Longtime User
Hi, @Marvel. You have seen my other thread where I tried to follow up this unsolved situation - you can check the reply.

It had occurred to me that, even if you do find a way to pass the touch events to the underlying scrollable view, you are going to have to solve a usability problem. When the User touches the screen and moves the contact point how will your app know whether the User intends to scroll the view or drag a panel? Without knowing anything about your layout design, it seems to me that one solution might be to partition the screen so that one area activates scrolling and another area covers the movable panels. This would allow you to differentiate the User's intention. If so then the overlay panel would not have to cover the entire screen and you would avoid the problem of suppressing scroll gestures.
 
Upvote 0

Marvel

Active Member
Licensed User
Hi, @Marvel. You have seen my other thread where I tried to follow up this unsolved situation - you can check the reply.

It had occurred to me that, even if you do find a way to pass the touch events to the underlying scrollable view, you are going to have to solve a usability problem. When the User touches the screen and moves the contact point how will your app know whether the User intends to scroll the view or drag a panel? Without knowing anything about your layout design, it seems to me that one solution might be to partition the screen so that one area activates scrolling and another area covers the movable panels. This would allow you to differentiate the User's intention. If so then the overlay panel would not have to cover the entire screen and you would avoid the problem of suppressing scroll gestures.
Thanks, I was following the conversation.
Your suggestion about partitioning the screen would have been the best solution, infact that was the first thing I tried but unfortunately it would not work for my use case.

For now, I'll need to find another way for users to interact with my app.

Just for exploration sake, one way I was thinking of is to manipulate the scrollview offset of the underlying clv by detecting left/right swipe on the overlay panel. It's complicated and may cause other issues but I'll explore it. I've seen other apps achieve dragging outside a clv onto other parts of the screen, so it must be possible somehow.

Overall, thanks so much for your help.
 
Upvote 0
Top