Long Press and Drag with Low Level Events

What you will learn: You will learn how to implement a 'long press and drag' operation on an icon, or if an icon is not present where the long press occurs, a context menu will be popped instead. This is intended to emulate the Home page behavior on some devices, where you can ‘detach’ an icon on long press or pop a ‘widgets/wallpaper/whatever’ context menu if you are long pressing the background.

Target readers - this tutorial is for you if:

• You are a game (or other performance-driven) developer looking for low level control.
• You are having trouble getting your long presses and touch event handlers to coexist.
• You don't want to or can't use GestureDetector for your particular application.

Tested with Android 2.0 and 2.0.1 platforms on Droid handset (firmware: Android 2.0.1).

Problems/Questions: Just ask...

Difficulty: 1.5 of 5

What it looks like:


Background: This code is based on my previous tutorials:

http://www.anddev.org/large_image_scrolling_using_low_level_touch_events-t11182.html
http://www.anddev.org/long-press_and_scroll_large_images_using_low_level_events-t11285.html

In those tutorials I explained how to use low level touch events to handle long-press and screen scrolling. My implementation was such that a long-press would end the current gesture. In other words, once you long pressed you would no longer be able to scroll. My thinking was that real world applications would mostly want to pop a context menu or similar, and that would start a new gesture.

However, boyFromAuz came up with an excellent example of a real world application where this would not be the case. He specifically asked about emulating the Home page functionality whereby a long-press on an icon would ‘detach’ it and the icon would then become draggable.

Here you are Nick . For you, and those interested in this kind of behavior; I’ve modified the code from the second tutorial link above, and since you specifically mentioned Home page emulation I’ve also included code that will cause a long press on the background to pop a context menu.

For those who don’t want to wade through both tutorials I’ve listed the whole procedure below for getting this code to build. All explanations are in those tutorials though and won’t be repeated here. In particular I will be referring to that tutorial’s long press handler.

The big change to the new code is that I’ve replaced the background scrolling with icon dragging. You can certainly have both, but that would complicate the code beyond what I’m trying to present.

The handler we use to trigger long presses doesn’t change, only what happens once we successfully trigger a long press event. In particular, handleLongPress() becomes:

When the handler triggers a long press (as determined in ACTION_MOVE) we set the isLongPress flag to indicate a long press is in progress. We check to see if we are within our icon’s boundaries (for this simple example, we just use one icon; you can of course have more). If our hit test is true we set another flag, isIconDrag, indicating that we want to drag our icon, and we exit our long press method. If our hit test fails we are long pressing the background and we instead pop a context menu via performLongClick(), as explained in the older tutorials.

We need minimal changes to the event handler.

ACTION_DOWN doesn’t change at all.

For ACTION_MOVE, instead of always exiting if a long press is in progress we now check to see if an icon drag is in progress. If so, we update the move incrementers for the icon and force a redraw.

Since we’ve removed background scrolling for this example, we also shorten up the long press determination code block. In particular we no longer have to worry about updating the background’s scroll rectangle.

The new ACTION_MOVE handler looks like:

The only change to the ACTION_UP and ACTION_CANCEL handlers is to reset isIconDrag, since our gesture is now complete.

Our onDraw() method now handles updating of the icon’s position, instead of handling background scrolling. You can see the changed onDraw() in the full source below.

I’ve changed the variables names to indicate icon dragging instead of background scrolling, but most functionality is identical to the older tutorials. This code is not very different from the previous version (in some cases this example is simpler), but with the variable name changes it is probably not useful to run a diff utility on the two versions.

Here is a summary of the steps to implement a full project. Complete details and code explanations for anything not discussed above are in the referenced tutorials.

Implementation Summary:
The full source is available at the end.

0.) In Eclipse, create a new Android Project, targeting Android 2.0 (older versions may work too, but the folders may be slightly different from those shown here). For consistency with this tutorial you may wish to name your main activity LongPressDrag, and make your package name com.example.longpressdrag.

1.) You’ll need two image resources, one the size of your screen for the background (or you can just leave it out completely and remove the appropriate bmBackground references from the code below). For example, for my Droid I used a 854x480 image. The other resource is a small bitmap representing an icon. In a pinch you can just use the standard icon.png that is built into all Eclipse projects.

Add the image resources (I've named mine background.png and testicon.png) to your /drawable-hdpi folder (may also be named /drawable depending on which Android version you are using).

2.) For convenience, we will run our simple application fullscreen and in landscape mode. To do this modify the project's manifest:

Edit AndroidManifest.xml and add the following to the application tag:

While we are here you can also add the following if you wish to debug on an actual device (this also goes inside the application tag):

In the activity tag, set the screen orientation to landscape:

We must also add the proper permission to use the vibration service. In the manifest tag (above the application tag) add:

3.) Cut and paste the full source code below into your project’s LongPressDrag.java, replacing whatever was in there. You should be able to build and run this example, and be able to either long press the icon and drag it, or long press the background and pop a context menu.

Takeaways: The Takeaways from this tutorial are the same as previously, the most important are repeated here:

• Make sure GestureDetector doesn't fit your needs before attempting to roll your own.
• Use handlers to set up event triggers; let the Android OS scheduler do the work for you.
• To avoid poor performance, try to keep the code that executes from within the event handlers to a minimum.

The Full Source:

"/src/your_package_structure/LongPressDrag.java"

Hope this helps!
Xcaf

This was interesting, but the first time I looked at 2D graphics on Android.

I wanted to make a change so that the icon was originally centered instead up in the upper left corner. Unfortunately the dimensions of the view is not set in the constructor and when setting startX and startY in onSizeChanged(...) it had no effect.

How do I get the dimensions of the view in a way so that I can position the icon in the middle of the screen at start?

Thank you
/B

Hi Bengtb,

If you take a look at the first tutorial link, you can see how to get the display width and height in onCreate(). Then you'll be able to set your icon where you wish. Also if you need to handle screen orientation changes you can get updated values for the display height and width in onSizeChanged().

-XCaf

Fantastic stuff this, thank you so much.

When talking about drawing the draggable icon on top of the background, you say:

"Draw the background and the icon on top. This isn't the best way to do this, particularly if we have more than one icon, but for simplicity we'll take this easy approach."

May I ask why this is not the best approach? I will be having upto 20 draggable items on screen that can be "sifted" through by the user, so they will constantly be in a heap, or lying next to each other, or partially covering each other, and so on.

What is it about your "simple" approach that is bad?

Also, I'd like to restrit the draggable area to a specific portion of the screen, are you able to tell me how that is possible?