StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAndroid 2.2 Click and Drag Image Centered Under Touch
text
Body
copied!<p>I am trying to drag and drop a crosshair onto a <code>MapView</code>. I have an <code>ImageView</code> button on the screen. When I touch it, the button disappears and a new <code>ImageView</code> appears. The new <code>ImageView</code> is supposed to sit centered under my finger until I release it somewhere, but for some reason the offset is incorrect. The crosshair appears down-right of where I am touching.</p> <p>The image does move proportionately so I believe the problem is with the <code>offset_x</code> and <code>offset_y</code> which I define in the <code>ACTION_DOWN</code> section. Then, in <code>ACTION_UP</code> I need to <code>createMarker(x,y)</code> on the correct coordinates under my finger, but that is offset incorrectly as well.</p> <p>I have tried various ways to make it centered, and some are better than others. I have so far been unable to make it work without using magic numbers. </p> <p>As it is, I am using the click location and subtracting half the picture size. This makes sense to me. It's closer to correct if I subtract the whole picture size. I have tried various examples from the web, all of them suffer from inaccuracies with the <code>View</code> location. </p> <p>Can you give me some advice?</p> <pre><code>crosshair = (ImageView)findViewById(R.id.crosshair); frameLayout = (FrameLayout)findViewById(R.id.mapframe); params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); crosshairImage = BitmapFactory.decodeResource(getResources(), R.drawable.crosshair); crosshair.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { dragStatus = START_DRAGGING; // hide the button and grab a mobile crosshair v.setVisibility(View.INVISIBLE); image = new ImageView(getBaseContext()); image.setImageBitmap(crosshairImage); // set the image offsets to center the crosshair under my touch offset_x = (int)event.getRawX() - (int)(crosshairImage.getWidth()/2) ; offset_y = (int)event.getRawY() - (int)(crosshairImage.getHeight()/2) ; // set the image location on the screen using padding image.setPadding(offset_x, offset_y, 0, 0); // add it to the screen so it shows up frameLayout.addView(image, params); frameLayout.invalidate(); if(LOG_V) Log.v(TAG, "Pressed Crosshair"); return true; } else if (event.getAction() == MotionEvent.ACTION_UP) { if(dragStatus == START_DRAGGING) { dragStatus = STOP_DRAGGING; // place a marker on this spot makeMarker((int)event.getX() + offset_x, (int)event.getY() + offset_y); // make the button visible again v.setVisibility(View.VISIBLE); // remove the mobile crosshair frameLayout.removeView(image); if(LOG_V) Log.v(TAG, "Dropped Crosshair"); return true; } } else if (event.getAction() == MotionEvent.ACTION_MOVE) { if (dragStatus == START_DRAGGING) { // compute how far it has moved from 'start' offset int x = (int)event.getX() + offset_x; int y = (int)event.getY() + offset_y; // check that it's in bounds int w = getWindowManager().getDefaultDisplay().getWidth(); int h = getWindowManager().getDefaultDisplay().getHeight(); if(x > w) x = w; if(y > h) y = h; // set the padding to change the image loc image.setPadding(x, y, 0 , 0); // draw it image.invalidate(); frameLayout.requestLayout(); if(LOG_V) Log.v(TAG, "(" + offset_x + ", " + offset_y + ")"); return true; } } return false; } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload