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

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

Output:

GitHub Link:

The above-described project is also available on GitHub, to access it click on the link below: Animation in android application