Load HTML file into WebView

Question

I have a local html page along with several other resources pointed by it (css files and Javascript libraries) that I would like to load into a WebView . How could this be achieved ?

Perhaps not the best way to procede but I'm still experimenting.

Sliding

for me it worked if I dropped the dot html -webView.loadUrl("file:///android_asset/filename"); – Invar

Any reason why you don't want to accept @Joe's answer? – Ebby

Answer 1

The easiest way would probably be to put your web resources into the assets folder then call:

webView.loadUrl("file:///android_asset/filename.html");

For Complete Communication between Java and Webview See This

Update: The assets folder is usually the following folder: <project>/src/main/assets This can be changed in the asset folder configuration setting in your <app>.iml file as:

<option name=”ASSETS_FOLDER_RELATIVE_PATH” value=”/src/main/assets” /> See Article Where to place the assets folder in Android Studio

Unintentional

This problem is really an FAQ. – Lillalillard

What other ways would there be ? – Sliding

You could presumably also load it form a String if you're very adverse to using assets...(see https://mcmap.net/q/129198/-load-local-html-in-webview) – Unintentional

This should be marked as correct answer, `cause it really is. – Constrained

If the assets path ever changes this will break. – Seaworthy

@SK9 The same applies if any other asset or expected file is missing, like if you change the name of your starting activity class and don't update AndroidManifest.xml to reflect that. (Personally, I'd recommend putting the URL/file path in string resources and accessing it from there such that the path is with all the other string data for the program, but that isn't really directly related to the issue of asset/resource dependency.) – Police

for me it worked if I dropped the dot html -webView.loadUrl("file:///android_asset/filename"); – Invar

For those don't know how to create assets folder, right click on "app"->"New"->"Folder"->"Assets Folder", and click "Finish". Android Studio will create the assets folder in correct path. And you just need to move your html file to the new assets folder. Reference: #18303103 – Buehler

Yes, this is working, but it shows incorrectly non english letters. – Zymo

I have same problem for ios, does anyone have come across this problem? If yes please share your solution i tried different way to access but it of no use , i tried solution forum.qt.io/topic/47495/upload-ios-image-with-qt/11 – Insolence

Android Studio doesn't seem to have the "New > Assets Folder" option anymore. Updated the answer to include the proper file path. Note that assets is parallel to res folder-structure wise. – Dingbat

Answer 2

probably this sample could help:

  WebView lWebView = (WebView)findViewById(R.id.webView);
  File lFile = new File(Environment.getExternalStorageDirectory() + "<FOLDER_PATH_TO_FILE>/<FILE_NAME>");
  lWebView.loadUrl("file:///" + lFile.getAbsolutePath());

Marler

in the example there that have the html in external memory, it is best to have it packaged within the application – Topknot

"file:///" is important when using HTML file from local device directory. Thanks – Themis

Answer 3

In this case, using WebView#loadDataWithBaseUrl() is better than WebView#loadUrl()!

webView.loadDataWithBaseURL(url, 
        data,
        "text/html",
        "utf-8",
        null);

url: url/path String pointing to the directory all your JavaScript files and html links have their origin. If null, it's about:blank. data: String containing your hmtl file, read with BufferedReader for example

More info: WebView.loadDataWithBaseURL(java.lang.String, java.lang.String, java.lang.String, java.lang.String, java.lang.String)

Assume

What is data variable? Please provide an example. – Bondman

Answer 4

The Accepted Answer is not working for me, This is what works for me

WebSettings webSetting = webView.getSettings();
    webSetting.setBuiltInZoomControls(true);
    webView1.setWebViewClient(new WebViewClient());

   webView.loadUrl("file:///android_asset/index.html");

Chokecherry

Whats is the version of your Mobile? – Chokecherry

Answer 5

XML Layout File:

<WebView android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/webView"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".activities.Bani9">
</WebView>

Java Code:

public class Bani9 extends AppCompatActivity {
    WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bani9);
        webView = findViewById(R.id.webView);
        WebSettings webSetting = webView.getSettings();
        webSetting.setBuiltInZoomControls(true);
        webView.setWebViewClient(new WebViewClient());

        webView.loadUrl("file:///android_asset/punjabi/bani9.html");
    }
}

Make sure you set file path accurately.

Harquebusier

Answer 6

From the official guide https://developer.android.com/develop/ui/views/layout/webapps/load-local-content :

1. Store the HTML as an asset in app/src/main/assets/
2. Use WebViewAssetLoader to load the asset. Construct it in your onCreate() as follows:

final WebViewAssetLoader assetLoader = new WebViewAssetLoader.Builder()
         .addPathHandler("/assets/", new WebViewAssetLoader.AssetsPathHandler(this))
         .addPathHandler("/res/", new WebViewAssetLoader.ResourcesPathHandler(this))
         .build();

3. Subclass WebViewClient to wrap WebViewAssetLoader:

private static class LocalContentWebViewClient extends WebViewClientCompat {

    private final WebViewAssetLoader mAssetLoader;

    LocalContentWebViewClient(WebViewAssetLoader assetLoader) {
        mAssetLoader = assetLoader;
    }

    @Override
    @RequiresApi(21)
    public WebResourceResponse shouldInterceptRequest(WebView view,
                                     WebResourceRequest request) {
        return mAssetLoader.shouldInterceptRequest(request.getUrl());
    }

    @Override
    @SuppressWarnings("deprecation") // to support API < 21
    public WebResourceResponse shouldInterceptRequest(WebView view,
                                     String url) {
        return mAssetLoader.shouldInterceptRequest(Uri.parse(url));
    }
}

This basically passes the request URL to WebViewAssetLoader to load web content from an asset.

4. Use assetLoader from (2) to construct WebViewClient from (3), and set it in your WebView. Your index.html can be loaded by using https and the default domain appassets.androidplatform.net:

mWebView.setWebViewClient(new LocalContentWebViewClient(assetLoader));
mWebView.loadUrl("https://appassets.androidplatform.net/assets/index.html");

Note that loading local files using web-like URLs instead of file:// is desirable as it is compatible with the Same-Origin policy.

Urger