Load local html file with javascript into webview android

Call JavaScript through assets folder inside android setup apk file and set into webview using web page.

JavaScript is used to add more responsive extra smoothness inside html web pages. So my in this tutorial i am creating two files first one is Html file and second is JavaScript file now i am implementing function in JavaScript file to hide selected image on button click. So here is the complete step by step tutorial for Load local html file with javascript into webview android.

android-project-download-code-button

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

Code for MainActivity.java file.

 package com.example.loadhtmlwithjavascript_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 WebViewWithJavaScript;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 WebViewWithJavaScript = (WebView)findViewById(R.id.webView1);
 
 WebSettings webSetting = WebViewWithJavaScript.getSettings();
 webSetting.setJavaScriptEnabled(true);
 
 WebViewWithJavaScript.setWebViewClient(new WebViewClient());
 WebViewWithJavaScript.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.

 <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"
 tools:context="com.example.loadhtmlwithjavascript_android_examples.com.MainActivity"
 android:background="#01f7fa" >

 <WebView
 android:id="@+id/webView1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true" />

</RelativeLayout>

Code for index.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src ="demo.png" id="randomimage"/></br>
 <input type="button" onclick="hideimage()" value="Click Here to Hide Image"/> 

</body>
</html>

Code for script.js file.

 function hideimage() { 
document.getElementById('randomimage').style.visibility="hidden"; 
 }

Screenshots:

Load local html file with javascript into webview android

html with js

Click here to download Load local html file with javascript into webview android project.

Leave a Reply

Your email address will not be published. Required fields are marked *