Looping an image frame in android

Question

I want to do an animation, a wave moving from right to left. I made a image of a wave where the start of it coincide with the end

I want to do an animation where the wave move, with an animationlist I would need more than 400 frames and the size of the application would grow up...

I need a way to move this only frame from right to left, any help?

Answer 1

You could create a Drawable of your own that implements Animatable, and have the image move from right to left. It would actually be quite an useful thing to have. However, you wouldn't be able to specify it from XML, you'd have to construct it and set it programatically.

Answer 2

You can even create a gif and play this GIF: Below is the code:

Class MainActivity:

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(new MYGIFView(MainActivity.this));
    }

}

Class MYGIFView:

import java.io.InputStream;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Movie;
import android.view.View;

class MYGIFView extends View {

    Movie movie, movie1;
    InputStream is = null, is1 = null;
    long moviestart;

    public MYGIFView(Context context) {
        super(context);

        // Provide your own gif animation file

        is = context.getResources().openRawResource(R.drawable.animation);
        movie = Movie.decodeStream(is);

    }

    @Override
    protected void onDraw(Canvas canvas) {

        canvas.drawColor(Color.WHITE);
        super.onDraw(canvas);
        long now = android.os.SystemClock.uptimeMillis();
        System.out.println("now=" + now);
        if (moviestart == 0) { // first time
            moviestart = now;

        }
        System.out.println("\tmoviestart=" + moviestart);
        int relTime = (int) ((now - moviestart) % movie.duration());
        System.out.println("time=" + relTime + "\treltime=" + movie.duration());
        movie.setTime(relTime);
        movie.draw(canvas, this.getWidth() / 2 - 20, this.getHeight() / 2 - 40);
        this.invalidate();
    }
}

Inside the drawable folder will be your GIF image.

Answer 3

first, you have to double the size of your image src, having 2 waves not one. next , you have to play with the frame bounds of your imageview, you have to fit only ONE wave. this is the clue.

after take note of your image size, especially the width.

for the animation, use this:

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="-50%"
    android:fromYDelta="0%"
    android:toYDelta="0%"
    android:duration="500"
    android:repeatCount="1000"
    android:interpolator="@android:anim/linear_interpolator"
    android:zAdjustment="top" />

for instance you can name it res/anim/wave.xml

class (activity?):

    ...
    Animation anim = AnimationUtils.loadAnimation( this, R.anim.wave);
    anim.setRepeatMode(Animation.Infinite);
    animatedIm = (ImageView) findviewbyid(<your-id>)
    animatedIm.setAnimation(anim); 

you may need to play with the imageview size, to have a continous wave moving