Show Splash Screen While Android WebView is Loading

In one of my recent application (which was a webview app) my client suggested to show splash screen while we are loading the application data (obviously client does not bother if this is webview app or native one) so here I am with a sample for all those who are in similar situation.

I am not going to explain all the basic things like create project and activity etc as we have already discussed this in my previous articles.

1. First thing we have to do is create layout for our webview screen. We will name this layout file activity_main.xml. This file will contain webview element and splash screen element.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
 <RelativeLayout
     android:id="@+id/splach_screen"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@drawable/splash_bg"
     android:visibility="visible" >
 
     <ImageView
         android:id="@+id/imgLogo"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
         android:contentDescription="@string/splash_image_desc"
         android:src="@drawable/ic_logo" />
    
     <ProgressBar
      android:id="@+id/webViewProgress"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:layout_width="wrap_content"
         android:layout_height="wrap_content"
      android:layout_below="@+id/imgLogo" />
    
     <TextView
         android:id="@+id/error"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:layout_width="wrap_content"
         android:layout_height="wrap_content"
      android:layout_below="@+id/imgLogo"
         android:textColor="@color/loading_error"
         android:textSize="@dimen/loading_error"
         android:text="@string/loading_error"
      android:visibility="invisible"/>
    
     <Button
         android:id="@+id/reload"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:layout_width="wrap_content"
         android:layout_height="wrap_content"
      android:layout_below="@+id/error"
      android:text="@string/reload"
      android:onClick="reload"
      android:visibility="invisible" />
 
     <TextView
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="10dp"
         android:textSize="12sp"
         android:textColor="#454545"
         android:gravity="center_horizontal"
         android:layout_alignParentBottom="true"
         android:text="@string/splash_loading_text" />
 </RelativeLayout>
 <LinearLayout
     android:id="@+id/main_view"
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
    android:visibility="invisible">
     <WebView android:id="@+id/web_engine"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent" />
 </LinearLayout>
</LinearLayout>

In this layout we have one main layouts and two sub layouts. One of the two sub layouts contains our splash screen contents and other contains webview.

We have set splash screen layout to visible and webview layout to invisible which will be later changed when webview content is loaded.

2. Now we will create our application’s main activity. We will name it MainActivity.java and its code will be as below:

package com.edunyte.webviewsplashscreen;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {
@SuppressLint("SetJavaScriptEnabled")
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

WebView myWebView = (WebView) findViewById(R.id.web_engine);

myWebView.setWebViewClient(new MyBrowser());
myWebView.clearCache(true);
myWebView.clearHistory();

myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.getSettings().setLoadsImagesAutomatically(true);
myWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
myWebView.loadUrl("https://edunyte.com/");
}

private class MyBrowser extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {
if (findViewById(R.id.splach_screen).getVisibility() == View.VISIBLE) {
// show webview
findViewById(R.id.main_view).setVisibility(View.VISIBLE);
// hide splash screen
findViewById(R.id.splach_screen).setVisibility(View.GONE);
}
}
}
}

 

In this code we have loaded URL in webview and set webview client to handle onPageFilished event. onPageFinished event we will hide splash screen layout and show webview layout.

Apart from these two file you may need to add few more files like string.xml, style.xml, color.xml etc.

For complete code of this sample click here to download.

Leave a Reply

Your email address will not be published.