Android Webview: Display image while page loading

Question

I'm new on programming. I'm trying to create an app with Webview/Android. I'm trying to add a type of splash image until the web page is finished loading. I got it the splash image, but the bliss ends before the url is finished loading. Then I get a white screen before the page is displayed. I tried many different guides, but none of them solve the problem. I hope some one can help me with this.

I want splash or an images to display while the web page finished loading and showing page without any white screen in between.

Here is my code:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>

MainActivity.java

package com.eatnow.brasil
import androidx.appcompat.app.AppCompatActivity;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.graphics.Bitmap;
import android.view.View;
public class MainActivity extends AppCompatActivity {
    private WebView webView;
   public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //webview use to call own site
    webView =(WebView)findViewById(R.id.webView1);
    webView.setWebViewClient(new WebViewClient());//use to hide the address bar
    webView .getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setBuiltInZoomControls(true); // Enable zoom on sites
    webView.getSettings().setSupportZoom(true);
    webView .getSettings().setTextZoom(95); // where 90 is 90%; default value is ... 100
    webView .getSettings().setDomStorageEnabled(true); //to store history
    webView.setBackgroundColor(0xff2f0848);
    //imporove webView performance
    webView.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
    webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
    webView.getSettings().setAppCacheEnabled(true);
    webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
    webView.getSettings().setUseWideViewPort(true);
    webView.getSettings().setSaveFormData(true);
    webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
    webView.loadUrl("https://eat-now.no/");
}
@Override
public void onBackPressed() {
    if(webView.canGoBack())
    {
        webView.goBack();
    }
    else{
        super.onBackPressed();
    }
}

}

activity_splash.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:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
 android:background="#2f0848"
    tools:context=".SplashActivity">

    <ImageView
        android:id="@+id/splash"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="0dp"
        android:contentDescription="@string/app_name"
        android:src="@drawable/eatnow_splash" />

</RelativeLayout>

question from:https://stackoverflow.com/questions/65876625/android-webview-display-image-while-page-loading

Answer 1

This is a typical problem of WebView. We normally use a ProgressDiglog to fill the white screen when webView loading.

Here is a example using ProgressDialog when the WebView is loaging: https://github.com/rupok/webview

Its a old project using eclipse IDE, but you could refer the ShowWebView.java and the xml in layout. You could use a image to replace the ProgressDialog, if you want.