I have created my own component which extends RelativeLayout, inside it I have a field of View type which is being positioned with margins:
Blue quad represents my parent view, and a red circle is a child.
Now I want to allow user to move this red circle while moving a finger on a screen.
This is my onTouchEvent() method:
#Override
public boolean onTouchEvent(MotionEvent event) {
int eventAction = event.getAction();
switch (eventAction) {
case MotionEvent.ACTION_DOWN:
// finger touches the screen
break;
case MotionEvent.ACTION_MOVE:
marginX = (int)event.getX();
marginY = (int)event.getY();
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams)pointer.getLayoutParams(); // pointer is this red circle
lp.setMargins(marginX, marginY, 0, 0);
break;
case MotionEvent.ACTION_UP:
// finger leaves the screen
break;
}
return true;
}
But I quickly found out that it doesn't refresh it's position while user is moving his finger on a screen, but instead it does it only when user releases his finger from the screen. So basically, when I move my finger, circle stays in a same position, but when I stop moving, circle is drawn in new position. I tried using invalidate() method on both, parent and child views, but it didn't help. I assume that it may have something to do with UI thread, but I don't have access to runOnUiThread()' method as it's not anActivity`.
EDIT:
I passed an activity to my class, so that I can use runOnUiThread(). My case: ACTION_MOVE now looks like this:
case MotionEvent.ACTION_MOVE:
marginX = (int)event.getX();
marginY = (int)event.getY();
activity.runOnUiThread(new Runnable() {
public void run() {
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams)pointer.getLayoutParams();
lp.setMargins(marginX, marginY, 0, 0);
pointer.invalidate();
}
});
break;
If it's simple pointer you can draw it on Canvas as Drawable:
#Override
protected void onDraw(Canvas canvas) {
pointer.setBounds(marginX, marginY, marginX + pointerWidth, marginY + pointerHeight);
pointer.draw(canvas);
super.onDraw(canvas);
}
And then call invalidate() on pointer in onTouchEvent() method.
I think you need drag and drop function
Refer http://www.vogella.com/articles/AndroidDragAndDrop/article.html
Related
This is what I want to achieve:
In the below image there is a white dot on the screen and i want to move the white dot to the RIGHT when right part of the screen is touched and to the LEFT when left part of the screen is touched.
This is my code:
protected void onDraw(Canvas canvas)
{
final Bitmap mball = ball;
if (pressed){
if (touch_x>canvas.getWidth()/2)
left += 2;
else left -= 2;
}
canvas.drawBitmap(mball, left, canvas.getHeight()*0.7f, null);
invalidate();
}
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
final int action = event.getAction();
int pointerIndex;
switch (action ){
case MotionEvent.ACTION_DOWN:
touch_x = event.getX();
pressed = true;
break;
case MotionEvent.ACTION_POINTER_DOWN:
touch_x = event.getX(event.getActionIndex());
pressed = true;
break;
case MotionEvent.ACTION_UP:
mActivePointerId = -1;
pressed = false;
break;
case MotionEvent.ACTION_CANCEL: {
mActivePointerId = -1;
break;
}
}
return pressed;
}
It is not working the way I want it to work. When the user touches the right part the white ball should move towards right and if LEFT part is touched without lifting off the RIGHT finger the ball should move towards left and vice-versa.
What is happening is if RIGHT part of screen is touched ball keeps moving towards right and when left part is touched without removing the right finger the ball continues to move towards right.
I have also tried using pointer Index for primary and non-primary pointers but still no luck.
Any help would be appreciated.
I have a view, and I want to move it with finger. I wanted to get the xDelta and yDelta and just translate the matrix of the view (not image view, any view, RelativeLayout for example).
I am wondering how to do that:
Overriding RelativeLayout's onDraw and apply translation matrix there. Is that possible?
I am currently doing it with applying animation on each onTouch event. The animation is with duration 0 and the start/end of x/y is the same (setFillAfter = true). It just puts the view where I want. But isn't that too expensive?
Can't I manipulate the matrix of any view directly through onDraw? I tried something like this:
#Override
protected void onDraw(Canvas canvas) {
if (getDx() != 0 && getDy() != 0) {
m = canvas.getMatrix();
m.postTranslate(dx, dy);
canvas.setMatrix(m);
}
super.onDraw(canvas);
}
But it seems that I am doing it wrong.
If you want to implement drag gesture then you can use onTouchListener and in its MotionEvent.ACTION_MOVE set padding using setPadding to that view.
Here is the sample code:
case MotionEvent.ACTION_MOVE:
yourView.setPadding((int)event.getRawX(), (int)event.getRawY(), 0, 0);
Sample for onTouchListener :-
OnTouchListener drag= new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction() & MotionEvent.ACTION_MASK){
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_MOVE:
img.setPadding((int)event.getRawX(), (int)event.getRawY(), 0, 0);
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
} return true;
}
};
You need to create the dragging image at run time and have to adjust its position. In this sample code I have not adjusted the position so the dragged image is not created at the position of touch. You also need to consider the height and width of the image to be dragged.
Hope it helps !
I hate to be the one to tell you that your problem is even easier than you thought, but here's what it looks like:
#Override
protected void onDraw(Canvas canvas) {
if (getDx() != 0 && getDy() != 0) {
canvas.translate(getDx(), getDy());
}
super.onDraw(canvas);
}
Hope this helps!
If you want to Move your layout permanently (In case of temporary, we can use animation ) then Use Drag And Drop API from android Official Page . Hope this will help you
Couple of things that would help in achieving it:
Make sure that your view originally has enough space in the direction you want to use. Like 'match_parent' etc
Use GestureDetector.onSimpleGestureListener and override onDraw ( return true;) , onScroll -- connect it using onTouchEvent and you will directly get the distance , or you can calculate yourself by using the event1 and event2
Store this information in variable(s) and call invalidate()
in your onDraw method - use this information by canvas.translate(..use those variables..); super.onDraw(canvas);
and your will achieve the result
PS: The drawing starts by taking left-top as 0,0
I wrote a View with canvas, which contains many rectangles. I want these rectangles to be used as a button which will open a new activity. How can I do it?
You need to be careful with Suri Sahani example, onTouchEvent is called on any action qualified as a touch event, meaning press, release, movement gesture, etc(Android Event Listener Documentation). To use the onTouchEvent properly you need to check the MotionEvent type.
List<Rect> retangles;//Assume these have been drawn in your draw method.
#Override
public boolean onTouchEvent(MotionEvent event) {
int touchX = event.getX();
int touchY = event.getY();
switch(event){
case MotionEvent.ACTION_DOWN:
System.out.println("Touching down!");
for(Rect rect : rectangles){
if(rect.contains(touchX,touchY)){
System.out.println("Touched Rectangle, start activity.");
Intent i = new Intent(<your activity info>);
startActivity(i);
}
}
break;
case MotionEvent.ACTION_UP:
System.out.println("Touching up!");
break;
case MotionEvent.ACTION_MOVE:
System.out.println("Sliding your finger around on the screen.");
break;
}
return true;
}
In your onTouchEvent() just capture the x and y values and you can use the contains(int x, int y) method in the Rect class. If contains(x, y) returns true, then the touch was inside the rectangle and then just create the intent and start the new activity.
Now I have an ImageView and its a circle which is at the slightly below than center position (But this should not matter).
I have written code onTouch of ImageView for ACTION_DOWN,ACTION_UP ,now consider as user have put finger on circle and move and move.... I want to active some code when user move finger and exceed the region of CIRCLE image(As soon as user exceed the region the code should be ececuted onlly once)
Here is my code
ImageView view1 = (ImageView) findViewById(R.id.fccircledetectionarea);
view1.setOnTouchListener(new OnTouchListener()
{
#Override
public boolean onTouch(View v, MotionEvent event)
{
ImageView imageView=(ImageView) findViewById(R.id.fccircledetectionarea);
switch(event.getAction())
{
case MotionEvent.ACTION_DOWN:
final float x=imageView.getTop();
Toast.makeText(PlayScreen.this, "Top Position:"+x, Toast.LENGTH_SHORT).show();
break;
case MotionEvent.ACTION_UP:
Toast.makeText(PlayScreen.this, "Over", Toast.LENGTH_SHORT).show();
break;
case MotionEvent.ACTION_MOVE:
Toast.makeText(PlayScreen.this, "Over", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
I cannot archive my goal through ACTION_MOVE: as it start to work if user move finger within the circle
And my second query is that How to set alpha of this imageview I have used
view1.setAlpha(0);
But is not working and I have also made this imageview invisible but than my onTouch code is not working
Within your onTouch method record a boolean to check if the user is touching within the bounds of the circle.
boolean inCircle = java.lang.Math.sqrt(x*x + y*y) <= circleRadius
Where x is taken from event.getX() - circleCenterX and y is taken from event.getY() - circleCenterY (touch position's offset from center of the circle)
I have a table-top style game board consisting of 10x10 squares. Each square is a PNG image. On top of these squares I want to place tiles which can be drag and dropped on top of the squares.
What would be my best approach concerning Views?
Is it possible to have two layers where layer one is a grid of ImageView's which represents the board. Would it then be possible to let the tile be an ImageView also which could be "stacked" on top of the ImageView's which represents the board?
Any good design ideas are welcome!
Thanks.
/ Henrik
Override onTouchEvent in your View:
#Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
if (!mEnable) {
return false;
}
int action = event.getAction();
int x = (int)event.getX();
int y = (int)event.getY();
switch (action) {
case MotionEvent.ACTION_DOWN:
onTouchActionDown(x, y);
break;
case MotionEvent.ACTION_MOVE:
onTouchActionMove(x, y);
break;
case MotionEvent.ACTION_UP:
onTouchActionUp(x, y);
break;
}
return true;
}
Then in either onTouchActionUp/Down just use the co-ordinates and redraw your image resource, i.e. invalidate() your view.
Override onDraw to draw the dragged graphic:
#Override
protected void onDraw(Canvas canvas)
drawMyDragGfx();
}
I did a override on onDraw and onTouchEvent in my View. I.e. I did the drag and drop drawing all by myself.
Worked like a charm :-)