I'm developing an android activity which is loading an HTML file into a webview. However this acitivty is not loading fonts in some phones e.g. HTC Desire or Sony Xperia Z with 4.4 or 4.1 androids. I want to know if i have missed something or it is only depends on phone which i'm testing my app.
private void loadToWebView(String s) {
try {
pageWebView.loadDataWithBaseURL("file:///android_asset/", s,
"text/html", "utf-8", null);
configureWebView(pageWebView);
} catch (Exception e) {
e.printStackTrace();
}
}
here is html header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#font-face { font-family: 'Persian'; src: url('file:///android_asset/fonts/b_yekan.ttf'); }
#font-face { font-family: 'Persian2'; src: url('file:///android_asset/fonts/b_homa.ttf'); }
#font-face { font-family: 'PersianTitle'; src: url('file:///android_asset/fonts/b_titr.ttf');}
body {font-family: 'Persian';}
h1 {font-family: 'PersianTitle';}
h2 {font-family: 'Persian2';}
</style>
fonts are located in assets/fonts/ like this
First of all, fonts path should be relative to your HTML/CSS file.
So, instead of this:
#font-face { font-family: 'Persian'; src: url('file:///android_asset/fonts/b_yekan.ttf'); }
Use something like this:
#font-face { font-family: 'Persian'; src: url('fonts/b_yekan.ttf'); }
Second, you must make sure that the target you are testing against actually supports Arabic script.
With that, below I am providing a working example.
assets/about_us.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#font-face { font-family: 'B Homa'; src: url('fonts/BHOMA.TTF');}
#font-face { font-family: 'B Lotus'; src: url('fonts/BLOTUS.TTF');}
#font-face { font-family: 'B Lotus Bold'; src: url('fonts/BLOTUSBD.TTF');}
</style>
</head>
<body>
<p style="font-family:'B Homa';font-size:20px;">B Homa: مخصص</p>
<p style="font-family:'B Lotus';font-size:20px;">B Lotus: مخصص</p>
<p style="font-family:'B Lotus Bold';font-size:20px;">B Lotus Bold: مخصص</p>
</body>
</html>
BHOMA.TTF, BLOTUS.TTF and BLOTUSBD.TTF are downloaded from bornaray.com and stored in assets/fonts/ folder.
loadToWebView(), it is part of a Fragment, hence getActivity().getAssets():
private void loadToWebView() {
AssetManager assetManager = getActivity().getAssets();
try {
InputStream input = assetManager.open("about_us.html");
byte[] buffer = new byte[input.available()];
input.read(buffer);
input.close();
mWebView.loadDataWithBaseURL("file:///android_asset/",
new String(buffer), "text/html", "UTF-8", null);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
And the result:
Hope this helps.
Related
I want to convert a website into an android app using Apache Cordova and visual studio 2015. Below is my index.html code:
<!doctype html>
<html lang="en">
<head>
<title>Zoggle</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//navigator.splashscreen.hide();
if (navigator.network.connection.type == Connection.NONE) {
networkError()
} else {
loadApp()
}
}
function loadApp() {
navigator.app.loadUrl("http://zoggle.zolmeister.com")
}
function networkError() {
navigator.notification.alert('Zoggle requires an internet connection')
var $net = document.createElement('div')
$net.innerHTML = 'Zoggle requires an internet connection'
document.body.appendChild($net)
}
</script>
<style>
body {
padding: 15px;
background: #23252e;
color: #01ced3;
text-align: center;
}
div {
font-size: 20px;
}
</style>
</head>
<body>
</body>
</html>
When I run the code, it shows me a blank black page. I want to load the web page the link is given..Please Help.
You can use Inappbrowser Plugin to load the website in your app
http://www.plugreg.com/plugin/apache/cordova-plugin-inappbrowser
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/
Using Android 5.0.2...
The following is not showing up properly. I am unable to see any styling.
<!DOCTYPE html>
<html>
<head>
<style>
.bodyBG{
background: linear-gradient(#88DDFF, #55AAFF);
width:100%;
height:100%;
background-position: 0, 0;
background-size: 100%, 100%;
position: absolute;
}
</style>
</head>
<body>
<div class="bodyBG">
...
</div>
</body>
</html>
The WebView is loaded with the HTML like that.
WebView webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
InputStream inputStream = context.getResources().openRawResource(R.raw.html_page);
byte[] bytes = new byte[inputStream.available()];
inputStream.read(bytes);
final String html = new String(bytes);
webView.loadData(html, "text/html", null);
webView.addJavascriptInterface(new JSWebApp(), "app");
How to fix it?
I have an android email client. When it receives message from an outlook2011 in mac, I get a html data like this:
<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; color: rgb(0, 0, 0); font-size: 14px; font-family: Calibri, sans-serif; "><ol><li>One</li><li>Two</li><li>Three</li></ol></body></html>
And it shows the bullets properly.
However, When I receive similar message from Outlook2013 in Windows, I get this html data:
<html>
<head>
<style>
<!--
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif"}
-->
</style>
</head>
<body lang="EN-US" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoListParagraph" style="text-indent:-.25in"><span style="">1.<span style="font:7.0pt "Times New Roman"">
</span></span>one</p>
<p class="MsoListParagraph" style="text-indent:-.25in"><span style="">2.<span style="font:7.0pt "Times New Roman"">
</span></span>two</p>
<p class="MsoListParagraph" style="text-indent:-.25in"><span style="">3.<span style="font:7.0pt "Times New Roman"">
</span></span>three</p>
</div>
</body>
</html>
And the webview in my app fails to render the bullets. It shows the text, but no bullets (numbered list).
The webview code is simple one.
private WebView mMessageContentView; //declaration
onCreate() {
mMessageContentView = whatever.getView(view, R.id.message_content);
//setup some zoom settings etc etc
mMessageContentView.setWebViewClient(someWebViewClientInstance);
}
private void setMessageHtml(String html) {
if (html == null) {
html = "";
}
if (mMessageContentView != null) {
mMessageContentView.loadDataWithBaseURL("email://", html, "text/html", "utf-8", null);
}
}
How can I fix this?
I added the following definition in style.css file in assets folder.
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:Cambria;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:Cambria;}
.MsoChpDefault
{font-family:Helvetica;}
Then the following code edit to add the external css file.
private void setMessageHtml(String html) {
if (html == null) {
html = "";
}
if (mMessageContentView != null) {
String htmlWithExternalCSS = addStyleDefinition(html);
mMessageContentView.loadDataWithBaseURL("email://", htmlWithExternalCSS, "text/html", "utf-8", null);
}
}
private String addStyleDefinition(String html) {
//insert at the end of <head> tag
String headTag = "<head>";
int index = html.indexOf(headTag);
StringBuffer buff = new StringBuffer(html);
buff.insert(index+headTag.length(), "<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/style.css\" />";);
return buff.toString();
}
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);
}
I have a html code which I saved in home.txt file and placed it raw folder. Now I want to display the same in a WebView. I used the following code for it.
homeWebview = (WebView) findViewById(R.id.homeWebview);
InputStream fileStream = getResources().openRawResource(R.raw.home);
int fileLen = fileStream.available();
// Read the entire resource into a local byte buffer.
byte[] fileBuffer = new byte[fileLen];
fileStream.read(fileBuffer);
fileStream.close();
displayText = new String(fileBuffer);
//Display content.
homeWebview.loadData(displayText, "text/html", "utf-8");
It is working fine. Now I have to display some Chinese characters in the html. I added the Chinese character in home.txt. Here it is the html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Language</title>
<style type="text/css">
body {font-family: HelveticaExt-normal, Helvetica, Arial, sans-serif;margin:0;font-size:20px;color:#000000;}
.mainWrapper {margin:0;}
p {margin: 10px;}
p.bodytext {margin: 0 10px 20px;}
.headerText { background:#eeeeee; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e0e0e0));border-top: 2px solid #000000;padding-bottom:7px;}
.headerText p {margin: 10px 10px 0 10px;}
a {color:#324f85;text-decoration:underline;}
.headerbar {border-top:2px solid #000000;border-bottom:2px solid #000000;height:34px;font-family:HelveticaExt-bold, Helvetica, Sans-serif;color:#fff;font-size:18px;padding-left:10px;line-height:34px;margin:0;
background:-webkit-gradient(linear, left top, left bottom, from(#494e4f), to(#787a7c));
}
.navigationList {list-style-type:none;padding:0;margin:0;}
.navigationList li {height:60px;border-bottom:2px solid #e0e0e0;background-position:10px center;background-repeat:no-repeat;padding-left:60px;line-height:28px;
}
</style>
</head>
<body>
<div class="mainWrapper">
<div class="headerText">
<p欢迎您到泰国语言主持人！www.test.com 欲了解更多信息！</p>
</div>
</div>
</body>
Now it is displaying the common characters well, but all the Chinese char is showing as unknown char. What is the prob in my code?
use webView.loadDataWithBaseURL (null, text, "text/html", "utf-8", null);
The home.txt file was not in UTF-8 encoded, I open it in notepad++ and change the encoding. Now it is showing properly.
I think problem in this line:
displayText = new String(fileBuffer);
You should change to
displayText = new String(fileBuffer, "UTF-8");