Animación de Android con Android Studio

En el mundo de hoy que está lleno de imaginación y visualizaciones, hay algunas áreas que están cubiertas con la palabra animación. Cuando esta palabra viene a la mente de cualquiera, siempre crean una imagen de dibujos animados y algunos espectáculos de Disney World. Como ya sabemos, entre los niños, las películas de animación son muy populares como el mundo de Disney, Doraemon, etc. Todos los dibujos animados y las imágenes animadas son tipos de animación hechos a partir de miles de imágenes individuales que se suman y se reproducen según los pasos. La misma animación, hemos intentado agregar en nuestra aplicación de Android usando Kotlin.

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación de Android simple en Android Studio usando Kotlin , en la que tendremos un botón de inicio y una imagen, cuando hagamos clic en el botón de inicio, comenzará su animación correspondiente. En este particular, hemos utilizado un hombre con animación de caminar. Si vuelve a hacer clic en el mismo botón, la animación se detendrá. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: Cargue imágenes para la animación

Copie las imágenes de su sistema, vaya a aplicación > res > dibujable y presione Ctrl + V, se incluirán en la carpeta dibujable. 

Puedes obtener todas las imágenes desde este enlace .

Paso 3: Cree un archivo XML para la lista de animación

Para crear una lista de animaciones para la aplicación, vaya a app > res > drawable , haga clic con el botón derecho en drawable, seleccione:   new > Drawable resource file y nombre el archivo como animation_item.xml y consulte el código a continuación.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
      
    <!-- creation of animation list-->
    <item
        android:drawable="@drawable/man1"
        android:duration="100" />
    <item
        android:drawable="@drawable/man2"
        android:duration="100" />
    <item
        android:drawable="@drawable/man3"
        android:duration="100" />
    <item
        android:drawable="@drawable/man4"
        android:duration="100" />
    <item
        android:drawable="@drawable/man5"
        android:duration="100" />
    <item
        android:drawable="@drawable/man6"
        android:duration="100" />
    <item
        android:drawable="@drawable/man7"
        android:duration="100" />
    <item
        android:drawable="@drawable/man8"
        android:duration="100" />
  
</animation-list>

Paso 4: trabajar con el archivo activity_main.xml

Ahora es el momento de diseñar el diseño de la aplicación. Por lo tanto, vaya a aplicación > res > diseño > actividad_principal.xml y consulte el código escrito a continuación en el archivo   actividad_principal.xml .

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">
          
        <!-- Inserting the image view in Linear Layout  -->
        <ImageView
            android:id="@+id/img"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:src="@drawable/animation_item" />
          
        <!--  Inserting the button in Linear Layout  -->
        <Button
            android:id="@+id/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="@string/start"
            android:textColor="@color/white"
            android:textSize="16sp"
            android:textStyle="bold" />
  
    </LinearLayout>
      
</LinearLayout>

Paso 5: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.graphics.Color
import android.graphics.drawable.AnimationDrawable
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
    
    private lateinit var isAnimation: AnimationDrawable
    private lateinit var btn: Button
    private lateinit var img: ImageView
  
    var isStart = false
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
        // set find Id for image (img) and button (btn)
        img = findViewById(R.id.img)
        btn = findViewById(R.id.btn)
        img.setImageResource(R.drawable.animation_item)
          
        // set Animation
        isAnimation = img.drawable as AnimationDrawable
        btn.setBackgroundColor(Color.GREEN)
          
        // set animation Start
        btn.setOnClickListener {
            if (!isStart) {
                isAnimation.start()
                btn.text = "stop"
                isStart = true
                btn.setBackgroundColor(Color.RED)
  
            } else {
                isAnimation.stop()
                btn.text = "Start"
                isStart = false
                btn.setBackgroundColor(Color.GREEN)
            }
        }
    }
}

Eso es todo, ahora la aplicación está lista para instalarse en el dispositivo. Así es como se ve la salida de la aplicación.

Producción:

Enlace GitHub:

El proyecto descrito anteriormente también está disponible en GitHub, para acceder a él, haga clic en el siguiente enlace: Animación en la aplicación de Android