Home » Android » games » canvas » Moving Images on Screen

About Byron Kiourtzoglou

Byron Kiourtzoglou
Byron is a master software engineer working in the IT and Telecom domains. He is an applications developer in a wide variety of applications/services. He is currently acting as the team leader and technical architect for a proprietary service creation and integration platform for both the IT and Telecom industries in addition to a in-house big data real-time analytics solution. He is always fascinated by SOA, middleware services and mobile development. Byron is co-founder and Executive Editor at Java Code Geeks.

Moving Images on Screen

In this example we shall show you how to create and display moving Images on the screen in your Android Application.

For example let’s have a moving image that will move through the screen and it bounces back when it hits the edge of the screen.

This is an example of a very basic animation that you might want to include in your application.
 
 
 
 
 
To create that kind of animation one should perform the following steps:

  • create a Speed class containing all the necessary information concerning the speed of the image, eg the direction, the horizontal and vertical velocity
  • create an update function that will perform collision detection and draw the position of the image at any given moment

as demonstrated in the code snippet(s) that follow.

package net.obviam.droidz.model.components;

public class Speed {

	public static final int DIRECTION_RIGHT	= 1;
	public static final int DIRECTION_LEFT	= -1;
	public static final int DIRECTION_UP	= -1;
	public static final int DIRECTION_DOWN	= 1;

	private float xv = 1;	// velocity value on the X axis
	private float yv = 1;	// velocity value on the Y axis

	private int xDirection = DIRECTION_RIGHT;
	private int yDirection = DIRECTION_DOWN;

	public Speed() {
		this.xv = 1;
		this.yv = 1;
	}

	public Speed(float xv, float yv) {
		this.xv = xv;
		this.yv = yv;
	}

	public float getXv() {
		return xv;
	}
	public void setXv(float xv) {
		this.xv = xv;
	}
	public float getYv() {
		return yv;
	}
	public void setYv(float yv) {
		this.yv = yv;
	}

	public int getxDirection() {
		return xDirection;
	}
	public void setxDirection(int xDirection) {
		this.xDirection = xDirection;
	}
	public int getyDirection() {
		return yDirection;
	}
	public void setyDirection(int yDirection) {
		this.yDirection = yDirection;
	}

	// changes the direction on the X axis
	public void toggleXDirection() {
		xDirection = xDirection * -1;
	}

	// changes the direction on the Y axis
	public void toggleYDirection() {
		yDirection = yDirection * -1;
	}
}
public void run() {
	Canvas canvas;
	Log.d(TAG, "Starting game loop");
	while (running) {
		canvas = null;
		// try locking the canvas for exclusive pixel editing
		// in the surface
		try {
			canvas = this.surfaceHolder.lockCanvas();
			synchronized (surfaceHolder) {
				// update game state
				this.gamePanel.update();
				// render state to the screen
				// draws the canvas on the panel
				this.gamePanel.render(canvas);
			}
		} finally {
			// in case of an exception the surface is not left in
			// an inconsistent state
			if (canvas != null) {
				surfaceHolder.unlockCanvasAndPost(canvas);
			}
		}	// end finally
	}
}
public void update() {
	// check collision with right wall if heading right
	if (droid.getSpeed().getxDirection() == Speed.DIRECTION_RIGHT
			&& droid.getX() + droid.getBitmap().getWidth() / 2 >= getWidth()) {
		droid.getSpeed().toggleXDirection();
	}
	// check collision with left wall if heading left
	if (droid.getSpeed().getxDirection() == Speed.DIRECTION_LEFT
			&& droid.getX() - droid.getBitmap().getWidth() / 2 <= 0) {
		droid.getSpeed().toggleXDirection();
	}
	// check collision with bottom wall if heading down
	if (droid.getSpeed().getyDirection() == Speed.DIRECTION_DOWN
			&& droid.getY() + droid.getBitmap().getHeight() / 2 >= getHeight()) {
		droid.getSpeed().toggleYDirection();
	}
	// check collision with top wall if heading up
	if (droid.getSpeed().getyDirection() == Speed.DIRECTION_UP
			&& droid.getY() - droid.getBitmap().getHeight() / 2 <= 0) {
		droid.getSpeed().toggleYDirection();
	}
	// Update the lone droid
	droid.update();
}

 
This was an example of how to create an display moving images in the Screen in Android.

Related Article:

Reference: Moving Images on the Screen with Android from our JCG partner Tamas Jano at the “Against The Grain” blog.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

 

and many more ....

 

Receive Java & Developer job alerts in your Area

 

Subscribe
Notify of
guest
The comment form collects your name, email and content to allow us keep track of the comments placed on the website. Please read and accept our website Terms and Privacy Policy to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments