How to Create a Custom Loading Screen — Android

Some things never change and a loading screen is one of them. If you own a smartphone, there is a chance you might come across 100s of them in a single day of usage. In fact, you may have seen one just before opening this story.

What is A Loading Screen?

A loading screen provides the user with a visual indication of data being loaded into an application. Technology and designs are improving every day and so is the amount of data on the internet. As a result, applications and websites are pulling copious amounts of data from servers every day.

Loading data into your application can be annoying for the end-user as it interrupts the flow of the application, but it’s something that we as developers cannot choose to avoid.

What we can do is make that time interval fun so for the user so that they don’t mind waiting a few seconds. We have a habit of using a progress bar on the screen to show the user something is happening, but the progress bar seems a little outdated to include if the application has a stunning UI and it can degrade the overall user experience.

How to Build a Custom Loading Screen

So, let’s build a custom loading screen with great animations to show on screen while our application fetches data from the server. To make the process easy and I recently built a library for Android applications.

So, let’s start the process of making our loading screen beautiful. Before getting started, we need to a little boring stuff. Add this to your project’s build.gradle (Project level) file:

allprojects {
	repositories {
		....
		maven { url 'https://jitpack.io' }
	}
}

Now, since the library uses view binding, we need to enable that too in app/build.gradle (Module level):

android {
    ....
    buildFeatures {
            viewBinding true
        }
}

After this, we finally add the library dependency to app/build.gradle (Module level):

dependencies {
    ....
    implementation "com.github.sakshampruthi:custom-loading-screen:1.16"
}

Finally, we come to the good stuff! To make our loading screen beautiful, we will use Lottie Files. Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets.

You can visit LottieFiles here and download the JSON file for your favorite animation. To implement Lottie animations you need to use the Lottie library from Airbnb. Don’t worry, I have already included this dependency in my library for ease.

Assuming you have downloaded an awesome animation, you need to add the file to the project. You need to move the JSON file from your downloads to res/raw in your project directory. If there is no raw directory, feel free to create one yourself.

To show the beautiful animation in your application, we need to call showDialog() method. It accepts three parameters — context, cancellable (cancel the loading screen on BackPressed), and the JSON file.

After this, you need to hide the loading screen when the data fetch is complete. So for that, we need to call hideDailog() method in our response call and we are done!

Result:

For further reference or to get the code, you may visit my GitHub repo.

Next time you are building an Android app, make sure to try this and include cool loading animations in your application.