I have a html file with css file. I want to load it into Webview. In the css file, i set font-weight for some elements in html file. But the problem is the webview cannot show the bold text that i set. In the list devices i tested: Nexus S, Nexus 4, Nexus 5, Nexus 7, Samsung S3, LG, only Nexus 7 can display the bold text.
I research many times but still no result. Do you have any ideas for this. Thanks you.
Here is my html file:
<link href="css/style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<section id="answer_box"><!--解答ボックス-->
<p class="explain_title">正解</p>
<p class="answer_p"><span class="answer_no">イ</span> </p>
</section>
<section class="question_title_box">
<p class="question_main_title"><span class="question_no">１</span>リスニングテスト（放送による指示に従って答えなさい。）</p>
</section><!--question_title_box終わり-->
Here is my css file
p.question_title_box{
font-size: 15px;
font-weight: 600
}
Here is how i load html file:
wvQuestion = (WebView) findViewById(R.id.question_content);
WebSettings webSettings = wvQuestion.getSettings();
webSettings.setJavaScriptEnabled(true);
String url = "test.html";
wvQuestion.loadUrl(url);
assuming that your css file is stored in assets/css, you should be able to load it through loadDataWithBaseURL. E.g.
wvQuestion.loadDataWithBaseURL("file:///android_asset/css/", url, "text/html", "UTF-8", null);
Related
I'm working on a reader, and we used to work on epub2, and I working on pagination effect using CSS file. I have recently received an ePub 3 file and it does not abide by the CSS rules that I have provided, although it works correctly when tried on Play Books android app.
Note that I have manipulated several features related to web view such as:
testWV.getSettings().setUseWideViewPort(true);
testWV.getSettings().setLoadWithOverviewMode(true);
and this is the paging CSS used which as mentioned before works perfectly on epub2 files
html {
height:heightplaceholderpx; //set dynamically depending on phone screen size
width:100%;
}
body {
margin:0px;
padding:0px;
width:100%;
pointer-events: none;
}
#viewer {
width:widthplaceholderpx;
height:heightplaceholderpx;
}
#book {
width:widthplaceholderpx;
height:heightplaceholderpx;
margin-left:50px;
margin-right:50px;
margin-top:10px;
-webkit-column-count:auto;
-webkit-column-width:widthplaceholderpx;
-webkit-column-gap:100px;
text-align:justify;
}
.h {
margin-top:60px;
margin-left:100px;
margin-right:100px;
}
img {
max-width: 100%;
height:auto;
}
This is how I'm integrating the CSS file:
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<link rel="stylesheet" href="columnPaging.css" type="text/css" media="screen"/>
headplaceholder //the header extracted from the xhtml file of the book
</head>
<body>
<div id="viewer">
<div id="book">
bodyplaceholder //the body extracted from the xhtml file of the book
</div>
</div>
</body>
</html>
Like you can see you use this var widthplaceholderpx in his css. Normally it should be override it in the Java code. But when the bodyplaceholder was add to the body in the HTML I needed to override the widthplaceholderpx again. So the css would know what the actual height was.
This question already has answers here:
android Not allowed to load local resource:file:///android_asset
(5 answers)
Closed 9 years ago.
I load html files from remote server and show them in webview but default font face for my language is a bit messy so I tried to load fonts from asset folder. here are my java code and html file.
webView.getSettings().setAppCacheEnabled(false);
webView.getSettings().setAppCacheMaxSize(1);
webView.getSettings().setDomStorageEnabled(true);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
webView.setWebViewClient(new MyWebViewClient());
isShowing=true;
dialog.show();
String address="http://server/test.html";
Log.d("checking", address);
webView.loadUrl(address);
html code:
<?xml version="1.0" encoding="utf-8"?>
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Title Here </title>
<style type="text/css">
#font-face {
font-family:nazanin;
src:url('file:///android_asset/fonts/BNAZANIN.TTF');
}
body {
font-family: nazanin;
font-size: medium;
text-align: justify;
}
</style>
</head>
<body>
<p>this is for test</p>
</body>
</html>
the problem is after loading I got this error:
11-21 10:50:55.439: E/Web Console(9572): Not allowed to load local resource: file:///android_asset/fonts/BNAZANIN.TTF at :0
what is the solution for this?
I end up adding that font on server and link to that in html file. I tried almost any ways and I think this is the only way that works. LoadDataWithBaseUrl and adding font in asset folder is not the way when you have external files like css and js to use in html.
I have html content and images to load in webview in jelly bean OS. images are taken from sd card.
Here are the content:
<html>
<head>
<title>Test Name</title>
</head>
<body>
<p><font color="#003399" size="2">
<center>
<a href="file://storage/sdcard0/images/img.jpg" target="_blank" >
<img src="file://storage/sdcard0/images/img.jpg" />
</a>
</center>
</p>
</font> Contetnt Goes Here
</body>
</html>
myWebView.loadDataWithBaseURL("",webcontent, "text/html", "UTF-8", null);
Its working in ICS OS but does not load into jelly bean OS web view.
Thanks in advance
I am working on an application with many html pages. I have created these in the raw folder on Eclipse.
I'm going to be making many html files and I want to have only one location for the css file which I want to call in each of the html files. This application works in such a way that the
loadData method displays the html page as shown below:
webview.loadData(readTextFromResource(R.raw.gen1), "text/html", "utf-8");
Id appreciate any ideas.
you can copy html and css files in your project assets and load html file from asset to webview like below code:
WebView wv;
wv = (WebView) findViewById(R.id.webView1);
wv.setBackgroundColor(0);
wv.setBackgroundResource(android.R.color.black);
wv.setWebChromeClient(new WebChromeClient());
wv.setWebViewClient(new WebViewClient());
wv.getSettings().setJavaScriptEnabled(true);
wv.getSettings().setPluginsEnabled(true);
wv.loadUrl("file:///android_asset/Index_Animation/test.html");
like below screen shot:
and refer css in html file below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="./style.css" type="text/css" media="screen"><!--This line refer the css file-->
</head>
<body bgcolor="#000000">
<div class="col_left">
<div class="logo">
<div class="circles">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2"></div>
</div>
<center>
<img src="./Untitled.png" />
</center>
</div>
</div>
</body></html>
I found some Android RTMP libraries (like this : http://rtmpdump.mplayerhq.hu/).
The problem is that there is no accurate documentation on how we can use it.
In my case, I have a simple RTMP live audio stream (ex: rtmp://myserver/myapp/myliveaudio).
What is the easiest way to read it in my Android app?
Please, I don't want links: I need some pieces of code or some accurate step-by-step explanation.
Thank you very much.
It is unfortunately non-trivially difficult to do. Right now your best bet is to look at the code in http://code.google.com/p/android-rtmp-client/: specifically look at http://code.google.com/p/android-rtmp-client/source/browse/trunk/example/com/ryong21/example/recorder/RecorderClient.java and http://code.google.com/p/android-rtmp-client/source/browse/trunk/example/com/ryong21/example/recorder/Recorder.java. These walk through taking in a streamed MP3 file and recording its contents to an FLV file on disk.
You would need to modify the RecorderClient.java file (specifically around line 193) to play the audio data out the speakers.
Not sure if this helps, but... I was able to do something similar (rtmp - streaming video) using Flash, so you need Android 2.2+ for this.
Anyway, I just wrote an HTML page displaying the flash video then opened the page in a WebView.
<!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 = {};
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 = "rtmp://YOUR STREAM URL HERE";
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>
OK... now just save that in your assets folder in your project
and open it with something like this in your activity :
String LocalFile = "file:///android_asset/YOUR_HTML_FILE.htm";
WebView webView = (WebView) findViewById(R.id.YOUR_WEB_VIEW);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setPluginsEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setAllowFileAccess(true);
webView.setBackgroundColor(Color.BLACK);
webView.setVerticalScrollBarEnabled(false);
webView.setHorizontalScrollBarEnabled(false);
webView.loadUrl(LocalFile);
Its a bit of a work around... Hope it works for you. CDub.