Loading animation

Reading Time: 7 minutes
In this tutorial we are going to create a very simple loading animation. This animation will contain 5 blue circles. From right to left and backwards the colors fo the circles will be darker then again lighter.

This tutorial, as the other ones, will be written in Kotlin and we are going to use Data Binding to find the needed views from the main layout.

Step 1 – Create a new project

Our first step is to create a whole new project. For this, launch Android Studio and create a new project. If you see the “Welcome page” of Android Studio, then click on the “Start a new Android Studio project”.

If you have an open project, then from the “File” menu select “New”, then “New Project”. After thet, this window will popup.

 

Here select the “Empty Activity” option.

In the next window, we should provide some information about the newly created app.

As always, this tutorial will be written in Kotlin. So, select from the dropdown list the Kotlin language.

From the next list of the “Minimum SDK” select API 21. In our case API 21 gonna be enough.

There is a link, called “Help me choose”. If you click on it, then a colorful figure will show you the different Android versions and their imported innovations.

If you are done, click on the “Finish” button. The build can take few minutes. Be patient! 😉

When the build has been finished, then you should see the open MainActivity:class and next to this the activity_main.xml files. For now you can close both of them.

Step 2 – Add Data Binding

As we have talk about at the beginning of this tutorial, we are going to use Data Binding to find the needed views, what we are going to use later on in the code.

If you aren’t familiar with Data Binding, then check our basics tutorial: Data Binding – Basics
Enable Data Binding for the project
So, to enable Data Binding in the project, go the top left corner of Android Studio. There will be the tab called “Project”. Click on it and change the view to Android. Then open the Gradle Scripts menu and double click on the build.gradle (Module: app) file.

In the top of the file you will find some lines, which are starting like “apply plugin:…”. There paste the below line:

apply plugin: ‘kotlin-kapt’

Now, go a bit down, until the end of the android {} section. There paste the below lines also.


Enabling Data Binding

This will enable for us Data Binding.

Next, click on the “Sync Now” text, what you can find at the top right corner of Android Studio.
This can take some minutes, so be patient. 😊

Convert layout

Before we can using Data Binding, we have to convert the activity_main.xml layout to use it.

If you have closed the file, then you can open it again from the left Project tab in the res->layout folders.

At the first time you will see only the design view. To convert the layout to a Data Binding layout we will need the code view.

So from the top right corner select the middle icon. In “Split” view you will have in the same the design and the code view.

Now, move your cursor to the rootview, which is in our case a ConstraintLayout. Then press there on you keyboard the Alt+Enter hot keys on Windows or Control/Option+Enter on Mac. This will open up a quick menu, the Show Context Actions menu. There, select to first option, which is “Convert to data binding layout”. The result should look like below.


The layout with Data Binding
Set the code also

The last step of starting to use Data Binding in our project, is to change a bit the MainActivity::class as well.

So, open the file from the java->package folders and paste at the beginning of it the below binding variable.

private lateinit var binding: ActivityMainBinding

Currently the onCreate() method looks like below.


onCreate() method

We are going to change the second line in the body of the onCreate() method. Then the onCreate() method should look like below.


onCreate() method

Step 3 – Add views to the layout

Next step is to add the two views, an ImageView and a Button to the activity_main.xml layout file.

So, copy and paste the below code into the ConstraintLayout.


AndroidManifest.xml

Note, that the ImageView is centered and the Button is under it. We could do it because of the ConstraintLayout.

Add some strings

After the paste, you will have an error. This will tell you that you don’t have the “start” string defined in the strings.xml file.

So, from the left menu open the strings.xml file, which is located in the res->values folders. Copy and paste the below two lines there.

<string name=“start”>Start</string>
<string name=“stop”>Stop</string>

For now, you can close the activity_main.xml layout file.

Step 4 – Add the loading images

In the next step, we are going to add the five loading states to the app. For this, download the .SVG files usign the below link and extract them on you computer.

Download loading SVGs

To add these images to the app click with the right mouse button on the drawable folder, what you can find in the res folder. From the menu select New, then Vector Asset.

      1. Click on the Local file option in the row Asset Type
      2. Browse the extracted files from the line of Path
      3. Next
      4. Finish

Repeat this few steps until you upload all of the 5 images into the project.

Step 5 – Create the animation

One way to animate Drawables is to load a series of Drawable resources one after another to create an animation. This is a traditional animation in the sense that it is created with a sequence of different images, played in order, like a roll of film. The AnimationDrawable class is the basis for Drawable animations.

While we can define the frames of an animation in our code, using the AnimationDrawable class API, it’s more simply accomplished with a single XML file that lists the frames that compose the animation. The XML file for this kind of animation belongs in the res-drawable directory of our Android project. In this case, the instructions are the order and duration for each frame of the animation.

The animation XML file

The XML file consists of an <animation-list> element as the root node and a series of child <item> nodes that each define a frame: a drawable resource for the frame and the frame duration.

So, go the res->drawable directory and with the right mouse button click on it. From the menu select New, then the Drawable Ressource File option.

In the popup window name the file as anim_loading and press the OK button below.


The loading animation

Note the duration attribute. The value is in milliseconds and it means, that this drawable image will be visible for that long.

In this row the darker blue circle will look like it is moving from the left to the right, then backwards.

You can close this file also.

Extend the code

Now open the MainActivity.kt file from the java -> packagename folders.

As we have talked about, we are going to use the AnimationDrawable class for the animation. For this, first we have to create an instance about it.

Member variables

Copy and paste the below line into the beginning of the MainActivity::class as a member variable.

private lateinit var loadingAnimation: AnimationDrawable

Then, we are going to define a Boolean variable also, which will be true when the animation is running, and false if it doesn’t.

Paste the below line after the loadingAnimation variable.

private var isLoading = false

Init cart loading animation

After the implementation of the needed variables, we can start the initialization of the animation. For this, we gonna create a new function, called initCartLoadingAnimation(). Do it after the onCreate() method.

Inside of this method, we are going to set the initial image of the ivLoading ImageView, and init the loadingAnimation variable using the ImageView.


initCartLoadingAnimation()

Finally call this method from the onCreate() method.

The start function

First, in the start function we are going to set the isLoading variable to true, then the text of the Button to “Stop”, set to visible the ImageView and call the start() method on the loadingAnimation variable.

Copy and paste the below startLoadingAnimation() function after the onCreate() method.


startLoadingAnimation()
The stop function

The stop method is very similar to the start method, but now we formulate just the opposite of it.

So, paste the below stopLoadingAnimation() method after the startLoadingAnimation() function.


stopLoadingAnimation()
The click listener of the Button

The last step in this tutorial is to handle the click listener event of the btnStartStopAnimation Button.

So, after the init method paste the below code.


btnStartStopAnimation.setOnClickListener

When we click on the button and the animation is running, then the click will stop the animation. Otherwise it is going to start it.

Run the app

Finally, it’s time to run the app. Press the green “Run ‘App'” button at the top menu line and test the app. If you have made everything correctly, then the app should look like on this image.

GitHub

The source code is available on GitHub

GitHub

Questions

I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

 


 

Follow and like us:
Click to rate this post!
[Total: 0 Average: 0]

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications