Develop Reference

Introduce delay between image change in a loop

I am trying to introduce a delay between image change in a for loop. I tried Thread.sleep(1000), but the delay is introduced before the image change and after the total sleep period is over, the ImageView dispalys the final image. I tried a lot of solutions available on the internet but nothing works.
public void start(View view){
ImageView display = (ImageView)findViewById(R.id.imageView);
for (int i=0;i<6;i++){
display.setImageResource(R.drawable.dice1+i);
Thread.sleep(2000);
}
}
I need the iteration to wait for 2 seconds so that the image can be viewed.

Two problems.
1)Don't sleep on the main thread. Ever. Instead, create a Handler and use postDelayed with a Runnable that changes the image.
2)You can't do math on resource ids like that. You can't assume they'll be consecutive just because they're next to each other in the file. Create an array with the ids and use the image at index i.

You can get the sequence of image by the image name as you asked
private int image = 0;
private static final int MAX_IMAGES = 10;
private Handler mHandler = new Handler() {
#Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (msg.what == 55) {
image++;
if (image > MAX_IMAGES) {
image = 1;
}
imageView.setImageDrawable(getImageByName("dice" + image, TestActivity.this));
mHandler.sendEmptyMessageDelayed(55, 2000);
}
}
};
public static Drawable getImageByName(String name, Context context) {
Resources resources = context.getResources();
final int resourceId = resources.getIdentifier(name, "drawable",
context.getPackageName());
return ContextCompat.getDrawable(context, resourceId);
}
Now start the image sequence by calling
mHandler.sendEmptyMessageDelayed(55, 2000);
Your image will be changed per 2 secs

I think a CountDown timer can help in this situation. A few days ago I asked a similar question at stackoverflow, and I got this answer. I think it may be a good reference for you.

How to make a thread run periodically for computing game movement?

I've been building a game for some time, and just realized I did something very wrong the whole time, and still don't really know better.
I have a control class, my MainActivity, which pretty much only does the following:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
operator=new Operator(getBaseContext());
setContentView(R.layout.activity_main); //<- framelayout with the view and two buttons on top
}
//Buttons:
public void shoot(View view) {
operator.shoot(view.getId());
}
public void pause(View view) {
AndronXView.running=!AndronXView.running;
}
Then there is my View, which draws Actors and makes my workerthread compute everything:
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
animHandler = new Handler();
animHandler.postDelayed(loadLvl1, 5000);
arrayOfActors = operator.getActors(); //simplyfied to one array
if(arrayOfActors==null)
arrayOfActors=new Actor[0]; //if op hasn't loaded yet, prevent NPE in onDraw
//stripped of unimportant color and size computing stuff
}
protected void onDraw(final Canvas canvas){
//Should I copy player before doing this? Never got problems here so far.
canvas.drawBitmap(operator.player.getCurrentGraphic(), operator.player.getX(), operator.player.getY(), null);
for(Actor actor:arrayOfActors) {
canvas.drawBitmap(actor.getCurrentGraphic(), actor.getX(), actor.getY(), null);
}
if (running) {
operator.run(); //Compute. Realized my mistake here and changed the inside, wait for it.
animHandler.postDelayed(r, Operator.FRAME_RATE); //r=invalidate();
animHandler.post(loadActors); //get Arrays from op
}else animHandler.post(wait);
}
Runnable wait = new Runnable() {
#Override
public void run() {
if (running)
animHandler.post(r);
else animHandler.postDelayed(this, Operator.FRAME_RATE);
}
};
#Override
public boolean onTouchEvent(#NonNull MotionEvent event){
int action = event.getAction();
if(action==MotionEvent.ACTION_DOWN || action==MotionEvent.ACTION_MOVE){
operator.player.setSpeed((event.getX()-operator.player.getHorizontalMid())
/AndronX.PLAYER_MOVE_LAG,
(event.getY()-operator.player.getVerticalMid())/AndronX.PLAYER_MOVE_LAG);
}
return true;
}
And then there is my Operator, extending Thread, which computes movement and interactions of the actors in the background:
public Operator(Context baseContext) {
this.player = new Player(baseContext); //context to load drawable from ressource
arrayListOfActors=new ArrayList<>();
//Looper.prepare(); //it crashed and said only one Looper/Thread
//Looper.loop(); //so I removed it
opHandler = new Handler();
}
#Override
public void run() {
opHandler.post(gameStep); //before, I had the whole processing inside this run().
}
private Runnable gameStep = new Runnable(){
player.move();
computeEveryMemberOf(arrayListOfActors); //much computing happens here, usually
//contains 1-30 Actors that get cross-referenced
arrayOfActors = arrayListOfActors.toArray(new Actor[arrayListOfActors.size()]);
}
public Actor[] getActors(){
return arrayOfActors;
}
Before, I had the computign directly in my operators run() method, which I realized made the background thread useless. I#m not sure though if this is the right way, should I let the operator loop itself, would the two threads kinda stay in sync? Does it even matter?
Or should I go run(){ sleep(FRAME_RATE); compute();}?
Edit: A big problem arose, and I'm not sure if it's because of this, so I really need an answer here how to do this the right way.
With every step, I move some actors a little bit up or down, in a cosinus wave like speed (like it's projection to an axis), and currently, the actual movement doesn't get through to the view, they just jump from max to min and back, although they do it in the desired speed(looks like extreme lag).
Actually you can see for yourself what this problem is: https://dl.dropboxusercontent.com/u/28278772/AndronX.apk

How to do an update loop?

Im doing a little app, its a memory game, you choose one card, it turns up, you choose the second card, it turns up, if they are the same they are out of the game, if they dont match, they are turned down again.
I have
public class PlayActivity extends Activity implements OnClickListener.
The flip events are trigged by click handlers, declared at public void onCreate(Bundle savedInstanceState) they work fine.
When the first card is selected, it calls my method Action, this sets the image from default (the card back) to the 'real' image (the card front). Fine so far.
My problem is the second card: when its selected, it calls method Action, where it should set the front image (lets call it 'middle action'), then a litle pause (a while loop doing nothing until x milliseconds), and then it checks what to do (if they match or not) and turn them down or take the out of the game. You can see where is the problem: the screen only displays the result after x milliseconds (the 'middle action' is not being draw).
Since I have done some little games with XNA, I know the loop Update-Draw, so I know here im updating the same thing twice so always the last one is drawn. But here, the only updating I can have is when click events are trigged, I need a periodic, constant update.
Help?

You can probably use a TimerTask in order to handle that. You can implement it like the following.
This probably isn't the most robust way to do it, but it is an idea. If I figure out a better way to do it in a short time I'll edit my post. :)
Also I would like to add that if you want to make a game that uses an update / draw loop you may need to use a SurfaceView to draw your game. Look at the example here http://developer.android.com/resources/samples/JetBoy/index.html
public class TestGameActivity extends Activity {
/* UIHandler prevents exceptions from
performing UI logic on a non-UI thread */
private static final int MESSAGE_HIDE_CARD = 0;
private class UIHandler extends Handler {
#Override
public void handleMessage(Message msg) {
switch (msg.what) {
case MESSAGE_HIDE_CARD:
ImageView cardView = (ImageView) msg.obj;
cardView.setImageResource(R.drawable.faceDownCard);
break;
}
}
}
private UIHandler handler = new UIHandler();
// Handle my click. V is the card view
public void onClick(View v) {
final int viewID = v.getId();
// Create a hide task
TimerTask hideTask = new TimerTask() {
#Override
public void run() {
// Construct a message so you won't get an exception
Message msg = new Message();
msg.what = MESSAGE_HIDE_CARD;
msg.obj = findViewById(viewID);
handler.sendMessage(msg);
}
};
// Schedule the task for 2 seconds
new Timer().schedule(hideTask, 2000);
}
}

using handler in android to create series of png's

I am trying to put an image on the screen and change it every five seconds. This is not in an Activity class. Sorry if is a stupid question. This is a huge learning curve for me.
public class Panel extends SurfaceView implements SurfaceHolder.Callback {
private Handler mHandler = new Handler();
//stuff
public void doDraw(Canvas canvas) {
int counter = 0;
canvas.drawColor(Color.BLACK);
dot1.doDraw(getResources(), canvas, counter);
mHandler.removeCallbacks(panelDraw);
mHandler.postDelayed(panelDraw, 5000);
}
private Runnable panelDraw = new Runnable() {
public void run() {
}
};
(Panel->)mPanel.doDraw(canvas) in another class calls the doDraw listed in Panel. This is in a loop.
As far as I can tell, the first image isn't stopping for five seconds, and due to other code the cat pic flashes all over the screen. Can I get away with putting nothing in run()? I wanted to put the dot1.doDraw(getResources(), canvas, counter) one in there, but I couldn't/didn't think I could give void run() parameters or Runnable panelDraw resources, canvas, counter parameters.
Any help is appreciated. Let me know if I need to give more code.
A little more about my game: Kitten photos should appear one at random locations on the screen. If one does not click on the current kitty image with an allotted time, the game ends. These pictures last < 1 sec in the end (right now it's more for testing purposes). If you don't click the kitty in that time span, the game ends.
I heard that if you need to do a lot of drawing, you're better off using SurfaceView like in the tutorial I followed very closely: http://www.droidnova.com/2d-tutorial-series-part-v,848.html My Activity class (Scene1) has setContentView(new Panel(this)), so I don't know how to put stuff in the Activity class when it all goes in the Panel class. Like where do I put the ImageView code if the Activity thread doesn't really do much and hands it all off to Panel? Also if I have a ViewThread (public class ViewThread extends Thread) that handles the running:
public void run() {
Canvas canvas = null;
while (mRun1) {
do {
canvas = mHolder.lockCanvas();
if (canvas != null) {
mPanel.doDraw(canvas);
mRun1 = true;
mRun1 = mPanel.get_run();
mHolder.unlockCanvasAndPost(canvas);
}
} while (mRun1 == true);
The dot class has something like:
public void firstRing(Resources res, Canvas canvas, int counter){
Random rand = new Random();
switch(counter) {
case 0: mBitmap = BitmapFactory.decodeResource(res,
R.drawable.cat1_m);
break;
case 1: mBitmap = BitmapFactory.decodeResource(res,
R.drawable.cat2_m);
break;
case 2: mBitmap = BitmapFactory.decodeResource(res,
R.drawable.cat2_m);
break;
case 3: mBitmap = BitmapFactory.decodeResource(res,
R.drawable.cat2_m);
break;
case 4: mBitmap = BitmapFactory.decodeResource(res,
R.drawable.cat2_m);
break;
case 5: mBitmap = BitmapFactory.decodeResource(res,
R.drawable.cat1_m);
break;
}
mX = rand.nextInt((int)(Panel.mWidth - mBitmap.getWidth()));
mY = rand.nextInt((int)(Panel.mHeight - mBitmap.getHeight()));
canvas.drawBitmap(mBitmap, mX, mY, null);
and
public void doDraw(Resources res, Canvas canvas, int counter) {
firstRing(res, canvas, counter);
}
Thanks for the info, Barry, although I am a little confused. Do I try ImageView or do I stick with Handler(), although I don't know how to use it and it's not working now? Do I need something in public void run()?

This code should work better than my last answer, but I haven't compiled or tested it. Even if it doesn't work it will point you in the right direction. I assume you have an Activity subclass somewhere so just copy my code into your activity. Your layout should have an <ImageView> tag in it somewhere.
The code below creates a Handler in Activity.onCreate(), which is run in the UI thread, guaranteeing all calls to the Handler will also be run in the UI thread. It then calls showNextKittyImage() to display the first image. showNextKittyImage() sets the Drawable resource id for the ImageView, and then calls Handler.sendEmptyMessageDelayed() to call the handler 5 seconds later. The Handler calls showNextKittyImage() and the cycle repeats.
An ImageView is still preferable to a SurfaceView because it is designed to display images. All you need to do is pass it the Drawable resource id instead of messing with Bitmaps. If you really want or need to do it with a SurfaceView then I cannot help you.
This code will also not make the kittens appear at random locations. Get it working in one location first, then add code to move the ImageView around the screen randomly. If you need help at that point I strongly recommend you post a new question as you've asked A LOT for one posting.
Good luck,
Barry
public class KittyActivity extends Activity {
Handler mHandler;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Inflate your view
setContentView(R.layout.YOUR_LAYOUT);
// Create a handler ON THE UI THREAD
mHandler = new Handler(Message result) {
public void handleMessage(Message result) {
showNextKittyImage();
}
};
// Show the first kitty
showNextKittyImage();
}
public void showNextKittyImage() {
int kitty = getNextKitty();
ImageView iv = findViewById(R.id.YOUR_IMAGE_VIEW_ID);
iv.setImageResource(kitty);
// OPTIONAL: Move the ImageView to a new random location
mHandler.sendEmptyMessageDelayed(0, 5000);
}
private int getNextKitty() {
// Your code to get the next kitty drawable id
}
}

Draw high res animations with high frame rate on Android

I've got 30+ single bitmaps (320x240 pixels) that I would like to display one after another in full screen on Android devices resulting in an animation. Currently I implemented the animation using an ImageView and a Timer that sets the next frame and then sends a message that will apply the next frame. The resulting frame rate is very low: < 2 fps.
The timer:
animationTimer.scheduleAtFixedRate(new TimerTask() {
#Override
public void run() {
Drawable frame = getNextFrame();
if (frame != null) {
Message message = animationFrameHandler.obtainMessage(1, frame);
animationFrameHandler.sendMessage(message);
}
}
}, 0, (int) (1000.0d / fps));
The handler:
final Handler animationFrameHandler = new Handler() {
#Override
public void handleMessage(Message message) {
setImageDrawable((Drawable) message.obj);
}
};
Since I want to achieve frame rates up to 30 fps I have to make use of another mechanism and heard of Canvas.drawBitmapMesh() and OpenGL.
If possible I would like to avoid using OpenGL.
Thank you very sharing your experiences!

My now working approach is the following:
Before starting the animation, load every frame into a List<Bitmap>. Important: Call System.gc() if you're getting OutOfMemoryErrors – that really helps loading more bitmaps into the memory. Then have a thread running that posts the next frame to a View instance that then update it's canvas.
Loading the frames and starting the animation
// Loading the frames before starting the animation
List<Bitmap> frames = new ArrayList<Bitmap>();
for (int i = 0; i < 30; i++) {
// Load next frame (e. g. from drawable or assets folder)
frames.add(...);
// Do garbage collection every 3rd frame; really helps loading all frames into memory
if (i %% 3 == 0) {
System.gc();
}
}
// Start animation
frameIndex = 0;
animationThread.start();
Thread that applies the next frame
private final class AnimationThread extends Thread {
#Override
public void run() {
while (!isInterrupted()) {
// Post next frame to be displayed
animationView.postFrame(frames.get(frameIndex));
// Apply next frame (restart if last frame has reached)
frameIndex++;
if (frameIndex >= frames.size()) {
frameIndex = 0;
}
try {
sleep(33); // delay between frames in msec (33 msec mean 30 fps)
} catch (InterruptedException e) {
break;
}
}
}
}
The animation view
class AnimationView extends View {
Bitmap frame = null;
public void postFrame(Bitmap frame) {
Message message = frameHandler.obtainMessage(0, frame);
frameHandler.sendMessage(message);
}
protected final Handler frameHandler = new Handler() {
#Override
public void handleMessage(Message message) {
if (message.obj != null) {
frame = (Bitmap) message.obj;
} else {
frame = null;
}
invalidate();
}
}
#Override
protected void onDraw(Canvas canvas) {
if (frame == null) return;
canvas.drawARGB(0, 0, 0, 0);
canvas.drawBitmap(frame, null, null, null);
}
}

You should look at the FrameAnimation class; http://developer.android.com/guide/topics/graphics/2d-graphics.html#frame-animation to do frame animation with Androids animation.
Though that might still be too slow.
The other alternative if you don't want to use OpenGL ES is to draw to the Canvas as you've mentioned. But just use .drawBitmap, not the drawBitmapMesh. Create a SurfaceView, which has a thread, that thread should draw on your Canvas at whatever interval you want.
It's pretty straightforward, just read the Android docs, the information is all there.

I'll let someone else go into the best way of doing this but one thing that immediately jumps to mind from your post that isn't helping is using TimerTask is a terrible way to do this and is not meant for animation.

Probably won't help with performance, but if those bitmaps are resources you might want to consider using an AnimationDrawable. If not, try to extend Drawable and implement the Animatable interface. Views already have built-in support for animating drawables, no need to use a handler for that.
One way to improve performance might be to match the bit-depth of the drawables to those of your current window. Romain Guy did a keynote on this and animations in general once: http://www.youtube.com/watch?v=duefsFTJXzc