Android Animation using Android Studio

In today’s world which is filled with full of imagination and visualizations, there are some areas that are covered with the word animation. When this word will come to anyone’s mind they always create a picture of cartoons and some Disney world shows. As we already know that among kids, animation movies are very popular like Disney world, Doraemon, etc. All the cartoons and animation pictures are the types of animation made from thousands of single pictures added together and play according to steps. The same animation, we have tried to add in our android application using Kotlin.

What we are going to build in this article? 

We will be building a simple android application in android studio using Kotlin, in which we will have a start Button and an image, by the time we click on the start button it will start its corresponding animation. In this particular, we have used a man with walking animation. Clicking on the same button again will stop the animation. A sample GIF is given below to get an idea about what we are going to do in this article.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. 

Note: Select Kotlin as the programming language.

Step 2: Upload Images for Animation

Copy the images from your system, go to app > res > drawable, and press Ctrl + V, they will get included in the drawable folder. 

You can get all the images from this link.

Step 3: Create an XML File for Animation List

For creating an animation list for the application, navigate to app > res > drawable right-click on drawable, select:  new > Drawable resource file and name the file as animation_item.xml and refer to the code below.

XML

<?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>

Step 4: Working With the activity_main.xml File

Now it’s time to design the layout for the application. So, navigate to app > res > layout > activity_main.xml and refer to the below-written code in the activity_main.xml file.  

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>

Step 5: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

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)
            }
        }
    }
}

Java

import android.graphics.Color;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;

// The MainActivity class extends the AppCompatActivity
// class and is responsible for displaying the main
// interface of the app.
public class MainActivity extends AppCompatActivity {
    // Declaration of AnimationDrawable and Button objects
    // and ImageView
    private AnimationDrawable isAnimation;
    private Button btn;
    private ImageView img;

    // A boolean variable to keep track of the animation
    // status (started or stopped)
    private boolean isStart = false;

    // The onCreate method is called when the MainActivity
    // is launched, and it sets up the main interface for
    // the app.
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // The method setContentView is called to set the
        // layout of the activity.
        setContentView(R.layout.activity_main);

        // The findViewById method is used to retrieve the
        // ImageView and Button objects from the XML layout.
        img = findViewById(R.id.img);
        btn = findViewById(R.id.btn);
        // The setImageResource method sets the image to be
        // displayed in the ImageView.
        img.setImageResource(R.drawable.animation_item);

        // The getDrawable method is used to retrieve the
        // AnimationDrawable object from the ImageView.
        isAnimation = (AnimationDrawable)img.getDrawable();
        // The setBackgroundColor method sets the background
        // color of the Button.
        btn.setBackgroundColor(Color.GREEN);

        // The setOnClickListener method sets an
        // onClickListener for the Button.
        btn.setOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View view)
            {
                // The if statement checks if the animation
                // has started or not.
                if (!isStart) {
                    // If the animation has not started, the
                    // start method of the AnimationDrawable
                    // object is called.
                    isAnimation.start();
                    // The setText method sets the text of
                    // the Button.
                    btn.setText("stop");
                    // The isStart variable is set to true
                    // to indicate that the animation has
                    // started.
                    isStart = true;
                    // The setBackgroundColor method sets
                    // the background color of the Button.
                    btn.setBackgroundColor(Color.RED);
                }
                else {
                    // If the animation has started, the
                    // stop method of the AnimationDrawable
                    // object is called.
                    isAnimation.stop();
                    // The setText method sets the text of
                    // the Button.
                    btn.setText("Start");
                    // The isStart variable is set to false
                    // to indicate that the animation has
                    // stopped.
                    isStart = false;
                    // The setBackgroundColor method sets
                    // the background color of the Button.
                    btn.setBackgroundColor(Color.GREEN);
                }
            }
        });
    }
}

That’s all, now the application is ready to install on the device. Here is what the output of the application looks like.

Output: