My HTML

Android WebView code to load local HTML file

I have already discuss on CodeSpeedy how to build an android app which loads a website or web page within the android app using the inbuilt android WebView class. You already may know that you just have to put URL inside loadUrl() and you will be able to load that web page from your android app.

Now suppose you need to load a local HTML page or an offline HTML file within the WebView. So what you have to do? Now I am going to give you the process to load a local HTML file within your android app using the WebView class. It is really going to be very easy. Let’s go forward:

Use android WebView class to load local HTML file or offline HTML page

Here we go. Just remember the loadUrl() where I show you how to load this website:

mWebView.loadUrl("http://170.187.134.184");

It will load our website within android app. Now what to do for offline or local HTML file so that it will also load inside the android app. Well, to do it first you need to create a new android resource directory and name it assets inside app folder just like shown below:

Well you can attach CSS, JavaScript and all that you need for a HTML template. That means you can put the complete HTML template inside this directory. Now to load it within WebView you need to use the code given below:

myWebView.loadUrl("file:///android_asset/sample.html");

All the other code will be remain same. To see the full code of main Java and layout file I referrer you to this post – Convert HTML Template Into Android App – Android Studio

That’s it! You have done. Now test your app and have fun.

2 responses to “Android WebView code to load local HTML file”

This is very much useful way to show local html file in android webview.
Thanks for sharing this awesome method to load local html file in android webview.

Источник

Load HTML file into WebView

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.

6 Answers 6

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: /src/main/assets This can be changed in the asset folder configuration setting in your .iml file as:

You could presumably also load it form a String if you’re very adverse to using assets. (see stackoverflow.com/questions/4543349/load-local-html-in-webview)

@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.)

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: stackoverflow.com/questions/18302603/…

probably this sample could help:

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

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

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

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"); 

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.

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(); 

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.

1. 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.

Источник

Loading Html File from Assets folder in Android WebView with loading local HTML webpage inside APK.

Android assets folder is used to store external files like images, text files, html files directly into android application so whenever android apps runs it will automatically loads that particular calling file into the view you set. Android developer can load html( Hyper text mark-up language ) files through assets folder all you have to do is put designed html file inside assets folder and set into webview. So here is the complete step by step tutorial for Load local html file in webview on android.

How to Load local html file in webview on android.

Create HTML file and put that file into assets folder.

Code for MainActivity.java file.

package com.webview_loadhtml_page_from_accets_android_examples.com; import android.app.Activity; import android.os.Bundle; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends Activity < WebView webView; @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = (WebView)findViewById(R.id.webView1); WebSettings webSetting = webView.getSettings(); webSetting.setBuiltInZoomControls(true); webSetting.setJavaScriptEnabled(true); webView.setWebViewClient(new WebViewClient());  webView.loadUrl("file:///android_asset/first.html"); > private class WebViewClient extends android.webkit.WebViewClient < @Override public boolean shouldOverrideUrlLoading(WebView view, String url) < return super.shouldOverrideUrlLoading(view, url); >> >

Code for activity_main.xml layout file.

Code for first.html file.

   
this is text through assets folder
 
 h2 text  

Click Here to download Load local html file in webview on android project.

Источник

Android Studio — How to load HTML5 content from a local path using Webview?

In the official Android developer page theres this topic Building Web Apps in WebView http://developer.android.com/guide/webapps/webview.html I would like to know how to proceed if the content would be loaded from a local html folder, stored on src folder I could not find any code example or sample to download. Im using android studio

2 Answers 2

Call JavaScript inside WebView from Android activity.

/assets/mypage.html

       
MyHTML
 
Hello!
   function showAndroidToast(toast) < AndroidFunction.showToast(toast); >function openAndroidDialog() < AndroidFunction.openAndroidDialog(); >function callFromActivity(msg)  

main.xml

main code:

import android.app.Activity; import android.app.AlertDialog; import android.content.Context; import android.os.Bundle; import android.view.View; import android.webkit.WebView; import android.widget.Button; import android.widget.EditText; import android.widget.Toast; public class AndroidHTMLActivity extends Activity < WebView myBrowser; EditText Msg; Button btnSendMsg; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.main); myBrowser = (WebView)findViewById(R.id.mybrowser); final MyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface(this); myBrowser.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction"); myBrowser.getSettings().setJavaScriptEnabled(true); myBrowser.loadUrl("file:///android_asset/mypage.html"); Msg = (EditText)findViewById(R.id.msg); btnSendMsg = (Button)findViewById(R.id.sendmsg); btnSendMsg.setOnClickListener(new Button.OnClickListener()< @Override public void onClick(View arg0) < // TODO Auto-generated method stub String msgToSend = Msg.getText().toString(); myBrowser.loadUrl("javascript:callFromActivity(\""+msgToSend+"\")"); >>); > public class MyJavaScriptInterface < Context mContext; MyJavaScriptInterface(Context c) < mContext = c; >public void showToast(String toast) < Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); >public void openAndroidDialog() < AlertDialog.Builder myDialog = new AlertDialog.Builder(AndroidHTMLActivity.this); myDialog.setTitle("DANGER!"); myDialog.setMessage("You can do what you want!"); myDialog.setPositiveButton("ON", null); myDialog.show(); >> > 

Источник

Loading html file with custom external css(Caching style sheet) included inside webview.

External css are used to control and maintain html webpages from outside source with single definition so web application developer will change into one single css( Caching style sheet ) file and it will automatically change the whole html page settings. Android WebView gives us the facility to load static html pages inside assets folder and you can also add css into that web page so it will load your html page just like a computer web browser. So here is the complete step by step tutorial for Load local html file with css into android webview.

How to Load local html file with css into android webview.

Note: Put both index.html & styles.css file inside assets folder.

Code for MainActivity.java file.

package com.loadhtmlwithcss; import android.app.Activity; import android.os.Bundle; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends Activity < WebView WebViewWithCSS; @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebViewWithCSS = (WebView)findViewById(R.id.webView1); WebSettings webSetting = WebViewWithCSS.getSettings(); webSetting.setJavaScriptEnabled(true); WebViewWithCSS.setWebViewClient(new WebViewClient()); WebViewWithCSS.loadUrl("file:///android_asset/index.html"); >private class WebViewClient extends android.webkit.WebViewClient < @Override public boolean shouldOverrideUrlLoading(WebView view, String url) < return super.shouldOverrideUrlLoading(view, url); >> >

Code for activity_main.xml layout file.

Code for index.html file.

       
This page is created through External CSS
 
  

Code for styles.css file.

@charset «utf-8»; /* CSS Document */ .Main < width:100%; height:600px; border: 1px solid #09ED1C; float:left; background-color:#00F3FF; >H1

Click Here to download Load local html file with css into android webview project.

Источник