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