Android Animation using Android Studio - GeeksforGeeks

31 Mar, 2021
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.
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 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.Colorimport android.graphics.drawable.AnimationDrawableimport android.os.Bundleimport android.widget.Buttonimport android.widget.ImageViewimport 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
Android-Animation
Android-Studio
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
Retrofit with Kotlin Coroutine in Android
How to Post Data to API using Retrofit in Android?
Kotlin Array
Android UI Layouts
Retrofit with Kotlin Coroutine in Android
How to Get Current Location in Android?
Kotlin Setters and Getters