In Android, I need to be able to draw simple graphics (points, lines, circles, text) on a large scrollable canvas (i.e the phone's screen is a viewport in a much larger area). I have hunted for tutorials on how to do this without success.
"World Map FREE" on Android market is a good example of the sort of effect I need to achieve.
This must be a common problem, so I'm surprised I can't find examples.
I've had to implement something fairly recently of this sort. Basically I had coordinates in my custom view that would shift where objects would be drawn, via some auxiliarry functions:
public class BoardView extends View {
//coordinates to shift the view by
public float shiftX=0f;
public float shiftY=0f;
//used in the dragging code
public float lastX=-1f;
public float lastY=-1f;
/*...*/
//functions that take into account the shifted x and y values
//pretty straightforward
final public void drawLine(Canvas c,float x1,float y1,float x2,float y2,Paint p){
c.drawLine(x1+shiftX, y1+shiftY, x2+shiftX, y2+shiftY, p);
}
final public void drawText(Canvas c,String s,int x,int y,Paint p){
c.drawText(s, x+shiftX, y+shiftY, p);
}
/*etc*/
To actually implement the dragging, I wrote a custom onTouchEvent method to implement dragging:
public boolean onTouchEvent(MotionEvent event){
int eventaction=event.getAction();
float x=event.getX();
float y=event.getY();
switch(eventaction){
case MotionEvent.ACTION_DOWN:
time=System.currentTimeMillis();//used in the ACTION_UP case
break;
case MotionEvent.ACTION_MOVE:
if(lastX==-1){ lastX=x;lastY=y;}//initializing X, Y movement
else{//moving by the delta
if(Math.abs(x-lastX)>1 || Math.abs(y-lastY)>1){//this prevents jittery movement I experienced
shiftX+=(x-lastX);//moves the shifting variables
shiftY+=(y-lastY);//in the direction of the finger movement
lastX=x;//used to calculate the movement delta
lastY=y;
invalidate();//DON'T FORGET TO CALL THIS! this redraws the view
}
}
break;
case MotionEvent.ACTION_UP: //this segment is to see whether a press is a selection click(quick press)
//or a drag(long press)
lastX=-1;
if(System.currentTimeMillis()-time)<100)
try {
onClickEvent(x,y);//custom function to deal with selections
} catch (Exception e) {
e.printStackTrace();
}
break;
}
return true;
}
Look into tile engines, there's a lot to find on Google about them.
Related
We have an Android app that is meant to be mounted on the dash of a vehicle that is operating in rough terrain, so everything is really shaky. We've found that making a single tap on the screen in this kind of situation is difficult, as the taps are often interpreted as small drags.
What I need is for touch events that have a little wiggle before the finger comes up to be interpreted as clicks, not drags. I've been doing some reading into the way the 'touch slop' works in Android and I can see that they already account for this. All I really need to understand is how to increase the 'touch slop' for a subclass of an Android button widget.
Is this possible in just a couple of lines of code? Or do I need to do my own implementations of onInterceptTouchEvent and 'onTouchEvent`? If the latter, can anyone give me some direction on how this would work?
Here is what I did, hope that help you guys.
private Rect mBtnRect;
yourView.setOnTouchListener(new OnTouchListener() {
private boolean isCancelled = false;
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
isCancelled = false;
parent.requestDisallowInterceptTouchEvent(true); // prevent parent and its ancestors to intercept touch events
createClickArea(v);
// your logic touch down
return true;
case MotionEvent.ACTION_UP:
if(!isCancelled) {
// Click logic
}
// release mBtnRect when cancel or up event
mBtnRect = null;
return true;
case MotionEvent.ACTION_CANCEL:
isCancelled = true;
releaseTouch(parent, v);
return true;
case MotionEvent.ACTION_MOVE:
if(!isBelongTouchArea(event.getRawX(), event.getRawY())) {
isCancelled = true;
releaseTouch(parent, v);
}
return true;
default:
break;
}
}
// Create the area from the view that user is touching
private final void createClickArea(View v) {
// for increase rect area of button, pixel in used.
final int delta = (int) mContext.getResources().getDimension(R.dimen.extension_area);
final int[] location = new int[2];
// Get the location of button call on screen
v.getLocationOnScreen(location);
// Create the rect area with an extension defined distance.
mBtnRect = new Rect(v.getLeft() - delta, location[1] + v.getTop() - delta, v.getRight(), location[1] + v.getBottom() + delta);
}
//Check the area that contains the moved position or not.
private final boolean isBelongTouchArea(float rawX, float rawY) {
if(mBtnRect != null && mBtnRect.contains((int)rawX, (int)rawY)) {
return true;
}
return false;
}
private void releaseTouch(final ListView parent, View v) {
parent.requestDisallowInterceptTouchEvent(false);
mBtnRect = null;
// your logic
}
For our simple use-case with a android.opengl.GLSurfaceView, we solved the same problem you have by saying, "if the distance moved in the gesture is less than some_threshold, interpret it as a click". We used standard Euclidean distance between two 2D points = sqrt((deltaX)^2 + (deltaY)^2)), where deltaX and deltaY are the X and Y components of the distance moved in the user's motion gesture.
More precisely, let (x1,y1) be coordinates where user's finger gesture 'started' and let (x2,y2) be coordinates where the gesture 'ended'.
Then, deltaX = x2 - x1 (or it can also be x1 - x2 but sign doesn't matter for the distance 'cz we square the value) and similarly for deltaY.
From these deltas, we calculate the Euclidean distance and if it's smaller than a threshold, the user probably intended it to be a click but because of the device's touch slop, it got classified as a move gesture instead of click.
Implementation-wise, yes we overrode android.view.View#onTouchEvent(MotionEvent) and
recorded (x1,y1) when masked action was android.view.MotionEvent#ACTION_POINTER_DOWN or android.view.MotionEvent#ACTION_DOWN
and when masked action was android.view.MotionEvent#ACTION_MOVE, (x2,y2) are readily available from the event's getX and getY methods (see corresponding documentation)
UPDATE: please read entire question again :-)
Background:
I have created a grid of dots by creating a custom view and then adding these views to a TableLayout. The aim is for me to be able to draw a line from one of these dots to another dot in a way so that when a dot is pressed, a line is started from the center of the pressed dot to the point where the finger is currently touching. When the finger is dragged over another dot, the line then finishes at the center of that dot. The result being a line drawn from the center of the pressed dot to the center of the dot which was dragged over by the finger.
To create a line going over the TableLayout, I created a new custom view which just created a line between points with the canvas.drawLine() method. I then created a FrameLayout in which I put the TableLayout and the LineView. This meant the line view would be able to be drawn on top of the TableLayout.
Current Situation:
I have added touch listener in the DotView class so that it can have its own “touch feedback”. There is also another touch listener in the activity which I am trying to use to get the points needed to draw the line. The touch listeners are working fine as far as I can tell - they are not interfering with each other.
The problem is getting the correct coordinates to plot the line. I have tried a number of ways to get the coordinates of the center of the dot that was pressed (the starting point of the line), but I still have not managed it. This question, has more information: Get the coordinates of the center of a view . The second part is getting the correct end point of the line. For the purposes of this question, I would just like the end of the line to follow the position of the finger. I thought it was as easy as motionevent.getX() / getY() but this hasn’t worked. What happened instead was that there was a mix up between the coordinates on a scale relative to the layout of the dot and the coordinates relative to the whole layout/screen.
Simply put: the getX() and getY() values are incorrect, and this is what I am trying to solve here.
As shown in the screenshots, when I press down on a dot, the start point of the line is roughly in the right place, but the end point is way off. I can’t really explain why.
I have tried getRawX() and getRawY() and they return more much more accurate values, but they are still incorrect by the amount of padding (or something like that - I don’t 100% understand).
This shows my code
In my Activity :
LineView test;
FrameLayout fl;
float startPointX = 0;
float startPointY = 0;
// Removed
#Override
public boolean onTouch(View view, MotionEvent event) {
float eventX = event.getX();
float eventY = event.getY();
int[] loc = new int[2];
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (view instanceof DotView) {
DotView touchedDv = (DotView) view;
int dotColor = touchedDv.getColor();
test.setColor(dotColor);
float[] f = touchedDv.getDotCenterLocationOnScreen();
startPointX = f[0];
startPointY = f[1];
test.setPoints(startPointX, startPointY, eventX, eventY);
fl.addView(test);
}
vib.vibrate(35);
return false;
case MotionEvent.ACTION_MOVE:
test.setPoints(startPointX, startPointY, eventX, eventY);
break;
case MotionEvent.ACTION_UP:
fl.removeView(test);
return false;
default:
return false;
}
return true;
}
And finally the LineView:
public class LineView extends View {
public static final int LINE_WIDTH = 10;
Paint paint = new Paint();
float startingX, startingY, endingX, endingY;
public LineView(Context context) {
super(context);
paint.setColor(Color.MAGENTA);
paint.setStrokeWidth(LINE_WIDTH);
}
public void setPoints(float startX, float startY, float endX, float endY) {
startingX = startX;
startingY = startY;
endingX = endX;
endingY = endY;
invalidate();
}
#Override
public void onDraw(Canvas canvas) {
canvas.drawLine(startingX, startingY, endingX, endingY, paint);
}
NOTES:
I am calling the top left hand dot "dot 1".
The screenshots may not be entirely accurate as my finger moves
slightly when I take the screenshot, but the behaviour I described is
happening.
If any other information/code is wanted, I will happily provide it.
Thanks for taking the time to read this - sorry it is so long!
I have added touch listener in the DotView class so that it can have
its own “touch feedback”. There is also another touch listener in the
activity which I am trying to use to get the points needed to draw the
line. The touch listeners are working fine as far as I can tell - they
are not interfering with each other.
I don't quite see why you need both touch listener. To draw the line the touch listener on the TableLayout should be more than enough.
The problem with your code(or at least from what I've seen) is that you use the getLocationOnScreen(coordsArray) method without translating the returned values back to the coordinates system of the LineView. For example, you get the coordinates of a DotView which will be x and y. You then use this values in the LineView. But, the LineView when it will do its drawings will use its own(standard) coordinates system which places the top-left of the view at (0,0) and the coordinates will not match. Here's an example: suppose you touch the very first DotView which has a height of 50 and the y returned by the getLocationOnScreen() method is 100. You calculate the center of the DotView wich will come be at 125(100 + 50 / 2). Using this value in the LineView will be way off the normal position as the actual drawing will be done at 125, which in screen coordinates will visually translate to a y of 225 (100 returned by getLocationOnScreen() + 125).
Anyway I've made a small example using the getLocationOnScreen() method to do what you're trying to do(which you can find here).
Am trying to place pins wherever the user touches on an imageView. Assume a map (like Google Maps) & the user touches a point, say point A, and a pin is drawn at that point. Then, the user touches point B, then another pin (not the same previous pin relocated!) needs to be drawn at point B and so on. Right now, am able to draw a pin at the point where the user touches on the screen like this :
#Override
public void onDraw(Canvas canvas) {
....
Bitmap marker = BitmapFactory.decodeResource(getResources(),
R.drawable.icon_locationmarker);
canvas.drawBitmap(marker, mLastTouchX, mLastTouchY, null);
....
canvas.restore();
}
However, I don't want to relocate one pin across the screen wherever the user touches (which is what the above code is doing). I want to put several pins at all points wherever user touches. Am new to Android. Please help.
Eluvatar is right, you needs to create a list to store all your mark. Here's the sample of code. Remember, do add list when only motionEvent is either Action_UP or Action_DOWN only. Otherwise, there will be full of point.
public ArrayList<Coordinate> pointsList;
#Override
public void onDraw(Canvas canvas) {
....
Bitmap marker = BitmapFactory.decodeResource(getResources(),
R.drawable.icon_locationmarker);
for(Coordinate coor : pointsList){
canvas.drawBitmap(marker, coor.x, coor.y, null);
}
....
canvas.restore();
}
public View.OnTouchListener mListener = new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == android.view.MotionEvent.ACTION_UP) {
pointsList.add(new Coordinate(event.getX(), event.getY()));
}
return false;
}
};
class Coordinate{
float x;
float y;
public Coordinate(float x, float y){
this.x = x;
this.y = y;
}
}
edit: change int x,y to float x,y
you need to create a list of "touch points". then on touch add a new touch point to the list, then onDraw you iterate through that list and draw a marker on each point.
you'll also need to make sure you save the list of touch points on save instance state otherwise you'll lose them on rotate and on activity pause.
In trying to tackle custom views, I'm attempting to work with touch events and partial invalidation. For this, it's just a row of numbers in squares spaced to fill the screen.
Now when I press on a single block, I get the block's rectangle using this:
private Rect getDirtyRegion(float e){
// The value is the slot number
mValue = ((int)e / mBlockSize);
// start X of the "stall"
int x1 = mValue * mBlockSize;
int y1 = 0;
int x2 = x1 + mBlockSize;
int y2 = getMeasuredHeight();
return new Rect(x1, y1, x2, y2);
}
It works as expected. When there's just a few on screen it works great. Here's my onTouchEvent:
#Override
public boolean onTouchEvent(MotionEvent e){
switch(e.getAction()){
case MotionEvent.ACTION_DOWN:
Log.d(TAG, "ActionDown");
setPaint(PinEntry.PAINT_PRESSED);
invalidate(getDirtyRegion(e.getX()));
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
setPaint(PinEntry.PAINT_NORMAL);
invalidate();
break;
}
return true;
}
(This has been rewritten quite a few times, so the call to invalidate without a rectangle hasn't always been the case.)
What I'm after is, when I tap on a number, it redraws to indicate a PRESSED state by whatever I do in setPaint. When I release, reset.
When I have multiple views in a ScrollView, however it breaks. When I press and release, or even drag outside the bound (triggering ACTION_CANCEL), it resets. However, going back to that row causes the whole thing to invalidate as "PRESSED".
Is this a TouchEvent logic issue, a drawing issue, or some combination of my inexperience with creating custom views?
I ended up splitting it into two different classes, one for the container (parent), and another for each individual block and using the draw(Canvas) method of the View class.
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 :-)