Creating Splash Screen in Android with Animated Gif Image Example

Introduction to Splash Screen

You have seen many applications which display some loading text while the application is loading. Sometimes companies display their logo for self-promotion. This very initial screen is known as the splash Screen of Android applications. Although many applications display loading splash screens time to time while the application performs background tasks which do not require user interaction.

Some of the people think that splash screen wastes user time, but it doesn’t. Google also prefer to display splash screen in Android applications. The main purpose of displaying splash screen is also not to waste time. Whenever an application starts, it takes some to load itself. So rather than displaying a blank screen to the user may waste time. But, while the app is is loading, showing something meaningful doesn’t waste time.

Sometimes when you want your app to engage the user, you can go for an animated splash screen. In this tutorial, you will learn to create animated splash screen with the help of gif image. There are two libraries which help to display animated gif images.

There are two types of splash screens. First one shows the logo for self-promotion and the second one load the application data asynchronously. In this tutorial, we will try to cover both of them.

Setting up Environment

First of all, you need to set up the environment for the library to use it in your project. To configure a library for your project, you need to open the build.gradle(module: app) file of your project and add a dependency for the library.

For glide

You must set the target SDK version to 24   targetSdkVersion 24 in defaultConfig of the build.gradle file and  compileSdkVersion 24  buildToolsVersion "24.0.1" in the android scope of the build.gradle file.

For Ion

Set the target SDK version to 23   targetSdkVersion 23 in defaultConfig of the build.gradle file and  compileSdkVersion 23  buildToolsVersion "23.0.1" in android scope.

Displaying Animated Images in Android Activity

When you want to display animated gif image you have to implement the complete code to display all the frames of gif image continuously. After the arrival of ion and glide image libraries, you can display gif images with just a few lines of code.

If you want to load Url from the internet, then don’t forget to give the internet permissions to Android application in the manifest tags of AndroidManifest.xml.

With Glide

Glide library takes the context in the with() method, the source in load() method, and destination in into()  method. If you want to animate the image you must pass animator or id of the animation resource in the animate() method. Here as the image type is gif so asGif() method is called and gif image animates so the source is also passed as animator in the animate() method.

Glide comes up with a lot of issues as well, try troubleshooting them by disabling hardware acceleration in AndroidManifest.xml at different levels i.e. application or activity.

Another problem with Glide is that it is heavy and takes too much time to load and sometimes it fails to display the image. It is recommended to use Ion.

With Ion

Ion takes the destination in the with() method, source in the load() method, and if you want to animate the gif then call animateGif() method with AnimateGifMode.Animate as parameters.

Note: If you want to load the gif from some internet source then just pass the image URL in the quotation marks as the parameters of load() method.

Creating Splash Screen for WebView loading

If you are loading a WebView, then you must display some image or text as a splash screen to the user. This splash screen must be attractive to catch the attention of the user.

For this purpose load an animated gif through Glide or Ion library and set it visible when the WebView is completely loaded. But, before this set the visibility of the WebView to gone:

Loading the animated image is covered previously.

  • Now to load WebView, instantiate it and call the getSettings() method to set the automatic loading of the image and enable JavaScript to true.
  • Set the Scrollbar style to SCROLLBARS_INSIDE_OVERLAY.
  • Load the URL of the image
  • In the setWebViewClient() method, override onPageFinished(WebView view, String url) for setting the visibility of WebView to VISIBLE and the visibility of ImageView to GONE.

Animated Gif as Splash Screen for WebView using Glide Android Example

Displaying Animated Splash Screen as Company Logo

Some of the applications display their company logo before starting the application. You can also display your own custom logo on the splash screen at the start of your applications. Many applications don’t load new activity after the splash screen but display the content in the same activity. They use fragments to change the content inside the activity dynamically. This can be done with the help of fragments. Now create two different fragments, one for the splash screen and other for activity data.

Splash Fragment

Splash fragments display the splash screen in an ImageView. A TextView is placed to display the screen is loading something.

Content Fragment

Content Fragment displays the data, In this demo content fragment just displays a simple TextView.

Layout for Activity

Use a FrameLayout to load fragments and specify an id for the FrameLayout.

MainActivity to initialize and load fragments

First of all, create two subclasses that will initialize the splash fragment and content fragment. These subclasses extends Fragment and you can  populate the views of the fragments.

Overridden onCreate method loads and unloads the fragments when the timer thread times out.

Download Animated Splash Screen in Android using Ion Library Example

Running Asynchronous Tasks with Splash Screens

Splash screens are also used to load data by making HTTP calls or load any data from the network as a background task. If your application is loading the data using Retrofit or sending data to the network using Volley then you should display something to the user through splash screen.

So, create a subclass for the splash screen activity that extends AsyncTask<Void, Void, Void>. AsyncTask<> class provides three methods to perform a task Asynchronously.

  •  onPreExecute()
  • doInBackgroud(Void… arg0)
  • onPostExecute(Void Result)

Call the instance of the subclass in onCreate() overridden method.

Beginners Heap Splash Screen
Beginners Heap Splash Screen

Hope that you like this tutorial. Stay tuned for more upcoming tutorials. Stay Blessed!

  • Ashok Kumar

    full code link github