Making an ImageView follow touchpoint on screen - android

I am working on an Android app where I would like the user to be able to drag their finger on the screen and have an object I have set up as an Image View (a plane) follow it. I have a somewhat working model of this right now where the image will go to a point that is touched on the screen, but this is not exactly what I am looking to do. Also each time the user touches a new point, my image goes back to its starting spot then go to the users touch point. This is the relevant code:
public boolean onTouch(View v, MotionEvent e){
switch (e.getAction()){
case MotionEvent.ACTION_DOWN:
{
}
case MotionEvent.ACTION_UP:
{
float x = e.getX();
float y = e.getY();
movePlane(x, y);
}
case MotionEvent.ACTION_MOVE:
{
}
}
return true;
}
private boolean movePlane(float endX, float endY){
ImageView plane = (ImageView) findViewById(planeID);
float startX = plane.getX();
float startY = plane.getY();
TranslateAnimation animation = new TranslateAnimation(startX, endX, startY, endY);
animation.setDuration(3000);
animation.setFillAfter(true);
animation.setFillEnabled(true);
plane.startAnimation(animation);
return true;
}
So I know I am probably going to be working inside of the ACTION_DOWN case but I am not sure exactly how I should be handling the event and ImageView accordingly. Any help is really appreciated.

Hi try this link here you can use the params.x and params.y as the x,y co-ordinates you are passing to the method movePlane. Hope it helps.
There is a lot to read on that link, so thought its better i post the important code here. Below is the code you can use
plane.setOnTouchListener(new View.OnTouchListener() {
private int initialX;
private int initialY;
private float initialTouchX;
private float initialTouchY;
#Override public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
initialX = params.x;
initialY = params.y;
initialTouchX = event.getRawX();
initialTouchY = event.getRawY();
return true;
case MotionEvent.ACTION_UP:
return true;
case MotionEvent.ACTION_MOVE:
params.x = initialX + (int) (event.getRawX() - initialTouchX);
params.y = initialY + (int) (event.getRawY() - initialTouchY);
movePlane(params.x, params.y);
return true;
}
return false;
}
});
Plane is ofcourse the ImageView which you want to be dragged. You can refer the link if you want i took reference from it.

you have to set the x and y values after your animation with an AnimationListener -> onAnimationFinished, to avoid the "Also each time the user touches a new point, my image goes back to its starting spot then go to the users touch point" thing.

Related

Injecting a click listener on an image overlay service

I've managed to implement a overlay service which has an image, it can be moved in the application. But I m trying to inject a click listener on the overlay-service so that when I press on it, for instance a button which is under the overlay-service then it should pass the click to the underlying button and gets pressed on. I've tried to look around but with no luck.
Any tips of how to do this in a smart way?
This is the code for moving the overlay
overlayView.setOnTouchListener(new View.OnTouchListener() {
private WindowManager.LayoutParams paramsF = params;
private int initialX;
private int initialY;
private float initialTouchX;
private float initialTouchY;
#Override public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// Get current time in nano seconds.
initialX = paramsF.x;
initialY = paramsF.y;
initialTouchX = event.getRawX();
initialTouchY = event.getRawY();
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_MOVE:
paramsF.x = initialX + (int) (event.getRawX() - initialTouchX);
paramsF.y = initialY + (int) (event.getRawY() - initialTouchY);
windowManager.updateViewLayout(overlayView, paramsF);
break;
}
return false;
}
you may want to override the ontouchlistener so it does not consume the event but instead passes that on to the next layer? Im not super clear about what you are trying to do but if we are on the same page that is what u want.

how to swipe up and down a view?

I used this link to create a view to swipe up and down views! but there is one problem! after I slide up the view and I want to slide down to close it, I have to slide the parent view!! and the view itself can't detect the sliding!
I've tried adding this code to my mainActivity :
sliderView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
float touchedArea = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mViewHeight = sliderView.getHeight();
x1 = event.getX();
y1 = event.getY();
mViewStartPositionY = sliderView.getTranslationY();
mCanSlide |= sliderView.getBottom() - sliderView.getHeight() <= touchedArea;
t1 = System.currentTimeMillis();
break;
case MotionEvent.ACTION_MOVE:
float difference = event.getRawY() - y1;
y2 = event.getRawY();
float moveTo = mViewStartPositionY + difference;
if(moveTo > 0 && mCanSlide) {
sliderView.setTranslationY(moveTo);
}
}
return true;
}
});
but when I slide down, it has some bugs and the sliderView freeze sometimes!
how can I fixed this issue?!
or if there are any tutorials or other useful libraries, please let me know!
also, I used this library, but It has some issues too!

How to move an object on a SurfaceView without touching the object itself?

I found this question, but it's for iOS development. I'm doing something in Android, so it wasn't any help.
I have a simple white rectangle on a black canvas, and I have an onTouchEvent set up. I can move the rectangle as expected, but this is not the functionality I'm looking for.
I'm needing to know how I can touch anywhere on the screen and move an object? I don't want the object's X and Y to become my touch event's getX() and getY().
For now, I have:
#Override
public boolean onTouchEvent(MotionEvent event) {
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
myPoint.set((int)event.getX(), (int)event.getY());
}
return true;
}
My reasoning for this is so the object can be seen without a finger hovering over it. Is this possible?
Here is a visual representation of what I'm wanting to achieve:
Why not get and store the previous MotionEvent coordinates in the onTouchEvent callback, then when onTouchEvent fires again (first ACTION_MOVE after ACTION_DOWN and then so on for each ACTION_MOVE callback) work out the offset/difference between the values then get your own myPoint coordinates and add the offset to their current values. This way you're only moving the myPoint object by the position offset, not the actual coordinates.
This code isn't tested and I've not used an IDE but something like this:
private float oldX;
private float oldY;
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
oldX = event.getX();
oldY = event.getY();
break;
case MotionEvent.ACTION_MOVE:
float newX = event.getX();
float newY = event.getY();
float offsetX = getOffset(oldX, newX, myPoint.x);
float offsetY = getOffset(oldY, newY, myPoint.y);
myPoint.set((int) offsetX, (int) offsetY);
oldX = newX;
oldY = newY;
break;
}
return true;
}
private float getOffset(float oldVal, float newVal, float current) {
return current + (newVal - oldVal);
}

Jumping ImageView while dragging. getX() and getY() values are jumping

I've created an onTouchListener for dragging Views. Images drag smoothly if I use getRawX() and getRawY(). The problem with that is the image will jump to the second pointer when you place a second pointer down then lift the first pointer.
This onTouchListener attempts to fix that issue by keeping track of the pointerId. The problem with this onTouchListener is while dragging an ImageView, the ImageView jumps around pretty crazily. The getX() and getY() values jump around.
I feel like I'm doing this correctly. I don't want to have to write a custom view for this because I've already implemented a scaleGestureDetector and written a custom rotateGestureDetector that work. Everything works fine but I need to fix the issue I get when using getRawX() and getRawY().
Does anybody know what I'm doing wrong here?
Here's my onTouchListener:
final View.OnTouchListener onTouchListener = new View.OnTouchListener()
{
#Override
public boolean onTouch(View v, MotionEvent event)
{
relativeLayoutParams = (RelativeLayout.LayoutParams) v.getLayoutParams();
final int action = event.getAction();
switch (action & MotionEvent.ACTION_MASK)
{
case MotionEvent.ACTION_DOWN:
{
final float x = event.getX();
final float y = event.getY();
// Where the user started the drag
lastX = x;
lastY = y;
activePointerId = event.getPointerId(0);
break;
}
case MotionEvent.ACTION_MOVE:
{
// Where the user's finger is during the drag
final int pointerIndex = event.findPointerIndex(activePointerId);
final float x = event.getX(pointerIndex);
final float y = event.getY(pointerIndex);
// Calculate change in x and change in y
final float dx = x - lastX;
final float dy = y - lastY;
// Update the margins to move the view
relativeLayoutParams.leftMargin += dx;
relativeLayoutParams.topMargin += dy;
v.setLayoutParams(relativeLayoutParams);
// Save where the user's finger was for the next ACTION_MOVE
lastX = x;
lastY = y;
v.invalidate();
break;
}
case MotionEvent.ACTION_UP:
{
activePointerId = INVALID_POINTER_ID;
break;
}
case MotionEvent.ACTION_CANCEL:
{
activePointerId = INVALID_POINTER_ID;
break;
}
case MotionEvent.ACTION_POINTER_UP:
{
// Extract the index of the pointer that left the touch sensor
final int pointerIndex = (action & MotionEvent.ACTION_POINTER_INDEX_MASK) >> MotionEvent.ACTION_POINTER_INDEX_SHIFT;
final int pointerId = event.getPointerId(pointerIndex);
if(pointerId == activePointerId)
{
// This was our active pointer going up. Choose a new
// active pointer and adjust accordingly
final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
lastX = (int) event.getX(newPointerIndex);
lastY = (int) event.getY(newPointerIndex);
activePointerId = event.getPointerId(newPointerIndex);
}
break;
}
}
return true;
}
};
image1.setOnTouchListener(onTouchListener);
The issue was simple, but unexpected. getRawX/Y() returns absolute coordinates, while getX/Y() returns coordinates relative to the view. I would move the view, reset lastX/Y, and the image wouldn't be in the same spot anymore so when I get new values they'd be off. In this case I only needed where I originally pressed the image (not the case when using `getRawX/Y').
So, the solution was to simply remove the following:
// Save where the user's finger was for the next ACTION_MOVE
lastX = x;
lastY = y;
I hope this will help somebody in the future, because I've seen others with this problem, and they had similar code to me (resetting lastX/Y)
After a lot of research, I found this to be the issue, getRawX is absolute and getX is relative to view. hence use this to transform one to another
//RawX = getX + View.getX
event.getRawX == event.getX(event.findPointerIndex(ptrID1))+view.getX()
I have One tip & think it will help.
invalidate() : does only redrawing a view,doesn't change view size/position.
What you should use is
requestLayout(): does the measuring and layout process. & i think requestLayout() will be called when call setLayoutParams();
So Try by removing v.invalidate()
or try using view.layout(left,top,right,bottom) method instead of setting layoutParams.

how to make left right activity slider?

Any suggestions for how to make an activity slider with "slide left" and "slide right" like a typical image slider??
I tried with: (implements OnTouchListener)
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
{
// code
break;
}
case MotionEvent.ACTION_UP:
{
// code
break;
}
case MotionEvent.ACTION_MOVE:
{
// code
break;
}
}
return true;
}
but don't have LEFT, RIGHT choice.
I don't need use buttons, just I need do somethings like the image slider for ipad2 but with activities for a customer app.
Thanks
You need to calculate by your own for slide left and right movement
MotionEvent.ACTION_UP
A pressed gesture has finished, the motion contains the final release location as well as any intermediate points since the last down or move event.
MotionEvent.ACTION_DOWN
A pressed gesture has started, the motion contains the initial starting location.
Use onTouchEvent(), and calculate difference in X and difference in Y by where the user presses down and lifts up. Use these values to figure out the direction of the move.
float x1, x2, y1, y2;
String direction;
switch(event.getAction()) {
case(MotionEvent.ACTION_DOWN):
x1 = event.getX();
y1 = event.getY();
break;
case(MotionEvent.ACTION_UP) {
x2 = event.getX();
y2 = event.getY();
float differenceInX = x2-x1;
float differenceInY = y2-y1;
// Use dx and dy to determine the direction
if(Math.abs(differenceInX) > Math.abs(differenceInY)) {
if(differenceInX > 0) direction = "right";
else direction = "left";
} else {
if(differenceInY > 0) direction = "down";
else direction = "up";
}
}
}

Categories

Resources