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

Marvel · Dec 29, 2021

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;

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

Brian Dean · Dec 29, 2021

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.

Marvel · Dec 29, 2021

Brian Dean said:
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

Alexander Stolte · Dec 30, 2021

Marvel said:
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

Marvel · Dec 30, 2021

Alexander Stolte said:

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

Alexander Stolte · Dec 30, 2021

Marvel said:
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.

Marvel · Dec 30, 2021

Alexander Stolte said:
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

Marvel · Dec 30, 2021

Marvel said:
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.

TILogistic · Dec 30, 2021

??
Library ViewsEx

B4A - ViewsEx

see:

[B4X] CLVSwipe - xCustomListView Swipe actions and pull to refresh

CLVSwipe is a class that adds "swipe actions" and pull to refresh features to the standard xCustomListView library. It is compatible with B4A and B4i (currently not with B4J). Both features are optional. Using it is simple: 1. Add the class to your project. It depends on XUI...

www.b4x.com

CLVNested - Allows nesting CLVs

Putting a CLV inside another one will not work out of the box. The inner list will not be scrollable. CLVNested makes it possible. Limitations: - One list per item. - The user will not be able to interact with views added to the inner list. The basic features of the inner list will work. -...

www.b4x.com

TablePanel - Adds swipe navigation to B4XTable

With TablePanel class, the user can switch pages by swiping right or left over the bottom of the table. Usage: Initialize TablePanel and load the layout to TablePanel instead of the activity: tp.Initialize(Me, "tp", Activity) tp.base.LoadLayout("1") Handle the swipe event: Sub tp_Swipe...

www.b4x.com

[B4X] B4XDrawer - sliding drawer

Edit: Cross platform example based on B4XPages https://www.b4x.com/android/forum/threads/b4x-b4xpages-b4xdrawer.120246/ A class that implements a sliding menu. Unlike the nice jfeinstein SlidingMenu library the drawer covers the activity instead of pushing it. It is similar to the various...

www.b4x.com

etc.

Marvel · Dec 30, 2021

Thanks. I'll look into viewsEx. Hopefully it'll work

Brian Dean · Dec 30, 2021

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.

Marvel · Dec 30, 2021

Brian Dean said:
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.

Marvel · Dec 30, 2021

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

Brian Dean · Dec 31, 2021

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.

Marvel · Dec 31, 2021

Brian Dean said:
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.

TILogistic · Dec 31, 2021

Do I check the ViewsEx library?

Marvel · Dec 31, 2021

oparra said:
Do I check the ViewsEx library?

Yes. ViewsEx also only provide the ACTION_DOWN motion event in this case. I think it' an OS thing

Marvel · Jan 1, 2022

I've managed to solve it with GestureDetector.

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

Active Member

Attachments

Well-Known Member

Active Member

Expert

Active Member

Expert

Active Member

Active Member

Attachments

Expert

Active Member

Well-Known Member

Attachments

Active Member

Active Member

Well-Known Member

Active Member

Expert

Active Member

Active Member

Attachments

Similar Threads

Privacy & Transparency

Privacy & Transparency