Android Webview : Splash screen while loading a url

Question

I am new in Android App and this is my first App. I already create splash screen and works.. but after its gone theres a long white blank screen about 2-5 second then the url begin to load..

And my question is.. how to make some loading or progress bar in Splash Screen while loading URL? so no more white blank screen. Sorry for my bad english.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.xxx.xxx" >

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


<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="xxx"
    android:theme="@style/AppTheme"
    android:hardwareAccelerated="true" />


    <activity
        android:name="com.xxx.xxx.Splash"
        android:label="xxx"
        android:theme="@style/Theme.MyAppTheme" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity
        android:name=".MyActivity"
        android:hardwareAccelerated="true"
        android:configChanges="orientation|screenSize"
        android:label="xxx" >

    </activity>

</application>

</manifest>

activity_my.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MyActivity">

    <WebView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/webView"
        android:layout_gravity="center"
        />

<TextView
    android:id="@+id/display"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
     />

<FrameLayout
        android:id="@+id/customViewContainer"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:visibility="gone"/>
</LinearLayout>    

Splash.java

    import android.app.Activity;
    import android.content.Intent;
    import android.os.Bundle;
    import android.os.Handler;

public class Splash extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.splashscreen);

    final Handler handel = new Handler();
    handel.postDelayed(new Runnable() {

        @Override
        public void run() {
            // TODO Auto-generated method stub
            Intent loadSplash = new Intent(Splash.this, MyActivity.class);

            startActivity(loadSplash);

            finish();
            }
        }, 3000);
    }
}

splashscreen.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff" >

<ImageView
android:id="@+id/imageView1"

    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:src="@drawable/splash" />

</RelativeLayout>

Answer 1

Here you go.. as Jibran Khan said, don’t create separate splash activity. Use splash functionality on your webview. First of all create a webclient class by extending as WebViewClient, you will get unimplemented methods like this`

{
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }

    @Override
    public void onLoadResource(WebView view, String url) {

    }

    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        progressBar1.setVisibility(View.VISIBLE);
        webview.setVisibility(View.GONE);
        super.onPageStarted(view, url, favicon);
    }

    public void onPageFinished(WebView view, String url) {
        progressBar1.setVisibility(View.GONE);
        webview.setVisibility(View.VISIBLE);
    }
}

` use progress bar as loading indicator as done in above code.

don't forget to do this web.setWebViewClient(new MyWebViewClient()); where MyWebViewClient is your webclient class name

here is xml for the above code

 <WebView
    android:id="@+id/web"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:visibility="gone" />

<ProgressBar
    android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" />

Answer 2

Try either of these two options.hope it will helps you

1.remove call back for handler

handel.postDelayed(new Runnable() {

    @Override
    public void run() {
        // TODO Auto-generated method stub
        Intent loadSplash = new Intent(Splash.this, MyActivity.class);

        startActivity(loadSplash);

        finish();
        handel.removeCallbacks(this);

        }
    }, 3000);

2. Use thread instead of handler

   public class Splash extends Activity {
   
   protected boolean _active = true;
   protected int _splashTime = 3000;
   Thread splashTread;
   private boolean stop = false;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.splashscreen);
       splashTread = new Thread() 
       {
           @Override
           public void run() {
               try {
                   int waited = 0;
                   while (_active && (waited < _splashTime)) {
                       sleep(100);
                       if (_active) {
                           waited += 100;
                       }
                   }
               } catch (InterruptedException e) {
                   // do nothing
               } finally {
                   if (!stop) {
                       startActivity(new Intent(Splash.this, MyActivity.class));
                       finish();
                   } else
                       finish();
               }
           }
       };
       splashTread.start();
   }
   

   }

Answer 3

you can use AsyncTask & put that load URL code into AsyncTask & use progress bar to see progress.

Help Links :

For AsyncTask

For ProgressBar

I hope this help you.

Answer 4

Here is how to do it -

    wv.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            //hide loading image
            findViewById(R.id.imageLoading1).setVisibility(View.GONE);
            //show webview
            findViewById(R.id.webView1).setVisibility(View.VISIBLE);
        }
    });     

    wv.loadUrl("http://yoururlhere.com");

You can find the full example here - Splash Screen While Loading a URL

Answer 5

Don't create Splash screen as separate activity. Add the splash functionality on your WebView activity i.e your page loading activity. Listen to the onPageFinished event and hide the splash image or animation.

mWebView.setWebViewClient(new WebViewClient() {

   public void onPageFinished(WebView view, String url) {
        //hide splash functionality
    }
});

With this you can also get page load progress if you want to show a progress bar

mWebView.setWebChromeClient(new WebChromeClient() {
                public void onProgressChanged(WebView view, int progress) 
                   {
                   if(progress < 100 && Pbar.getVisibility() == ProgressBar.GONE){
                       Pbar.setVisibility(ProgressBar.VISIBLE);
                   }
                   Pbar.setProgress(progress);
                   if(progress == 100) {
                       Pbar.setVisibility(ProgressBar.GONE);
                   }
                }
            });