How to create Splash screen android studio in kotlin

Splash screen Android is shown when an Android application takes up some time to start up, especially when the app is first launched on a device. A splash screen may display start-up progress or indicate branding or some animation screen to users. It’s a good way to attract and impress your user to show progress, brand overview, or how to use app instruction animations.

UX (User experience) is a must for your application and create a Splash screen is doing the same. Let’s see when you launched an android app and you want to download some stuff (gaming resources) that time you have to show some nice and cool splash screen to the user.

Second scenario if your app is an e-commerce app that time when the app is launch, you have to show some product to the user. So now you have to call network and load stuff but don’t do when a user on the main screen, it’s not a good idea because the user has to wait again. A better way is you have to call network and load data in the background during the splash screen.

Android Splash screen Uses 

Here is some examples use case of Splash screen :

• Register device to the server
• Sending device information
• Register push notification (FCM)
• Downloading data and store in the Android database (SQLite database)
• Downloading images

Official android google doc has mentioned Splash screen as Launch Screen.

Note :

From google material design documentation.

The launch screen is a user’s first experience of your application.

Because launching your app while displaying a blank canvas increases its perceived loading time, consider using a placeholder UI or a branded launch screen.

Let’s Build a Splash screen android example in kotlin

In this example, we are loading a webpage in WebView after loading 80% webpage our main screen shows up. This is one approach to dealing with loading webpage and give good user experience to users. You can try more approaches to achieve this.

Step 1. Create an android project in the android studio (Follow this tutorial: Android First Program in Android Studio kotlin)

Step 2. Add fowling code in main activity resource file.

In Code where<Progressbar> is for show progress. <ImageView> will show in the foreground (front) Until web page is loaded.

Before doing it. add an image in res/mipmap/ic_eyehunt_tutorial_logo.png , download link eyehunt_tutorial_logo Or you can add another image.

And add bg_white color in res/values/colors.xml in <resource> tag

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#009688</color>
    <color name="colorPrimaryDark">#00796b</color>
    <color name="colorAccent">#ffeb3b</color>
    <color name="bg_white">#FFFFFF</color>
</resources>

set <ImageView> android:visibility="visible" , do pragmatically gone on webpage loaded 80%. and set <WebView> android:visibility="Visible"

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg_white"
    android:orientation="vertical"
    android:padding="0dp">

    <ProgressBar
        android:id="@+id/progress_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="3dp" />

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/progress_bar"
        android:layout_weight="1"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/hlnt_iv_load"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@mipmap/ic_eyehunt_tutorial_logo"
        android:visibility="visible" />
</RelativeLayout>

Step 3. Add following code in MainActivity.kotlin

in this code onProgressChanged giving progress of web page loaded like 1 2 5 …80 ..100 %.

if  newProgress > 80 do Visible WebView and Invisible ImageView.

package `in`.eyehunt.splashscreenandroidkotlin

import android.graphics.Bitmap
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
import android.os.Build
import android.util.Log
import android.view.View
import android.webkit.*

class MainActivity : AppCompatActivity() {
    private val url = "http://tutorial.eyehunts.com"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        supportActionBar!!.hide()
        setContentView(R.layout.activity_main)
        hlnt_iv_load.bringToFront()

        // Get the web view settings instance
        val settings = web_view.settings

        // Enable java script in web view
        settings.javaScriptEnabled = true

        // More web view settings
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            settings.safeBrowsingEnabled = true  // api 26
        }
        //settings.pluginState = WebSettings.PluginState.ON
        settings.useWideViewPort = true
        settings.loadWithOverviewMode = true
        settings.javaScriptCanOpenWindowsAutomatically = true
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            settings.mediaPlaybackRequiresUserGesture = false
        }

        web_view.loadUrl(url);

        // Set web view client
        web_view.webViewClient = object: WebViewClient(){
            override fun onPageStarted(view: WebView, url: String, favicon: Bitmap?) {
                // Page loading started
                // Do something
            }

            override fun onPageFinished(view: WebView, url: String) {
                // Page loading finished
            }
        }

        // Set web view chrome client
        web_view.webChromeClient = object: WebChromeClient(){
            override fun onProgressChanged(view: WebView, newProgress: Int) {
                progress_bar.progress = newProgress

                //display web page
                if (newProgress > 80){
                    hlnt_iv_load.visibility = View.GONE
                    web_view.visibility = View.VISIBLE
                }
                Log.d("Progress",newProgress.toString())
            }
        }
    }
}

Step 4. Add internet permissions

Your application must have access to the Internet for this example. To get Internet access, request the INTERNET permission in your manifest file. For example:

<manifest ... >
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

Step 5. Now Run the application, in an emulator or On your Android device

Output screenshot Splash screen android in Android app :

Video Output:

Download Link and Splash screen android in Android in Github :

Note : This example (Project) is developed in Android Studio 3.0.1 ,tested on Android 7.1.1 ( Android Nougat), compile SDK version API 26: Android 8.0 (Oreo)

MinSdkVersion=”15″

TargetSdkVersion=”26″

Coding in Kotlin

In this Splash screen android example, we used WebView widget, for better understand go to this tutorial Android WebView app Example in Kotlin.