Creando una animación sencilla en Android

Cabecera "Creando una animación sencilla en Android"

Hoy vengo a hablar sobre cómo crear una sencilla animación en nuestra aplicación Android.

Hay muchas formas de crear animaciones en Android, algunas más básicas y por tanto, sencillas y otras mucho más elaboradas y complejas. La que aquí veremos es una simple animación que constará de varias imágenes secuenciales que al mostrarse una tras de otra crean el efecto de animación.

Esto nos servirá para indicar al usuario que se está realizando un proceso en segundo plano, ya sea descargar una imagen, almacenar algo en la base de datos, recogiendo información de internet, etc. Yo, por ejemplo la he creado para añadir a mi aplicación del "Telescopio Abierto Divulgación" para indicar precisamente que se está descargando la imagen cuando el usuario pincha en una de ellas.

Vamos a crear un ejemplo práctico con esa misma animación y al final pondré un pequeño video que muestra el funcionamiento final. Usaré Android Studio aunque si prefieres puedes usar Eclipse o el IDE de tu preferencia. No voy a entrar en detalles sobre cómo crear el proyecto ni demás detalles básicos, tan sólo me centraré en el código.

1.- Creando la animación

Pues bien, lo primero es crear un proyecto al que para el ejemplo he puesto de nombre "Hello Animacion Simple", una vez creado y configurado el proyecto empezaremos por crear la animación, necesitaremos 5 imágenes:

Imagen 1 Imagen 2 Imagen 3 Imagen 4 Imagen 5
Animación 1 Animación 2 Animación 3 Animación 4 Animación 5

Con esas imágenes dentro de la carpeta "drawable", vamos a crear el fichero animacion.xml (también dentro de "drawable"), que contendrá lo siguiente:

 

<?xml version="1.0" encoding="utf-8"?>
 
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
                android:oneshot="false">
    <item android:drawable="@drawable/saving_image_white" android:duration="150" />
    <item android:drawable="@drawable/saving_image_white_1" android:duration="150" />
    <item android:drawable="@drawable/saving_image_white_2" android:duration="150" />
    <item android:drawable="@drawable/saving_image_white_3" android:duration="150" />
    <item android:drawable="@drawable/saving_image_white_4" android:duration="150" />
</animation-list>

Lo que crea una animación con cada una de las cinco imágenes por el orden deseado e indica que se reproducirá continuamente (android:oneshot="false", si estuviera a true sólo se reproduciría una única vez), además de una duración de cada imagen de 150 milisegundos, podemos aumentarlo a reducirlo para hacer que la animación sea más lenta o más rápida.

Con esto ya tenemos nuestra animación preparada, así de sencillo, sólo quedaría inicializarla en el código principal de la actividad.

2.- Creando el Layout principal de nuestra Activity

En la carpeta "res/layout" editamos el fichero activity_main.xml que se habrá creado al hacer nuestro nuevo proyecto (a no ser que le hayamos cambiado el nombre, que tendrá el nombre indicado) y le añadimos dos botones, uno para iniciar la animación y otro para detenerla y un ImageView que será el contenedor para nuestra animación:

 

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        tools:context=".MainActivity"
        android:background="@android:color/darker_gray"
        android:orientation="vertical">
 
    <Button
            android:id="@+id/btn_iniciar_animacion"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/iniciar"/>
 
    <ImageView
            android:id="@+id/iv_animacion"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"/>
 
    <Button
            android:id="@+id/btn_detener_animacion"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/detener"/>
</LinearLayout>

 

Cómo podemos observar no hay nada especial más que lo comentado. Vamos a crear la lógica principal del programa.

3.- Lógica principal de la aplicación

Aquí básicamente pondremos los Listener de los botones con su funcionalidad y asignaremos la animación al ImageView. Cómo ya hemos dicho antes, el botón btn_iniciar comenzará a reproducir la animación al ser pulsado, mientras que el botón btn_detener será el encargado de detenerla:

 

package com.example.helloanimacionsimple;
 
import android.content.DialogInterface;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
 
public class MainActivity extends Activity implements View.OnClickListener{
    private Button btnIniciar, btnDetener;
    private ImageView ivAnimacion;
    private AnimationDrawable savingAnimation;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        btnIniciar = (Button)findViewById(R.id.btn_iniciar_animacion);
        btnDetener = (Button)findViewById(R.id.btn_detener_animacion);
 
        btnIniciar.setOnClickListener(this);
        btnDetener.setOnClickListener(this);
 
        ivAnimacion = (ImageView)findViewById(R.id.iv_animacion);
        ivAnimacion.setBackgroundResource(R.drawable.animacion);
        savingAnimation = (AnimationDrawable)ivAnimacion.getBackground();
    }
 
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
 
    @Override
    public void onClick(View v) {
        switch(v.getId()){
            case R.id.btn_iniciar_animacion:
                savingAnimation.start();
                break;
            case R.id.btn_detener_animacion:
                savingAnimation.stop();
                break;
        }
    }
}

 

Lo primero es crear las variables necesarias, una para cada botón y la del ImageView, después en el onCreate, inicializamos cada una de las variables y con:

 

        ivAnimacion.setBackgroundResource(R.drawable.animacion);
        savingAnimation = (AnimationDrawable)ivAnimacion.getBackground();

 

Estamos poniéndole al ImageView nuestra animación como recurso y recogiéndolo en savingAnimation como AnimationDrawable (la animación en sí, que contiene todos los métodos para operar con ella).

Y por último el onClick identifica cuál de los botones ha sido pulsado e inicia la animación si se pulsa el de iniciar o la detiene si se pulsa el botón de detener.

De esta forma tan sencilla tenemos una animación bastante decente como para poder indicar al usuario que se está realizando una tarea en segundo plano. Como ejemplo, esto mismo puede usarse con un AsyncTask de manera que iniciando la animación antes de ejecutarlo y deteniéndola cuando termine él sólo mostrará la animación mientras la tarea en segundo plano se esté realizando.

Esto ha sido todo por hoy, espero que haya sido de utilidad.

Puedes ver el resultado en el siguiente vídeo:

Relacionado:

By | 2016-09-10T18:30:14+00:00 agosto 3rd, 2013|Android, Desarrollo, Móvil|4 Comments

About the Author:

Desarrollador de software de profesión, apasionado de la informática y todo lo relacionado con la tecnología

4 Comments

  1. Inanh julio 14, 2014 at 1:23 am - Reply

    Hola, muy buen tutorial pero quisiera saber si podrias hacer un tuto en donde la animación se cree en el evento onStart o en cualquier otro es que quiero hacer un Splash animado al estilo Skype pero no encuentro ningun tutorial acerca de eso, gracias de antemano

  2. absolutkarlos agosto 7, 2014 at 2:00 am - Reply

    Hola que tal,
    Estoy trabajando con animaciones, pero la aplicación se detiene por el error out of memory.
    El asunto es que tengo varias animaciones activadas con varios botones cambiando el imageview.
    Quizás estoy haciendo algo mal y abusando de los recursos.
    Que debo hacer para poder ejecutar varias animaciones sin abusar de la memoria?
    Cómo puedo activar una animación onAnimationEnd?
    tengo un layout sencillo con un imageview y los botones.
    Los botones cambian el imageview para correr el animation list
    Muchas gracias por la ayuda.
    Saludos

    • dolphin agosto 13, 2014 at 12:24 pm - Reply

      Hola,

      El tema de las imágenes en Android es bastante tedioso, hay una serie de recomendaciones para tratar las imágenes y evitar el OutOfMemory:

      · Primero y antes que nada trata de reducir tus imágenes, no tanto en tamaño como en resolución, cuanto menos resolución mejor, una de 1024×768 ya es mucho para Android, si puedes ponerla a 600 mejor, y si puedes reducirla a 200 de ancho todavía mejor.

      · Reusa las imágenes, es decir create un array en el que se almacenan las imágenes ya creadas, si tienes que volver a ponerla, cógela del array si ya existe en él y no vuelvas a crearla de nuevo.

      · Carga imágenes reducidas en memoria, tienes en la documentación de Android cómo hacerlo, en este enlace.

      Eso es lo básico que debes hacer si quieres utilizar muchas imágenes en tu aplicación, hay más cosas, pero en un principio con esto te debería servir.

      Cualquier cosa aquí estamos.

      Saludos

  3. jorge enero 3, 2015 at 8:12 pm - Reply

    pinche pendejo que no sabes manejar diseñó como te atreves poner ese colcor negro con tanto texto casi me dejas ciego hijode mil

Leave A Comment