Drag Listener : ANDROID

As you can see in the GIF above that to drag we need a connection between the person who is dragged and the person who is dragging. That is what we have to do, we need to change the view position as the thumb moves.

Figure 1: Dragging Example(GIF is taken from www.tenor.com thanks to Tenor)

Before moving forward you must have knowledge of the android Cartesian plane.

We can do a lot of things like

1. Dragging a shadow of the view.
2. Dragging a view with the thumb.
3. Dragging a view to drop at a position and perform an action.

and a lot more……

We will explore all of these methods.

End Results

And a lot more can be done, like moving a view along the path and whatnot.

But there is a little difference we never drag a view, what we drag is a shadow of the view, if we are just using built-in methods. What we can do is we can move the view along with the drag locations the way we want.

We will cover the top three points and the concept will get clear to you and I am sure covering these three points will help you to accomplish any use cases in the future.

Let’s Start.

1. Dragging Shadow

We can just simply use View.DragShadowBuilder and start dragging the shadow the way we want. DragShadowBuilder can be extended and we can create our own shadow.

With this much done we have achieved the results of first GIF.

2. Dragging View

The shadow gives the user a feeling that they are actually moving a view, but actually, they are moving a shadow. The default shadow is the exact copy of the view and provided by android but is a bit transparent.

First we will make our shadow completely transparent.

There are 6 Drag Event Actions which are as follows. You can click here, to read the official documentation.

a. DragEvent.ACTION_DRAG_STARTED

b. DragEvent.ACTION_DRAG_ENTERED

c. DragEvent.ACTION_DRAG_LOCATION

d. DragEvent.ACTION_DRAG_ENDED

e. DragEvent.ACTION_DRAG_EXISTED

f. DragEvent.ACTION_DROP

The point to be noted here is the location which we get from the event.

The event ACTION_DRAG_ENTERED denotes that the drag shadow has entered the view bounds, and the event ACTION_DRAG_EXISTED tells that the drag shadow has existed in the view bounds. Between these two events, the location which you receive from ACTION_DRAG_LOCATION will be the location of the drag point inside the view.

We will get the x and y coordinate from three events

1. ACTION_DRAG_STARTED
2. ACTION_DRAG_LOCATION
3. ACTION_DROP

Now we must know how do we have to translate our view, we need to store the initial position.

Now as we have the initial location and the current touch location we can translate our view, which we will do under the ACTION_DRAG_LOCATION.

The event ACTION_DRAG_LOCATION returns the location of the touch inside the view and to drag a view we must have to maintain the connection between the view and the touch point.

The point which we must understand is the coordinates that we receive are the position of the drag point within a view.

With this much done we have achieved the results of second GIF.

3. Dragging View to Delete

Now with all this done we can just pass the Rect object of another view and can check the intersection, of the delete view and moving view, and perform operations we like.

We can perform operations we like zooming in and out.

Now, let us talk about the locations which we get from the Drag Event

We have explored all the three methods stated above.

The work which we did in the three listeners

1. ACTION_DRAG_STARTED
2. ACTION_DRAG_LOCATION
3. ACTION_DROP

The same results can be achieved by View.OnTouchListeners, with the callback events MotionEvent.ACTION_UP, MotionEvent.ACTION_MOVE and MotionEvent.ACTION_DOWN.

We can also move a view along the path by actually moving the view and whatnot.

GitHub Link :-

https://github.com/hemsha-Medium/ViewDragListeners

Hope you learned and enjoyed! See you soon.

My very First Article!