April 27, 2020

Drawable animation in the android Kotlin tutorial.

By Mohit Agrawal

Learn how to make simple drawable animation in android.

This is the demo of what we are going to develop using drawable animation.

What is drawable animation android?

It just images sequence animation. This type of animation is useful when you have a sequence of images and you want to animate them. As shown in the above demo video I am using ten different image files.

Let’s start some coding now. Create a new android project and follow the instructions. First, add all the ten image set to the drawable folder as shown in the image:

animation drawable

You can download the source code and images from the GitHub link. Now add a new XML file in the same drawable folder and name it “gube.xml” and copy-paste below code:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >
    <item
        android:drawable="@drawable/one"
        android:duration="300"/>
    <item
        android:drawable="@drawable/two"
        android:duration="300"/>
    <item
        android:drawable="@drawable/three"
        android:duration="300"/>
    <item
        android:drawable="@drawable/four"
        android:duration="300"/>
    <item
        android:drawable="@drawable/five"
        android:duration="300"/>
    <item
        android:drawable="@drawable/six"
        android:duration="300"/>
    <item
        android:drawable="@drawable/seven"
        android:duration="300"/>
    <item
        android:drawable="@drawable/eight"
        android:duration="300"/>
    <item
        android:drawable="@drawable/nine"
        android:duration="300"/>
    <item
        android:drawable="@drawable/ten"
        android:duration="300"/>

Great!!! We have covered almost all the part. Now in the activity_main.xml create two view:

  1. One normal view and set the margin to 0.
  2. One image view to display the animation’s images.
animation main xml

Add below code to MainActivity.kt:

import android.graphics.Color
import android.graphics.drawable.AnimationDrawable
import android.os.Bundle
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        view.setBackgroundColor(Color.parseColor("#737373"))

        imageView.setBackgroundResource(R.drawable.gube)
        val ani = imageView.getBackground() as AnimationDrawable
        ani.start()
    }
}

We have covered all the coding part now it’s time to run and check the drawable animation. I have done everything till here then your project should be good and running.

Check out this post on android:

API call and JSON parsing in android using volley.

Two methods of using text view in Android.

Help me to grow our YouTube Channel: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!