Android Cómo crear una secuencia de imágenes simple

By | 02/01/2017

Puedes crear animaciones simples con una serie de imágenes en secuencia utilizando ImageView en conjunto con AnimationDrawable.

La forma más sencilla de crear una animación por cuadro es definir la animación en un archivo XML, en la carpeta /res/drawable/ y establecerla como fondo de un ImageView para luego iniciar la secuencia.

Lo que tienes que hacer es definir un ImageView al cual le agregas un background resource (setBackgroundResource). Este resource será un xml con la serie de imágenes a mostrar en secuencia.
Luego tomaremos ese brackground en un AnimationDrawable para iniciar la secuencia de imágenes.

Cómo definir definir ImageView y AnimationDrawable

Defines tu ImageView como siempre y luego en tu código se seteas el xml que estable las imágenes a mostrar.


<ImageView
   android:id="@+id/imageView"
   android:layout_width="200dp"
   android:layout_height="200dp"
   android:src="@drawable/anim0"
   android:layout_centerVertical="true"
   android:layout_centerHorizontal="true" />


imageView = (ImageView) findViewById(R.id.imageView);

// set the xml with images
imageView.setBackgroundResource(R.drawable.animation);
// get the background to show the animation 
frameAnimation = (AnimationDrawable) imageView.getBackground();

Cómo definir tu xml para las animaciones

Dentro de la carpeta drawable debes crear un xml, en este caso se llamará \res\drawable\animation.xml

En el xml puedes observar que estableces la duración también de cada cada imagen, podría ser distinta según como lo necesites.

Este xml fue el que seteaste en el Background Resource del ImageView
imageView.setBackgroundResource(R.drawable.animation);

<?xml version="1.0" encoding="utf-8"?>
<animation-list android:id="@+id/selected"
   android:oneshot="false"
   xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/anim0" android:duration="1000" />
   <item android:drawable="@drawable/anim1" android:duration="1000" />
   <item android:drawable="@drawable/anim2" android:duration="1000" />
   <item android:drawable="@drawable/anim3" android:duration="1000" />
   <item android:drawable="@drawable/anim4" android:duration="1000" />
   <item android:drawable="@drawable/anim5" android:duration="1000" />
   <item android:drawable="@drawable/anim6" android:duration="1000" />
   <item android:drawable="@drawable/anim7" android:duration="1000" />
   <item android:drawable="@drawable/anim8" android:duration="1000" />
</animation-list>

Iniciar o parar la animación AnimationDrawable

Tan simple como start() o si quisieramos detenerla .stop()


// start animation
frameAnimation.start();

// stop animation
if(frameAnimation.isRunning()) {
    frameAnimation.stop();
    // set first image (optional)
    frameAnimation.selectDrawable(0);
}

El código para crear una secuencia de imágenes con AnimationDrawable te queda así


public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private AnimationDrawable frameAnimation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = (ImageView) findViewById(R.id.imageView);
        imageView.setImageResource(0);

        // set the xml with images
        imageView.setBackgroundResource(R.drawable.animation);
        // get the background to show the animation
        frameAnimation = (AnimationDrawable) imageView.getBackground();

    }

    // onclick button start in activity xml
    public void start(View view) {
        // start animation
        frameAnimation.start();
    }

    // onclick button stop in activity xml
    public void stop(View view) {
        // stop animation
        if(frameAnimation.isRunning()) {
            frameAnimation.stop();
            // set first image (optional)
            frameAnimation.selectDrawable(0);
        }
    }

}

Descarga este código completo para visualizar en Android Studio

android_basic_image_animation_example

Compartir esto:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *