Related
I started to study canvas drawing with Android, and i would like to make a simple app.
On app start a so called 'snake' starting to move on the screen, when the user taps the screen, the 'snake' changes direction.
I achived this easily but there is a little issue:
When the user taps on the screen, the snake sometimes changes direction on that particular moment, sometimes just after some milliseconds. So the user can clearly feels that the interaction is not as responsive as it should, the snake's exact moment of turning is pretty unpredictable even if you concentrate very hard. There must be some other way to do this better than i did.
Please check my code, I use a Handler with Runnable to move the snake. (Drawing on a canvas and each time setting it as the background of a view, that is each time setting with setContentView to my Activity.
Code:
public class MainActivity extends Activity implements View.OnClickListener {
Paint paint = new Paint();
Canvas canvas;
View contentView; ///<The view to set by setContentView
int moveSize; ///<Sze in px to move drawer to draw another square
int leftIndex; ///<Indexes for square drawing
int topIndex;
int rightIndex;
int bottomIndex;
int maxBoundsX; ///<The max number of squares in X axis
int maxBoundsY; ///<The max number of squares in Y axis
int moveSpeedInMillis = 25; ///<One movement square per milliseconds
Bitmap bitmapToDrawOn; ///<We draw the squares to this bitmap
Direction currentDirection = Direction.RIGHT; ///< RIGHT,LEFT,UP,DOWN directions. default is RIGHT
Handler handler = new Handler(); ///<Handler for running a runnable that actually 'moves' the snake by drawing squares to shifted positions
Runnable runnable = new Runnable() {
#Override
public void run() {
Log.i("runnable", "ran");
//Drawing a square to the current destination
drawRectPls(currentDirection);
//After some delay we call again and again and again
handler.postDelayed(runnable, moveSpeedInMillis);
}
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/*getting area properties like moveSize, and bounds*/
moveSize = searchForOptimalMoveSize();
maxBoundsX = ScreenSizer.getScreenWidth(this) / moveSize;
maxBoundsY = ScreenSizer.getScreenHeight(this) / moveSize;
Log.i("moveSize", "moveSize: " + moveSize);
Log.i("maxBounds: ", "x: " + maxBoundsX + " ; " + "y: " + maxBoundsY);
/*setting start pos*/
//We start on the lower left part of the screen
leftIndex = moveSize * (-1);
rightIndex = 0;
bottomIndex = moveSize * maxBoundsY;
topIndex = moveSize * (maxBoundsY - 1);
//Setting contentView, bitmap, and canvas
contentView = new View(this);
contentView.setOnClickListener(this);
bitmapToDrawOn = Bitmap.createBitmap(ScreenSizer.getScreenWidth(this), ScreenSizer.getScreenHeight(this), Bitmap.Config.ARGB_8888);
canvas = new Canvas(bitmapToDrawOn);
contentView.setBackground(new BitmapDrawable(getResources(), bitmapToDrawOn));
setContentView(contentView);
/*starts drawing*/
handler.post(runnable);
}
/**
* Draws a square to the next direction
*
* #param direction the direction to draw the next square
*/
private void drawRectPls(Direction direction) {
if (direction.equals(Direction.RIGHT)) {
leftIndex += moveSize;
rightIndex += moveSize;
} else if (direction.equals(Direction.UP)) {
topIndex -= moveSize;
bottomIndex -= moveSize;
} else if (direction.equals(Direction.LEFT)) {
leftIndex -= moveSize;
rightIndex -= moveSize;
} else if (direction.equals(Direction.DOWN)) {
topIndex += moveSize;
bottomIndex += moveSize;
}
addRectToCanvas();
contentView.setBackground(new BitmapDrawable(getResources(), bitmapToDrawOn));
Log.i("drawRect", "direction: " + currentDirection);
}
private void addRectToCanvas() {
paint.setColor(Color.argb(255, 100, 100, 255));
canvas.drawRect(leftIndex, topIndex, rightIndex, bottomIndex, paint);
}
/**
* Upon tapping the screen the the snake is changing direction, one way simple interaction
*/
#Override
public void onClick(View v) {
if (v.equals(contentView)) {
if (currentDirection.equals(Direction.RIGHT)) {
currentDirection = Direction.UP;
} else if (currentDirection.equals(Direction.UP)) {
currentDirection = Direction.LEFT;
} else if (currentDirection.equals(Direction.LEFT)) {
currentDirection = Direction.DOWN;
} else if (currentDirection.equals(Direction.DOWN)) {
currentDirection = Direction.RIGHT;
}
}
}
/**
* Just getting the size of a square. Searching for an integer that divides both screen's width and height
* #return
*/
private int searchForOptimalMoveSize() {
int i;
for (i = 16; i <= 64; i++) {
Log.i("iter", "i= " + i);
if (ScreenSizer.getScreenWidth(this) % i == 0) {
Log.i("iter", ScreenSizer.getScreenWidth(this) + "%" + i + " =0 !");
if (ScreenSizer.getScreenHeight(this) % i == 0) {
Log.i("iter", ScreenSizer.getScreenHeight(this) + "%" + i + " =0 !");
return i;
}
}
}
return -1;
}
/**
* Stops the handler
*/
#Override
protected void onDestroy() {
super.onDestroy();
handler.removeCallbacks(runnable);
}
}
E D I T:
I have modified my code, now the view contains all the details and i use the onDraw and invalidate methods just like Philipp suggested.
The result is a little better but i can still clearly feel that the user interaction is results in a laggy direction change.
Perhaps something i should do with threads?
public class SpiralView extends View implements View.OnClickListener {
int leftIndex; ///<Indexes for square drawing
int topIndex;
int rightIndex;
int bottomIndex;
int speedInMillis = 50;
int moveSize; ///<Sze in px to move drawer to draw another square
int maxBoundsX; ///<The max number of squares in X axis
int maxBoundsY; ///<The max number of squares in Y axis
Paint paint = new Paint();
Direction currentDirection = Direction.RIGHT; ///< RIGHT,LEFT,UP,DOWN directions. default is RIGHT
public void setUp(int moveSize, int maxBoundsX, int maxBoundsY) {
this.moveSize = moveSize;
this.maxBoundsX = maxBoundsX;
this.maxBoundsY = maxBoundsY;
this.leftIndex = moveSize * (-1);
this.rightIndex = 0;
this.bottomIndex = moveSize * (maxBoundsY);
this.topIndex = moveSize * (maxBoundsY - 1);
}
public SpiralView(Context context, AttributeSet attrs) {
super(context, attrs);
setOnClickListener(this);
}
/**
* Draws a square to the next direction
*
* #param direction the direction to draw the next square
*/
private void drawOnPlease(Direction direction, Canvas canvas) {
if (direction.equals(Direction.RIGHT)) {
leftIndex += moveSize;
rightIndex += moveSize;
} else if (direction.equals(Direction.UP)) {
topIndex -= moveSize;
bottomIndex -= moveSize;
} else if (direction.equals(Direction.LEFT)) {
leftIndex -= moveSize;
rightIndex -= moveSize;
} else if (direction.equals(Direction.DOWN)) {
topIndex += moveSize;
bottomIndex += moveSize;
}
Log.i("drawRect", "direction: " + currentDirection);
Log.i("drawRect", "indexes: "+topIndex+" , "+rightIndex+" ," +bottomIndex+" , "+leftIndex);
addRectToCanvas(canvas);
}
private void addRectToCanvas(Canvas canvas) {
paint.setColor(Color.argb(255, 100, 100, 255));
canvas.drawRect(leftIndex, topIndex, rightIndex, bottomIndex, paint);
}
#Override
protected void onDraw(Canvas canvas) {
try {
drawOnPlease(currentDirection, canvas);
synchronized (this) {
wait(speedInMillis);
}
invalidate();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
#Override
public void onClick(View v) {
if (currentDirection.equals(Direction.RIGHT)) {
currentDirection = Direction.UP;
} else if (currentDirection.equals(Direction.UP)) {
currentDirection = Direction.LEFT;
} else if (currentDirection.equals(Direction.LEFT)) {
currentDirection = Direction.DOWN;
} else if (currentDirection.equals(Direction.DOWN)) {
currentDirection = Direction.RIGHT;
}
//..?
invalidate();
}
}
The magic number is 16 milliseconds for android to redraw the view without having framedrops.
Checkout this video from android developers wich explains this.
https://www.youtube.com/watch?v=CaMTIgxCSqU&index=25&list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE
Especially check this video
https://youtu.be/vkTn3Ule4Ps?t=54
It explains how to use canvas clipping in order not to draw the whole surface in every cicle, nut draw only what is needed to be draw.
Do not use a Handler to draw with Canvas.
Instead you should create a Custom View and use the onDraw(Canvas canvas) method.
In this method you can draw on the Canvas object like you already did.
By calling the invalidate() method you trigger a new onDraw() call.
In the onTouch() or onClick() function you also trigger a new onDraw call by calling invalidate()
class SnakView extends View {
#Override
protected void onDraw(Canvas canvas) {
// draw on canvas
invalidate();
}
#Override
public void onClick(View v) {
// handle the event
invalidate();
}
}
You can try and Add android:hardwareAccelerated="true" to your manifest, to the or the .
This will work for devices having 3.0+.
Also your target api level should be 11.
Then it will work more smoothly.
I have this code. It isn't complex at all, I'm learning and I was practising and messing around with the surface view. I only want 2 rectangles to be there and an image going down. When we touch in the second rectangle, the image starts going up. We touch the one in the left and the image restarts going down. When it arrives the line 89, it stops and gives the null pointer exception. I guess the error happens when I create the canvas.
public class LearningThreads extends Activity {
ActivitySurface activitySurface;
boolean crossGoesUp = false;//Sets if the cross goes up or down
int leftRectangle1, topRectangle1, rightRectangle1, bottomRectangle1;
int leftRectangle2, topRectangle2, rightRectangle2, bottomRectangle2;
protected void onCreate(Bundle bundle) {
super.onCreate(bundle);
activitySurface = new ActivitySurface(this);
activitySurface.setOnTouchListener(new canvasClicked());
setContentView(activitySurface);//Sets the content to be the class we've created
}
protected void onPause() {//When the app is paused, it calls the method which pauses the thread that is constantly running
super.onPause();
activitySurface.pause();
}
protected void onResume() {//When the app starts or restarts, it calls the method which starts the thread
super.onResume();
activitySurface.resume();
}
public class canvasClicked implements OnTouchListener {
public boolean onTouch(View v, MotionEvent e) {
if (e.getAction() == MotionEvent.ACTION_DOWN) {//Only if the user starts touching something because I'm not interested in when he releases
if (e.getX() <= leftRectangle1 && e.getX() >= rightRectangle1 && e.getY() <= topRectangle1 && e.getY() >= bottomRectangle1) {//Tests if the user touched one of the rectangles
crossGoesUp = false;
}
if (e.getX() <= leftRectangle2 && e.getX() >= rightRectangle2 && e.getY() <= topRectangle2 && e.getY() >= bottomRectangle2) {//Tests if the user touched the other rectangle
crossGoesUp = true;
}
}
return false;//It doesn't repeat
}
}
public class ActivitySurface extends SurfaceView {
Thread mainThread;
boolean isRunning = false;//Sets when the app is running or not
SurfaceHolder holder;//Gives us useful methods to use in the canvas
int crossY = 0;//Sets the y coordinate of the cross
public ActivitySurface(Context context) {
super(context);
holder = getHolder();
}
public void resume() {
isRunning = true;
mainThread = new Thread(new mainThread());
mainThread.start();
}
public void pause() {
isRunning = false;
try {
mainThread.join();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
public class mainThread implements Runnable {//Takes care of the thread
public void run() {
while(isRunning) {
if (holder.getSurface().isValid())//Tests if the surface is valid, if it is not it won't do anything until it is
continue;
Canvas canvas = holder.lockCanvas();//Creating the canvas: it has a mistake, everytime I use the canvas it gives a NullPointerException
canvas.drawRGB(50, 50, 50);//Setting the color of the canvas
leftRectangle1 = canvas.getWidth()/4 - 40;//Setting the variables so they can be used outside this Thread
topRectangle1 = canvas.getHeight()/2 - 25;
rightRectangle1 = canvas.getWidth()/4 + 40;
bottomRectangle1 = canvas.getHeight()/2 + 25;
leftRectangle2 = canvas.getWidth()/4 + (canvas.getWidth()/4) * 2 - 40;
topRectangle2 = canvas.getHeight()/2 - 25;
rightRectangle2 = canvas.getWidth()/4 + (canvas.getWidth()/4) * 2 + 40;
bottomRectangle2 = canvas.getHeight()/2 + 25;
Paint paint = new Paint();//Setting the paint which will define the colors of the rectangles
paint.setARGB(0, 100, 100, 100);
Rect rectangle1 = new Rect();//Setting the position of the rectangle 1
rectangle1.set(leftRectangle1, topRectangle1, rightRectangle1, bottomRectangle1);
Rect rectangle2 = new Rect();//Setting the position of the rectangle 2
rectangle2.set(leftRectangle2, topRectangle2, rightRectangle2, bottomRectangle2);
canvas.drawRect(rectangle1, paint);//Drawing the rectangles
canvas.drawRect(rectangle2, paint);
Bitmap cross = BitmapFactory.decodeResource(getResources(), R.drawable.animation);//Creating the image which is going to go up and down
canvas.drawBitmap(cross, canvas.getWidth()/2 - cross.getWidth()/2, crossY, paint);
if (crossGoesUp) {//If the crossGoesUp is true, that means the user last touch was in the rectangle 2, so the image goes up
if (crossY < -cross.getHeight())//Tests if the image isn't out of bounds
crossY = canvas.getHeight() + cross.getHeight();
crossY -= 5;
} else {
if (crossY > canvas.getHeight() + cross.getHeight())//Same as above
crossY = -cross.getHeight();
crossY += 5;
}
holder.unlockCanvasAndPost(canvas);
}
}
}
}
}
This is my logcat:
05-02 07:13:41.897: E/AndroidRuntime(1634): FATAL EXCEPTION: Thread-103
05-02 07:13:41.897: E/AndroidRuntime(1634): Process: garden.apps.my_apps, PID: 1634
05-02 07:13:41.897: E/AndroidRuntime(1634): java.lang.NullPointerException
05-02 07:13:41.897: E/AndroidRuntime(1634): at com.apps.my_apps.LearningThreads$ActivitySurface$mainThread.run(LearningThreads.java:90)
05-02 07:13:41.897: E/AndroidRuntime(1634): at java.lang.Thread.run(Thread.java:841)
you should use SurfaceHolder.Callback, your paint is invisible
paint.setARGB(alpha,Red,Green,Blue) - alpha 0..255 0-invisible 255-visible
public class LearningThreads extends Activity {
ActivitySurface activitySurface;
boolean crossGoesUp = false;//Sets if the cross goes up or down
int leftRectangle1, topRectangle1, rightRectangle1, bottomRectangle1;
int leftRectangle2, topRectangle2, rightRectangle2, bottomRectangle2;
protected void onCreate(Bundle bundle) {
super.onCreate(bundle);
activitySurface = new ActivitySurface(this);
activitySurface.setOnTouchListener(new canvasClicked());
setContentView(activitySurface);//Sets the content to be the class we've created
}
protected void onPause() {//When the app is paused, it calls the method which pauses the thread that is constantly running
super.onPause();
}
protected void onResume() {//When the app starts or restarts, it calls the method which starts the thread
super.onResume();
}
public class canvasClicked implements View.OnTouchListener {
public boolean onTouch(View v, MotionEvent e) {
if (e.getAction() == MotionEvent.ACTION_DOWN) {//Only if the user starts touching something because I'm not interested in when he releases
if (e.getX() <= leftRectangle1 && e.getX() >= rightRectangle1 && e.getY() <= topRectangle1 && e.getY() >= bottomRectangle1) {//Tests if the user touched one of the rectangles
crossGoesUp = false;
}
if (e.getX() <= leftRectangle2 && e.getX() >= rightRectangle2 && e.getY() <= topRectangle2 && e.getY() >= bottomRectangle2) {//Tests if the user touched the other rectangle
crossGoesUp = true;
}
}
return false;//It doesn't repeat
}
}
public class ActivitySurface extends SurfaceView implements SurfaceHolder.Callback {
Thread mainThread;
boolean isRunning = false;//Sets when the app is running or not
SurfaceHolder holder;//Gives us useful methods to use in the canvas
int crossY = 0;//Sets the y coordinate of the cross
public ActivitySurface(Context context) {
super(context);
holder = getHolder();
holder.addCallback(this);
}
public void resume() {
isRunning = true;
mainThread = new Thread(new mainThread());
mainThread.start();
}
public void pause() {
isRunning = false;
try {
mainThread.join();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
public class mainThread implements Runnable {//Takes care of the thread
public void run() {
while (isRunning) {
if (!holder.getSurface().isValid())//Tests if the surface is valid, if it is not it won't do anything until it is
continue;
Canvas canvas = holder.lockCanvas();//Creating the canvas: it has a mistake, everytime I use the canvas it gives a NullPointerException
canvas.drawRGB(50, 50, 50);//Setting the color of the canvas
leftRectangle1 = canvas.getWidth() / 4 - 40;//Setting the variables so they can be used outside this Thread
topRectangle1 = canvas.getHeight() / 2 - 25;
rightRectangle1 = canvas.getWidth() / 4 + 40;
bottomRectangle1 = canvas.getHeight() / 2 + 25;
leftRectangle2 = canvas.getWidth() / 4 + (canvas.getWidth() / 4) * 2 - 40;
topRectangle2 = canvas.getHeight() / 2 - 25;
rightRectangle2 = canvas.getWidth() / 4 + (canvas.getWidth() / 4) * 2 + 40;
bottomRectangle2 = canvas.getHeight() / 2 + 25;
Paint paint = new Paint();//Setting the paint which will define the colors of the rectangles
paint.setARGB(255, 100, 100, 100);
Rect rectangle1 = new Rect();//Setting the position of the rectangle 1
rectangle1.set(leftRectangle1, topRectangle1, rightRectangle1, bottomRectangle1);
Rect rectangle2 = new Rect();//Setting the position of the rectangle 2
rectangle2.set(leftRectangle2, topRectangle2, rightRectangle2, bottomRectangle2);
canvas.drawRect(rectangle1, paint);//Drawing the rectangles
canvas.drawRect(rectangle2, paint);
Bitmap cross = BitmapFactory.decodeResource(getResources(), R.drawable.animation);//Creating the image which is going to go up and down
canvas.drawBitmap(cross, canvas.getWidth() / 2 - cross.getWidth() / 2, crossY, paint);
if (crossGoesUp) {//If the crossGoesUp is true, that means the user last touch was in the rectangle 2, so the image goes up
if (crossY < -cross.getHeight())//Tests if the image isn't out of bounds
crossY = canvas.getHeight() + cross.getHeight();
crossY -= 5;
} else {
if (crossY > canvas.getHeight() + cross.getHeight())//Same as above
crossY = -cross.getHeight();
crossY += 5;
}
holder.unlockCanvasAndPost(canvas);
}
}
}
#Override
public void surfaceCreated(SurfaceHolder holder) {
resume();
}
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height) {
}
#Override
public void surfaceDestroyed(SurfaceHolder holder) {
pause();
}
}
someActivity.runOnUiThread(new Runnable() {
#Override
public void run() {
//Your code to run in GUI thread here
}//public void run() {
});
I hope this will help you.
I managed to figger it out by myself, the problem was in this block of code:
if (holder.getSurface().isValid())//Tests if the surface is valid, if it is not it won't do anything until it
continue;
I forgot to put the exclamation mark, so the app only did what was below when the surface was not valid and it gave me a NullPointerException.
Thank you anyway.
I am developing a simple app that produced bubbles on screen on touch. Bubble move around on the screen and get popped when it reaches the border of screen or if a user touches it. I have successfully coded a bubble to pop when reaches borders of the screen but can't figure out a way to detect if the user touched it.
I want to detect if the user touched any bubble on the screen.
Note:- The bubbles are created using custom view. Also I have included some important functions only but can include whole code if you want. Here's the code
public class BubbleActivity extends Activity {
// These variables are for testing purposes, do not modify
private final static int RANDOM = 0;
private final static int SINGLE = 1;
private final static int STILL = 2;
private static int speedMode = RANDOM;
private static final int MENU_STILL = Menu.FIRST;
private static final int MENU_SINGLE_SPEED = Menu.FIRST + 1;
private static final int MENU_RANDOM_SPEED = Menu.FIRST + 2;
private static final String TAG = "Lab-Graphics";
// Main view
private RelativeLayout mFrame;
// Bubble image
private Bitmap mBitmap;
// Display dimensions
private int mDisplayWidth, mDisplayHeight;
// Sound variables
// AudioManager
private AudioManager mAudioManager;
// SoundPool
private SoundPool mSoundPool;
// ID for the bubble popping sound
private int mSoundID;
// Audio volume
private float mStreamVolume;
// Gesture Detector
private GestureDetector mGestureDetector;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Set up user interface
mFrame = (RelativeLayout) findViewById(R.id.frame);
// Load basic bubble Bitmap
mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.b64);
}
#Override
protected void onResume() {
super.onResume();
// Manage bubble popping sound
}
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
// Get the size of the display so this view knows where borders are
mDisplayWidth = mFrame.getWidth();
mDisplayHeight = mFrame.getHeight();
}
}
// Set up GestureDetector
private void setupGestureDetector() {
mGestureDetector = new GestureDetector(this,
new GestureDetector.SimpleOnGestureListener() {
// Detecting if user touched bubble here
#Override
public boolean onSingleTapConfirmed(MotionEvent event) {
// Trying to get bubble position but can't just get x=0, y=0 tried
// many things
Log.d(TAG,""+((ViewGroup)mFrame).getChildCount());
for(int i=0; i<((ViewGroup)mFrame).getChildCount(); ++i) {
View nextChild = ((ViewGroup)mFrame).getChildAt(i);
Rect rect = new Rect();
nextChild.getLocalVisibleRect(rect);
int[] location = new int[2];
nextChild.getLocationOnScreen(location);
Log.d(TAG, "X = " + location[0] + " Y = " + location[1]);
}
if(event.getAction() == MotionEvent.ACTION_DOWN){
BubbleView bubbleView = new BubbleView(getApplicationContext(), event.getX(),event.getY());
bubbleView.start();
mFrame.addView(bubbleView);
}
return true;
}
});
}
#Override
public boolean onTouchEvent(MotionEvent event) {
// TODO - delegate the touch to the gestureDetector
return mGestureDetector.onTouchEvent(event);
}
#Override
protected void onPause() {
// TODO - Release all SoundPool resources
super.onPause();
}
// BubbleView is a View that displays a bubble.
// This class handles animating, drawing, popping amongst other actions.
// A new BubbleView is created for each bubble on the display
private class BubbleView extends View {
private static final int BITMAP_SIZE = 64;
private static final int REFRESH_RATE = 40;
private final Paint mPainter = new Paint();
private ScheduledFuture<?> mMoverFuture;
private int mScaledBitmapWidth;
private Bitmap mScaledBitmap;
// location, speed and direction of the bubble
private float mXPos, mYPos, mDx, mDy;
private long mRotate, mDRotate;
public BubbleView(Context context, float x, float y) {
super(context);
log("Creating Bubble at: x:" + x + " y:" + y);
// Create a new random number generator to
// randomize size, rotation, speed and direction
Random r = new Random();
// Creates the bubble bitmap for this BubbleView
createScaledBitmap(r);
// Adjust position to center the bubble under user's finger
mXPos = x - mScaledBitmapWidth / 2;
mYPos = y - mScaledBitmapWidth / 2;
// Set the BubbleView's speed and direction
setSpeedAndDirection(r);
// Set the BubbleView's rotation
setRotation(r);
mPainter.setAntiAlias(true);
}
// Start moving the BubbleView & updating the display
private void start() {
// Creates a WorkerThread
ScheduledExecutorService executor = Executors
.newScheduledThreadPool(1);
// Execute the run() in Worker Thread every REFRESH_RATE
// milliseconds
// Save reference to this job in mMoverFuture
mMoverFuture = executor.scheduleWithFixedDelay(new Runnable() {
#Override
public void run() {
// TODO - implement movement logic.
// Each time this method is run the BubbleView should
// move one step. If the BubbleView exits the display,
// stop the BubbleView's Worker Thread.
// Otherwise, request that the BubbleView be redrawn.
if(!isOutOfView()){
moveWhileOnScreen();
}
else{
stop(true);
}
}
}, 0, REFRESH_RATE, TimeUnit.MILLISECONDS);
}
private synchronized boolean intersects(float x, float y) {
// TODO - Return true if the BubbleView intersects position (x,y)
return false;
}
// Cancel the Bubble's movement
// Remove Bubble from mFrame
// Play pop sound if the BubbleView was popped
private void stop(final boolean popped) {
if (null != mMoverFuture && mMoverFuture.cancel(true)) {
// This work will be performed on the UI Thread
mFrame.post(new Runnable() {
#Override
public void run() {
// TODO - Remove the BubbleView from mFrame
if (popped) {
log("Pop!");
// TODO - If the bubble was popped by user,
// play the popping sound
mFrame.removeView(BubbleView.this);
//mMoverFuture.cancel(true);
mSoundPool.play(mSoundID, 1, 1, 1, 0, 1);
}
log("Bubble removed from view!");
}
});
}
}
// Change the Bubble's speed and direction
private synchronized void deflect(float velocityX, float velocityY) {
log("velocity X:" + velocityX + " velocity Y:" + velocityY);
//TODO - set mDx and mDy to be the new velocities divided by the REFRESH_RATE
mDx = velocityX/REFRESH_RATE;
mDy = velocityY/REFRESH_RATE;
}
// Draw the Bubble at its current location
#Override
protected synchronized void onDraw(Canvas canvas) {
// TODO - save the canvas
canvas.save();
// TODO - increase the rotation of the original image by mDRotate
mRotate = mRotate + mDRotate;
// TODO Rotate the canvas by current rotation
canvas.rotate(mRotate, mXPos + mScaledBitmapWidth/2, mYPos + mScaledBitmapWidth/2);
// TODO - draw the bitmap at it's new location
canvas.drawBitmap(mScaledBitmap, mXPos, mYPos,mPainter);
// TODO - restore the canvas
canvas.restore();
}
private synchronized boolean moveWhileOnScreen() {
// TODO - Move the BubbleView
// Returns true if the BubbleView has exited the screen
mXPos = mDx+mXPos;
mYPos = mDy+mYPos;
postInvalidate();
return false;
}
private boolean isOutOfView() {
// TODO - Return true if the BubbleView has exited the screen
if(mXPos + mScaledBitmapWidth/2 >= mDisplayWidth - mScaledBitmapWidth/2 || mXPos <0
||mYPos + mScaledBitmapWidth/2 >= mDisplayHeight - mScaledBitmapWidth/2 || mYPos <0){
return true;
}
return false;
}
}
Update :-
To clarify a bit, I want to get the location of all the bubbles on the screen and then compare them to event.getX() and event.getY() to detect if i tapped on any bubble. II have to check bubble tap in onSingleTapConfirmed(). I am correctly able to get the total number of bubbles but can't detect their location on the screen.
for(int i=0; i<((ViewGroup)mFrame).getChildCount(); ++i) {
View nextChild = ((ViewGroup)mFrame).getChildAt(i);
Rect rect = new Rect();
nextChild.getLocalVisibleRect(rect);
int[] location = new int[2];
nextChild.getLocationOnScreen(location);
Log.d(TAG, "X = " + location[0] + " Y = " + location[1]);
}
Above code gives the correct number of bubbles but return their coordinates as 0,0.
In your onSingleTapConfirmed function, try the following to iterate through your BubbleViews and pass the Event X and Y coordinates on.
for(int i=0;i<mFrame.getChildCount();i++){
BubbleView bubbleThis = (BubbleView) mFrame.getChildAt(i);
if (bubbleThis.intersects(event.getX(),event.getY())){
bubbleThis.stop(true);
return true;
}
}
The function in BubbleView should then return true if the X and Y fall inside its boundaries. I will add the function inside intersects function in BubbleView as clarification:
private synchronized boolean intersects(float x, float y) {
if ( (x>mXPos && x<(mXPos+mScaledBitmapWidth)) && (y>mYPos && y<(mYPos+mScaledBitmapWidth)) ) {
return true;
}
return false;
}
If you want to know if a user tapped a bubble, set its onClickListener. If you want to know if the user just touched it, override its onTouchEvent and look for ACTION_DOWN.
How are you implementing the onDown() method of your SimpleOnGestureListener?
Please take a look at these answers:
Gesture Detector not working
Android GestureDetector with SimpleOnGestureListener within SurfaceView
Detect which View was tapped in the onSingleTapConfirmed method
Bubble is circle in shape, so you just need to compare its radius with the distance between bubble center and the position.
mRadius = radius of the bubble
mDistance = distance between (event.getX(), event.getY()) and bubble center (mXPos + mRadius, mYPos + mRadius)
I trying to make a draw line using canvas. It has 0 value when the Activity is loaded then I have a Button that has click listener to change the value and draw a line. It works in emulator well but when I run in my real device (android version 4.1) the canvas didn't change but I know that I hit the button because I put a toast inside the click listener. This is really weird.
Do anyone encounter the same problem before?
any thoughts will be highly appreciated.
Below is my Activity:
public class MainActivity extends Activity{
private Paint paintFree = new Paint();
private Paint paintLocal = new Paint();
private Paint paintRoaming = new Paint();
private int freeUsage = 0;
private int localUsage = 0;
private int roamingUsage = 0;
private int freeBarPoints;
private int localBarPoints;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
overridePendingTransition(0, 0);
line();
((Button) findViewById(R.id.btn1)).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
freeUsage = 12;
localUsage = 1;
roamingUsage = 1;
line();
Log.i("Hit Btn1", "True");
Toast.makeText(v.getContext(), "Hit Btn1", Toast.LENGTH_SHORT).show();
}
});
}
class Draw extends View{
public Draw(Context context) {
super(context);
// TODO Auto-generated constructor stub
paintFree.setStrokeWidth(20f);
paintLocal.setStrokeWidth(20f);
paintRoaming.setStrokeWidth(20f);
if (freeUsage == 0){
paintFree.setColor(Color.GRAY);
} else {
paintFree.setColor(Color.rgb(70, 227, 78));
}
if (localUsage == 0){
paintLocal.setColor(Color.GRAY);
} else {
paintLocal.setColor(Color.rgb(238, 232, 102));
}
if (roamingUsage == 0){
paintRoaming.setColor(Color.GRAY);
} else {
paintRoaming.setColor(Color.rgb(101, 177, 231));
}
}
protected void onDraw(Canvas canvas) {
int maxBarLength = canvas.getWidth() * 4 / 5;
double totalBarPoints = freeUsage + localUsage + roamingUsage;
freeBarPoints = (int) Math.round(freeUsage * maxBarLength / totalBarPoints);
localBarPoints = (int) Math.round(localUsage * maxBarLength / totalBarPoints);
// need not compute the roaming bar points
int localStartX = 0 + Math.round(freeBarPoints);
int roamingStartX = (int) localStartX + Math.round(localBarPoints);
canvas.drawLine(0, 10, localStartX, 10, paintFree);
canvas.drawLine(localStartX, 10, roamingStartX, 10, paintLocal);
canvas.drawLine(roamingStartX, 10, maxBarLength, 10, paintRoaming);
}
}
public void line(){
Draw draw;
draw = new Draw(this);
((LinearLayout) findViewById(R.id.linear)).addView(draw);
}
}
You need to add an onMeasure implementation to your Draw class. Take a look at http://developer.android.com/training/custom-views/custom-drawing.html for more details.
I created a view type-class in which onDraw() method i am drawing some boxes. The thing in which i am not getting succeed is that, i want to disappear these boxes after 3-5 second. For this i am using timer and timerTask. In TimerTask i am overriding the method run() which changes the color of Paint object to white. The background color is also white so it will give the effect that boxes are erased. Can you guys help me out??
public class PlayView extends View
{
private float width,height;
private int touchatX, touchatY;
private boolean isanyBox, clearCanvas;
private Point points[];
private Paint box;
Timer timer;
TimerTask task;
// Set the number of points to be generated so we print that number of boxes on the board
public void nPoints(int n)
{
points = new Point[n];
box = new Paint();
box.setColor(Color.BLUE);
}
public void init()
{
isanyBox = false;
clearCanvas = true;
timer = new Timer();
task = new TimerTask()
{
#Override
public void run()
{
box.setColor(Color.WHITE);
}
};
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
// TODO Auto-generated method stub
width = w/6f;
height = h/6f;
Log.d("playview", getWidth()+" "+getHeight());
super.onSizeChanged(w, h, oldw, oldh);
}
public PlayView(Context context)
{
super(context);
setFocusable(true);
setFocusableInTouchMode(true);
init();
}
// Randomly generate the points and draw boxes on these points
public void generatePoints(int np)
{
Time sec = new Time();
Random random_Xpoints = new Random();
Random random_Ypoints = new Random();
random_Xpoints.setSeed(sec.second);
random_Ypoints.setSeed(sec.second);
nPoints(np); // set the number of points to be generated
for(int i=0; i<np; i++)
{
points[i] = new Point();
points[i].setX( ((random_Xpoints.nextInt(getWidth())/(int)width)*(int)width));
points[i].setY( ((random_Ypoints.nextInt(getHeight())/(int)height)*(int)height));
Log.d("Point "+1, points[i].getX()+" "+points[i].getY());
}
}
#Override
public boolean onTouchEvent(MotionEvent event)
{
// TODO Auto-generated method stub
invalidate();
isanyBox = true;
touchatX = (int) ((int) (event.getX()/width)*width);
touchatY = (int) ((int) (event.getY()/height)*height);
Log.d("onTouchEvent", event.getX()+" "+event.getY()+" "+touchatX+" "+touchatY);
invalidate();
return super.onTouchEvent(event);
}
public void onDraw(Canvas canvas)
{
Paint lineColor = new Paint();
lineColor.setColor(Color.BLACK);
//Box property
Paint boxColor = new Paint();
boxColor.setColor(Color.BLUE);
//Draw horizontal lines
for(int i=0; i<6; i++)
{
canvas.drawLine(0, i*height, getWidth(), i*height, lineColor);
}
//Draw vertical lines
for(int j=0; j<6; j++)
{
canvas.drawLine(j*width, 0, j*width, getHeight(), lineColor);
}
if(isanyBox)
{
canvas.drawRect(touchatX+2, touchatY+2, touchatX+width-1, touchatY+height-2, boxColor);
}
generatePoints(5);
for(int j=0; j<5; j++)
{
canvas.drawRect(points[j].getX()+2, points[j].getY()+2, points[j].getX()+width-1, points[j].getY()+height-2, box);
Log.d("BoxColor", ""+box);
}
if(clearCanvas)
{
timer.schedule(task, 3000);
clearCanvas = false;
invalidate();
}
}
}
call invalidate(); after changing the color. This will force the system to call onDraw() again.
#Override
public void run()
{
box.setColor(Color.WHITE);
invalidate();
}
edit:
I've never liked timers and now I now why, that's why and also for some reason the Android team suggests people not to use them as it can be read here: http://developer.android.com/reference/java/util/Timer.html
because you're on a class that extends View, you should just call postDelayed();
if(clearCanvas)
{
clearCanvas = false;
postDelayed(new Runnable{
#Override
public void run(){
box.setColor(Color.WHITE);
invalidate();
}
}, 3000);
}