Develop Reference

Load CSS JS from Assets folder

I've been searching for hours for a solution; and although there are similar situations, mine I think is a bit different.
I have a website that I'm loading into webview
setContentView(R.layout.activity_main);
WebView myWebView = (WebView) findViewById(webview);
myWebView.loadUrl("http://my-website.com/index.php");
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
myWebView.setWebViewClient(new WebViewClient(){
#Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
view.loadUrl(request.toString());
return true;
}
}); }
It's loading the website fine. No issues. What I'm trying to do (because there are alot of CSS & JS files) is load these files from the assets folder of the Android App - I'm trying to make the page load faster.
<link href="file:///android_asset/css/keyframes.css" rel="stylesheet" type="text/css">
<link href="file:///android_asset/css/materialize.min.css" rel="stylesheet" type="text/css">
<link href="file:///android_asset/css/swiper.css" rel="stylesheet" type="text/css">
<link href="file:///android_asset/css/swipebox.min.css" rel="stylesheet" type="text/css">
<link href="file:///android_asset/css/style.css" rel="stylesheet" type="text/css">
It is currently not loading any of my CSS files which are called this way.
I really don't mean to pester anybody with a simple problem, It's just been bothering me and I'm not good with Java.
Also, this is NOT a local HTML page. This is a PHP page loaded from a remote server.

I am not a mobile developer, but I am a web developer that did write some webview pages for my mobile developer colleagues.
As far as I know, you are not able to access file system in webview. However, you can let your app cache the css / js files.
viewer.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT)
(This is from an answer here on stackoverflow) (and here is the document on cache settings)
By using the default cache settings, the CSS / JS files will be cached after downloaded in the first time, as it was cached in normal browser. So you can simply use
<link href="https://your.domain/css/style.css" rel="stylesheet" type="text/css">
to achieve the faster page load you want.

If you want to load css and js from local asset folder then first you need to download your webpage and then after you need to pass in web browser like following way,
Download Data Like using this :
public String getHtmlContent(String urlToLoad) {
String outputStr = "";
BufferedReader inputString = null;
try {
URL urlLoad = new URL(urlToLoad);
inputString = new BufferedReader(new InputStreamReader(urlLoad.openStream()));
String str;
while ((str = inputString.readLine()) != null) {
outputStr += str;
}
} catch (MalformedURLException e) {
} catch (IOException e) {
} finally {
if (inputString != null) {
try {
inputString.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return outputStr;
}
Then after you need to put your js and css file inside of asset folder and then need to define a url in web page like following
<script src="file:///android_asset/jquery.min.js" type="text/javascript"></script>
You need set all the url using like file:///android_asset/ then after your css or js name,
After all thing finish you need to set your webpage content with webview like following
String webData = getHtmlContent("http://webisteaddress.com/index.html");
mWebView.loadDataWithBaseURL("file:///android_asset/", webData, "text/html", "utf-8", "");

Use this function to load CSS & JavaScript inside your WebView:
inject both CSS & JavaScript inside onCreate() on WebViewClient:
webView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url)
{
injectJavaScript(view);
injectCSS();
}
Create two methods to inject JavaScript & CSS(from res/raw):
private boolean injectJavaScript(WebView view){
view.loadUrl("javascript:(function() { " +
"var head = document.getElementsByTagName('header')[0];"
+ "head.parentNode.removeChild(head);" + "console.log('true');"+
"})()");
view.loadUrl("javascript:(function() { " +
"var footer = document.getElementsByTagName('footer')[0];"
+ "footer.parentNode.removeChild(footer);" +
"})()");
view.loadUrl("javascript:(function() { " +
"var nav = document.getElementsByTagName('nav')[0];"
+ "nav.parentNode.removeChild(nav);" +
"})()");
view.loadUrl("javascript:(function() { " +
"var set = document.getElementsByClassName('banner');"
+ "set[0].style.margin = '0px';" +
"})()");
return true;
}
private void injectCSS() {
try {
InputStream inputStream = getResources().openRawResource(R.raw.css);
byte[] buffer = new byte[inputStream.available()];
inputStream.read(buffer);
inputStream.close();
String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
wv1.loadUrl("javascript:(function() {" +
"var parent = document.getElementsByTagName('head').item(0);" +
"var style = document.createElement('style');" +
"style.type = 'text/css';" +
"style.innerHTML = window.atob('" + encoded + "');" +
"parent.appendChild(style)" +
"})()");
} catch (Exception e) {
e.printStackTrace();
}
}
This worked for me like a charm.

Loading CSS using <link rel="stylesheet" href=""/> is going to be deprecated in March 2018. I just got a warning message for this in Developer Console today.
This is because nothing renders on the page till all the CSS has loaded.
So instead, the suggestion is that we load the CSS using JavaScript, and have a small inline stylesheet to render the basic look of the page; plus separate stylesheets for each section of the page, which are called from the <body> rather than the <head>.

Interfacing with Html And Android

I have developed a media player in Html.Now my job is to play streaming Url in Html coded media player coming from Android activity.So i have need to pass url from android activity to Html media player files where it will be play.I have searched lot but haven't find any good solution.please suggest me. Thanks
Java Code
setContentView(R.layout.main);
// String LocalFile = "file:///android_asset/android.html";
WebView webView = (WebView) findViewById(R.id.webView1);
String html = "<embed src=\"file:///android_asset/"
+ "android.html"
+ " \"play=\"true\" loop=\"true\" width=\"100%\" height=\"100%\"> <embed>";
webView.getSettings().setPluginState(WebSettings.PluginState.OFF);
webView.getSettings().setPluginsEnabled(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadDataWithBaseURL("file:///android_asset/", html,
"text/html", "utf-8", null);
String str = "rtmp://23.21.155.146:554/9016012507701502509011502505116016019xm150.sdp";
webView.loadUrl("javascript:passWebUrl('" + str + "')");
My Code for media player
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css" media="screen">
html, body{
margin:0;
padding:0;
height:100%;
}
#altContent{
width:100%;
height:100%;
}
</style>
<title>YOUR TITLE HERE!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
function passWebUrl(url)
{
alert(url);
}
flashvars.HaloColor = "0x0086db";
flashvars.ToolTips = "true";
flashvars.AutoPlay = "true";
flashvars.VolumeLevel = "50";
flashvars.CaptionURL = "YOUR CAPTION HERE";
flashvars.Title = "YOUR TITLE HERE";
flashvars.Logo = "";
flashvars.SRC = "Here is my url link should comes from Android Activity";
flashvars.BufferTime = "5";
flashvars.AutoHideControls = "false";
flashvars.IsLive = "true";
var params = {};
params.wmode = "transparent";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "L3MP";
swfobject.embedSWF("http://media-player.cdn.level3.net/flash/v1_1_1/Level3MediaPlayer.swf", "altContent", "100%", "100%", "10.1.0","http://media-player.cdn.level3.net/flash/v1_1_1/expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="altContent">
<center> <BR><BR><span style="color:red"><b>Please Install Adobe Flash Player</b>
</span><BR><BR>
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</center>
</div>
</body>
</html>
</script>
</html>

For passing the value of variable from your java class to the javascript function in your html page you have to use this code. Try this:
String str = "variable_value";
webView.loadUrl("javascript:functionName('"+ str +"')");
EDIT : -
function passWebUrl(url)
{
alert(url);
}

Passing data from java class to Web View html

I'm loading below html in my webView
https://mail-attachment.googleusercontent.com/attachment/?ui=2&ik=25c0c425c6&view=att&th=138db54ff27ad34b&attid=0.1&disp=inline&realattid=f_h5ahtmbe0&safe=1&zw&saduie=AG9B_P9YNooGjsk_jLefLptQ9q15&sadet=1343790299575&sads=-yBVsLKP_2mh7zMfYLCF7sL1u-w
Now what I want to do is to fill the textbox in the html that came from my java class variable and then automatically hit submit.
But I don't have any idea how to do this.
Any thougths will be appreciated.

First, your URL seems not available.
If you want to do data exchange between android app and your web app/web page you can achieve this via javascript.
Here is an example from Android official site:
Create a class like this:
public class JavaScriptInterface {
Context mContext;
/** Instantiate the interface and set the context */
JavaScriptInterface(Context c) {
mContext = c;
}
/** Show a toast from the web page */
#JavascriptInterface
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}
In your WebView:
WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");
In your web page:
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>
If you wanna pass something to your webpage, just calling corresponding javascript function:
String str = "xxx";
myWebView.loadUrl("javascript:xxx('"+str+"')");
Here is the Reference:
http://developer.android.com/guide/webapps/webview.html

I would add that the load of the javascript function should be done when the html is loaded. To control that, you can use the following:
webview.getSettings().setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/test.html");
webview.setWebViewClient(new WebViewClient(){
public void onPageFinished(WebView view, String url){
webview.loadUrl("javascript:init('" + theArgumentYouWantToPass + "')");
}
});
test.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
hola
adios
</body>
<script type="text/javascript">
function init(val){
// Do whatever you want with your parameter val
}
</script>
</html>
Taken from Uncaught ReferenceError: myFunction is not defined at null:1 Android exception in webview

Just enable DOM Storage and write var x= to string:
webview.getSettings().setJavaScriptEnabled(true);
web.getSettings().setDomStorageEnabled(true);
webview.loadUrl(urlString);
webview.setWebViewClient(new WebViewClient(){
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
String js = "javascript:var x =document.getElementById('username').value = '"+user+"';var y=document.getElementById('password').value='"+pass+"';";
if (Build.VERSION.SDK_INT >= 19) {
view.evaluateJavascript(js, new ValueCallback<String>() {
#Override
public void onReceiveValue(String s) {
}
});
}
else {
view.loadUrl(js);
}
}

Be careful to call javascript function like this, the str may include single quote or other special characters.
String str = "xxx";
myWebView.loadUrl("javascript:xxx('"+str+"')");
I suggest to encode the str in base64, and decode it on javascript side.
Android
String str = "xxx";
//encode in base64
String base64Str = Base64.encodeToString(str.getBytes(), Base64.NO_WRAP);
myWebView.loadUrl("javascript:xxx('"+ base64Str +"')");
Javascript
function xxx(val) {
//decode from base64
var str = atob(data)
}

Pass the paramter directly in the url
webView.loadUrl("file:///android_asset/animation.html?message=testing");
Get the paramter in html file
var url_string = window.location.href
var url = new URL(url_string);
var message= url.searchParams.get("message");

Solutions by Hungr would work, but using the same document they point out, I do the following:
in my Android code WebAppInterface class:
#JavascriptInterface
fun provideData(val input: String): String{
val output = ""
//some operation with input
return output
}
then in host activity for webview:
webView.addJavascriptInterface(WebAppInterface(this), "Provider")
Inside your JS or HTML:
document.getElementbyId("Text").innerhtml = Provider.provideData(input);

Changing HTML in a WebView programmatically

I'm loading an html asset page into a WebView using
webMain.loadUrl("file:///android_asset/record.html");
which works fine, but inside the html are a number of places where I'd like to use information from the app. For instance, the HTML may contain text that reads "[Custom]". Is there a way I can replace that word with information passed from the application?

This is an old and already accepted question, however I am sure that the problem can be solved in more elegant way by using javascript.
Keep the html file in your assets folder and surround the text which you want to replace into with div elements with unique id's.
<html>
<head> ... <head>
<body>
Static text
<div id="replace1">replace me</div>
<div id="replace2">replace me too</div>
More static text ...
</body>
</html>
Now create a javascript function which will replace the innerHtml of a div with an id:
function replace(id, newContent)
{
document.getElementById(id).innerHTML = newContent;
}
This function will be best placed directly in the html file, update the <head> section to look like this:
<head>
...
<script type="text/javascript">
function replace(id, newContent)
{
document.getElementById(id).innerHTML = newContent;
}
</script>
</head>
Now we need to call the javascript function from from the WebView Android api:
WebView helpView = (WebView)findViewById(R.id.helpView);
helpView.getSettings().setJavaScriptEnabled(true);
helpView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
view.loadUrl("javascript:replace('replace1', 'new content 1')");
view.loadUrl("javascript:replace('replace2', 'new content 2')");
}
});
helpView.loadUrl("file:///android_asset/help.html");
Using this you will avoid reading potentially large data into memory and running expensive operations on it unnecessarily.

This is worked for me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Payment Demo</title>
</head>
<body>
<div>
<input type="text" id="uname " name="uname " value="">
<input type="text" id="pass" name="pass" value="">
</div>
</body>
</html>
This is java code.
WebView wb = (WebView) findViewById(R.id.webView1);
wb.loadUrl("file:///android_asset/web1.html");
wb.getSettings().setJavaScriptEnabled(true);
wb.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView web, String url) {
// TODO Auto-generated method stub
String uname = "email#mail.com";
String pass = "******";
web.loadUrl("javascript:(function(){document.getElementById('uname').value = '"+uname+"';})()");
web.loadUrl("javascript:(function(){document.getElementById('pass').value = '"+pass+"';})()");
}
});

Actually I do not understand why the file size of record.html will affect maintainence of the code. Read the html string (using Java reader class or what ever) from the html file in asset, use replaceAll function with Regex to replace all the [Custom] in the html file. How long the html is should not really affect how you maintain the code. It should rather be a performance problem, or the string is really really long that exceeds the java String limit.
some code I have used before :
InputStream is = getApplicationContext().getAssets().open("details/product_jsmodify.html");
Reader r = new InputStreamReader(is);
String details = Utils.readertoString(r);
details = details.replace("%product_name%",productName );
Utils is my class doing the conversion to string. I am not using Regex here as I am only replacing word for once. Then I load the string like Cata does. It is quite clean I suppose.

Yes you can do that by loading your page in a String and then load that string in your WebView.
Eg:
String summary = "<html><body>You scored <b>192</b> points.</body></html>";
webview.loadData(summary, "text/html", null);
Taken from here

This one worked for me, with the html along with the text and images.
InputStream is = getAssets().open(html_name);
int size = is.available();
byte[] buffer = new byte[size];
is.read(buffer);
is.close();
String str = new String(buffer);
str = str.replace("InitialTextToBeReplaced", "TextAfterReplacement");
//Now instead of webview.loadURL(""), I needed to do something like -
webView.loadDataWithBaseURL("file:///android_asset/", str, "text/html", "UTF-8",null);

JQuery doesn't work on WebView

I tried to include JQuery files in assets/scripts and on Internet, but the alert dialog doesn't show. I got the log output and make it output.html, it works in Windows (so strange!).
What's the problem with WebView?
public void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
webView = (WebView) findViewById(R.id.webView);
final String s = "<html><head>" +
"<link href=\"css/my.css\" type=\"text/css\" rel=\"stylesheet\" />" +
"<script src=\"scripts/jquery-1.6.2.min.js\" rel=\"stylesheet\" type=\"text/javascript\"></script>" +
"<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js\" type=\"text/javascript\"></script>" +
"<script>" +
"$(document).ready(function(){ alert('hello'); });" +
"</script>" +
"</head><body><div>All I hear is raindrops." +
"Falling on the rooftop. Oh baby tell me why you have to go. " +
"Cause this pain I feel you won't go away. And today, " +
"I'm officially missing you.</div></body></html>";
webView.getSettings().setJavaScriptEnabled(true);
Log.d("Something", s);
webView.loadDataWithBaseURL("file:///android_asset/", s, "text/html", "utf-8", null);
}
This is the log output after adding extension ".html". It works on Firefox but does not on WebView. :(
<html>
<head>
<link href="css/my.css" type="text/css" rel="stylesheet" />
<script src="scripts/jquery-1.6.2.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
<script>$(document).ready(function(){ alert('hello'); });</script>
</head>
<body>
<div>
All I hear is raindrops.Falling on the rooftop. Oh baby tell me why you have to go. Cause this pain I feel you won't go away. And today, I'm officially missing you.
</div>
</body>
</html>

webView.loadDataWithBaseURL("file:///android_asset/", s, "text/html", "utf-8", null);
be change to
webView.loadDataWithBaseURL(getAssets(), s, "text/html", "utf-8", null);
to get asset file, you will need to access app's asset path. An app is an user on Android, so cannot access path begin with "file://" directory.

You will need to have the jquery.js file in your assets/scripts folder for this to work.
scripts/jquery-1.6.2.min.js
That should work.

As already mentioned on Android WebView doesn't load jQuery:
Where is your scripts/jquery-1.6.2.min.js script located? If it is located in your assets directory, then you should initialize the webView giving it the assets directory as baseUrl:
webView.loadDataWithBaseURL("file:///android_asset/", data, "text/html", "UTF-8", null);
or
webView.loadUrl("file:///android_asset/file.html");
You could try to create a simple .js file with a simple function like
function dummy(document) { document.write("Hooray it works"); }
and try to access the dummy function in your html to test if the .js file is included.

setPluginsEnabled in WebView settings to true.

I Guess, some javascript functions like prompt and alert (System popups), should be implemented by your code.
A simple guide..,
1. Create a class Jscalls.java
public class Jscalls {
Context mContext;
Jscalls(Context c) {
mContext = c;
}
/** Show a toast from the web page */
public void alert(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}
2. In your program add, webView.addJavascriptInterface(new Jscalls(this), "Android");
3. In html pages, instead of alert("hello"), use Android.alert("hello")
Hope it works :)

You should give full path to load javascript and css for example
<link href="http://yourdomain.com/css/my.css" type="text/css" rel="stylesheet" />