How to create ImageView animation sequence from drawable resources?

Question

I am trying to load 11 images from the drawable resources and display them in an ImageView with a delay. Practically doing something like AnimationDrawable, since creating such results in an OutOfMemory exception and a crash. It is both reinventing the wheel and some practice but still causes the app to crash. If I just init the imgView and do imgView.setImageResource(R.drawable.pic1); the image is loaded. When I set a Handler and try to do postDelayed() like below I'm just able to see the background image of the layout before the app crashes with nothing in Logcat. Here is the code:

package com.forms.test;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class Animacia extends Activity {

final static int[] imgGalleryResources = { 
    R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,
    R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,
    R.drawable.pic7, R.drawable.pic8, R.drawable.pic9,
    R.drawable.pic10, R.drawable.pic11
};

ImageView imgView;
Handler   handlerTimer = new Handler();

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.animation);

    initGUI();
}

private void initGUI() {
    int i;
    imgView = (ImageView)findViewById(R.id.imgView);
    imgView.setAnimation(AnimationUtils.loadAnimation(this, R.anim.alpha));

    for(i = 0; i < imgGalleryResources.length ;i++) {
        final int res = imgGalleryResources[i];
        handlerTimer.postDelayed(
                new Runnable() {
                    public void run() {
                        imgView.setImageResource(res);
                    }
                }, 
                5000
        );
    }
}
}

Related to this code is the imgView from layout/animation.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical" 
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent"
   android:background="@drawable/heart"
   android:id="@+id/frameLayout1">

   <ImageView
       android:id="@+id/imgView"  
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" />

</FrameLayout>

And the alpha animation of the imgView from anim/alpha.xml:

<?xml version="1.0" encoding="utf-8"?>
<alpha>
    <alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.3"
android:toAlpha="0.9"
android:duration="2000" />
</alpha>

All tips and comments are welcome.

Maybe this can be of some use http://stackoverflow.com/questions/5880559/how-to-make-smooth-frame-animation-in-android — Jacob, Feb 21 '13 at 01:17

score 1 · Answer 1 · edited Apr 20 '13 at 15:10

1

Did you try this method?

private int pos = 0;
private Timer timer;
private static final int UPDATE_PICTURE = 5;
private void initGUI() {
    imgView = (ImageView)findViewById(R.id.imgView);
    imgView.setAnimation(AnimationUtils.loadAnimation(this, R.anim.alpha));

    handlerTimer = new Handler() {
        public void handleMessage(Message msg) {
            if(msg.what == UPDATE_PICTURE)
            {
                 //start animation here
                imgView.setImageResource(msg.arg1);
                imgView.invalidate();
            }
        }
    };

    timer = new Timer();
    timer.scheduleAtFixedRate(new TimerTask() {

        public void run() {
            Message msg = new Message();
            msg.what = UPDATE_PICTURE;
            msg.arg1 = imgGalleryResources[pos++];
            handlerTimer.sendMessage(msg);
            if(pos>=imgGalleryResources.length)
                timer.cancel();
        }
    }, 0, 2000);

}

edited Apr 20 '13 at 15:10

Peter O.

32,158
14
82
96

answered Feb 20 '13 at 23:36

julien dumortier

1,303
1
13
28

Well unfortunately this also results in a crash... For the sake of clarity: I'm merely trying to create an image slide show from a few drawables with a delay between them and an alpha animation to fadein the next image. That's about it. Generally it would be nice to have the same effect as setRepeatMode(Animation.RESTART); and setRepeatCount(Animation.INFINITE); in order to start again from image 1 once image 11 was displayed but this shouldn't be a challenge if I get it to run once :) – freemind Feb 21 '13 at 00:43
this code works with me. And you get an error of type "out of memory", I think a problem of image size. what the resolution of your pictures ? have you try with other picture (with smaller resolution) ? – julien dumortier Feb 21 '13 at 08:51
The only image loaded (R.drawable.pic1) has dimensions W:680px H:453px. All the others are way above that. I thought that this could be the problem, but on one hand the setImageResource() method does some rescaling of images itself. Additionally I looked around and implemented 2 methods (not posted here) to try to manually rescale the images and set them to the ImageView with setImageBitmap() but it is probably wrong what I did since in every case i get "out of memory" errors. What are the biggest possible dimensions for LANDSCAPE/PORTRAIT? How is it that other tools to output bigger images? – freemind Feb 21 '13 at 18:02

How to create ImageView animation sequence from drawable resources?

1 Answers1