I am writing an app for which I need to embed HTML object in the Android app, I followed the tutorial given here: http://mobile.tutsplus.com/tutorials/android/android-sdk-embed-a-webview-with-the-webkit-engine/ and modified the code accordingly, following is the code, but I am getting a white screen...
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView engine = (WebView) findViewById(R.id.web_engine);
engine.getSettings().setJavaScriptEnabled(true);
engine.getSettings().setPluginsEnabled(true);
engine.getSettings().setAppCacheEnabled(false);
engine.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
String data = "<html>" +
"<body>" +
"bb"+
"<object width=\"450\" height=\"300\" align=\"middle\"><param name=\"movie\" value=\"http://www.raaga.com/widgets/top10/widgettopten.swf?l=H&q=1\" /><param name=\"wmode\" value=\"transparent\"><embed src=\"http://www.raaga.com/widgets/top10/widgettopten.swf?l=H&q=1\" width=\"450\" height=\"300\" align=\"middle\" type=\"application/x-shockwave-flash\" wmode=\"transparent\" FlashVars=\"gig_lt=1312323434023&gig_pt=1312325057958&gig_g=2\"/> <param name=\"FlashVars\" value=\"gig_lt=1312323434023&gig_pt=1312325057958&gig_g=2\" /></object>"+
"gg"+
"</body>" +
"</html>";
engine.loadData(data, "text/html", "UTF-8");
}
}
The object that I want to embed is:
<object width="450" height="300" align="middle"><param name="movie" value="http://www.raaga.com/widgets/top10/widgettopten.swf?l=H&q=1" /><param name="wmode" value="transparent"><embed src="http://www.raaga.com/widgets/top10/widgettopten.swf?l=H&q=1" width="450" height="300" align="middle" type="application/x-shockwave-flash" wmode="transparent" FlashVars="gig_lt=1312323434023&gig_pt=1312326303531&gig_g=2"/> <param name="FlashVars" value="gig_lt=1312323434023&gig_pt=1312326303531&gig_g=2" /></object>
Put the file in the /assets directory, you can access it with the file:///android_asset/ directory.
Instead of putting the html in code the assets folder is where you can put static data files such as HTML and its related CSS, images, and JavaScript files, etc. Then you can use WebView.loadUrl(). This has the advantage of not having to be in code with Java String escapes and cumbersome editing. You will be able to create the file(s) separately, in your favorite web project editor, then copy and paste them. If you need to edit the file at runtime you can still load the file from the assets directory and still not have to worry about Java String escapes and cumbersome editing. Then apply the edits and pass to WebView.loadData().
To help debug this problem implement WebChromeClient.onLoadResource and check out the console message tutorial.
Don't forget to use PackageManager.getPackageInfo() to check if flash is available. If its not you can give the user the option to download it from the market.
Android has no official Flash viewer, so it doesn't know what to do with an embedded SWF.
If you put other (visible) HTML in your code, you should be able to see it in the view.
If you try to access your SWF through the webbrowser, you should get a broken/missing plugin icon.
Embedding HTML files is very simple, and loading it into WebView is even simpler. Here:
Create your HTML file, and put it in your project's assets file. in my case: "proj/assets/license.html"
WebView w = new WebView(this);
// Load the asset file by URL. Note the 3 slashes "file:///".
w.loadUrl("file:///android_asset/license.html");
That's it.
Did you declare the Internet permission in your Android manifest? In order to access the SWF which is on a remote server you will need that.
You need to enable plugins in your webview:
engine.getSettings().setPluginsEnabled(true);
Related
I want to load local HTML pages in to a WebView. I know how to do it in iPhone. Can any one tell me the way to do it in android.
How to do the below page in android?
put your file to asset folder than you can use the code below
WebView webview = (WebView) findViewById(R.id.yourwebview);
webview .loadUrl("file:///android_asset/UI/mylocalhtmlfile.htm");
use this.
yourWebView.loadUrl("file:///android_asset/yourfileName.html");
Create a TextView textArea and set it's text with the html string
You can define the string as a part of strings.xml file with your html tags and make sure you call getText(T.string.your_html_string) to fetch the html based text
<string name="your_html_text">"Press <font fgcolor="#ffffffff"><b>Menu</b></font> and touch:\n
\n<li><font fgcolor="#ffffffff"><b>Create </b></font> to create\n</li>
\n<li><font fgcolor="#ffffffff"><b>Delete All</b></font> to delete all\n</li>
</string>
and setText like
textArea.setText(getText(R.string.your_html_text));
The easiest way would probably be to put your web resources into the assets folder then call
webView.loadUrl("file:///android_asset/filename.html");
I want to integrate fusionchart in android native application (not phonegap).I have write code for it as below
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView webview =(WebView) findViewById(R.id.web);
String summary =
"<html>"+
"<head> "+
" <title>My First chart using FusionCharts XT - Using JavaScript</title> "+
"<script type=\"text/javascript\" src=\"FusionCharts/FusionCharts.js\"></script>"+
"</head> "+
"<body>"+
" <div id=\"chartContainer\">FusionCharts XT will load here!</div>"+
"<script type=\"text/javascript\">"+
" var myChart = new FusionCharts( \"FusionCharts/Column3D.swf\",\"myChartId\", \"400\",\"300\", \"0\", \"1\" );"+
"myChart.setXMLUrl(\"Data.xml\");"+
"myChart.render(\"chartContainer\");"+
"</script>"+
"</body>"+
"</html>";
webview.loadDataWithBaseURL(null, summary, "text/html", "utf8", null);
}
please anybody tell me what is problem. I dont know how to give exact FusionCharts/FusionCharts.js path and no idea about Column3D.swf file.
Where can i get those files.
even this html code not working in my pc browser.
and I want to make bar chart in android application using only fusionchart !!!
You would need to download the FusionCharts XT Download Package in order to receive the necessary JavaScript and SWF files, provided in the "Charts" folder of the Download Package, that would let you render FusionCharts. You may download the evaluation package from here.
Also, please check here for the detailed process to create your first chart on the browser.
FusionCharts is expected to work perfectly on the native Android apps, provided all the other criteria mentioned here to render the JavaScript charts (Android 3.0 and above) and Flash charts are fulfilled.
FusionCharts does not have any native API to render the charts in Android apps. Hence, you would need to use some 3rd party mobile development framework like, PhoneGap, UIWebView, etc. and the API controls they provide, to achieve the same.
There is no sample for rendering FusionCharts in native Android apps, however, there is a similar implementation for iOS apps using UIWebView Control, which can be referred to with the help of this Blog post.
[NOTE: This is purely as a reference and is not directly an Android implementation.]
You can procure the SWF and JS files from FusionCharts XT pack. Trial download is available from http://www.fusioncharts.com/downloads. You will get these files from Download Pack > Charts folder.
Generally, you need to put these files in the /assets folder. These files get packed with the apk. You can access the files using the path - /assets/....
Reference: Load file from resource
Please remember that in case you are targeting Android v3+, you do not need to render Flash charts. Thus, you do not need to copy these SWF files. FusionCharts offers JavaScript (no Flash) charts, and your implementation gets simpler as detailed in the steps below:
Copy FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js to required folder.
However, include only FusionCharts.js in your HTML code. The other JavaScript files will be loaded automatically.
Instead of passing the name of the SWF file, pass the JavaScript alias of the chart. Required modification in your code:
var myChart = new FusionCharts( \"Column3D\",\"myChartId\...
Column3D is the alias of the chart you are trying to render. No need to prefix it with a path.
DO NOT load XML using setXMLUrl. FusionCharts uses ajax to load the XML data. Local Ajax is not supported (due to the security restrictions) in most of the browsers and it may fail. Instead, load the XML using Android's resource loading mechanism (Load file from resource) and pass the data as String to the chart using setXMLData method.
myChart.setXMLData(XMLLoadedAsString);
MORE: A more synced way is to implement this is to wrap the chart rendering JavaScript code inside FusionCharts's ready Event Listener as shown below:
<script type=\"text/javascript\">"+
" FusionCharts.addEventListener(\"ready\", function () { \n"+
" var myChart = new FusionCharts( \"FusionCharts/Column3D.swf\",\"myChartId\", \"400\",\"300\", \"0\", \"1\" );"+
" myChart.setXMLUrl(\"Data.xml\");"+
" myChart.render(\"chartContainer\");"+
"\n});"+
"</script>"
can we freely put more than one html5 file in android app developed with dreamweaver cs5.5?
example:
page1.html
page2.html
page3.html
then provide hyperlinks between the pages?
I tried doing this but the browser refuses to load the pages.
If you have your HTML files in the assets folder, say in a subfolder in /assets/html/, the following would work...
Java code could look something like this:
private void displayHTML5Page(String filename) {
webView.loadUrl("file:///android_asset/html/index.html");
setContentView(webView);
In HTML you access other pages using something like:
Here's a Second Page
Here's a Third Page
Here's a Fourth Page
....
In my little app i have a webview, i only have one html file in the assets folder. I'm trying to use a named anchor to make a Jump Link but it doesn't work. It only says Web page not available I don't know where i'm wrong. Is it trying to load a html file with the name tag i provided?
WebView mWebView = (WebView) findViewById(R.id.mywebview);
mWebView.loadUrl("file:///android_asset/topics.html");
EDIT:
here's my html
<html>
<body>
<a href=”#tip”>Go somewhere</a>
//a lot of <br/>...
Somewhere
<a name=”tip”></a>
</body>
</html>
And yes the topics.html is under assets/
Where does your program fail - with the loading or when you click the anchor? It sounds like the problem is with your HTML file, so you should probably show the code from that instead. :) Also, the full LogCat output is handy too. The more info the merrier.
I recently implemented a WebView, the HTML code is extremely straight-forward (since I know close to no HTML and just wanted an easy way to display documentation). A simple anchor is just this for example:
Navigating the application
...
<a name="q1"></a>
<p><b>Navigating the application</b></p>
<p>...sliding motion (to the left or to the right) with your finger...</p>
If your program is failing at the actual loading part, then ensure that you have placed the topics.html file correctly in the /assets/ folder in your project folder. It has to be at the very root of your project folder - ie. workspace\<projectname>\assets\topics.html
Your code for loading the webpage looks fine.
I am throwing HTML to a webview to render. In the HTML I need to load an image that I have in /res/drawable.
I have /res/drawable/my_image.png and code such as this:
final WebView browser = (WebView) findViewById(R.id.my_webview);
String html = new MyHelper(myObject).getHtml();
browser.loadDataWithBaseURL("", html, "text/html", "UTF-8", "");
Where the String html has something like:
<html><head>
<h1>Here is the image</h1>
<img src="my_image.png" />
</head><html>
The question is, what should that image src attribute be to refer to the image in /res/drawable?
This worked in android 2.2
<img src = "file:///android_res/drawable/q1.png" />
where q1.png is in the res/drawable-hdpi folder
I admit I don't know much about WebViews / HTML, but it seems like you're taking the more complicated route for this. There's an easy way to load the HTML file; put it in your assets folder, and then it can be referred to as follows.
WebView webView = new WebView(this);
webView.loadUrl("file:///android_asset/index.html");
setContentView(webView);
Obviously your layout is more complex as you have more than just the WebView so you can't use setContentView() directly, but that's the basic idea. Then to reference an image in that HTML file, I used a <img> tag like so:
<img src="res/drawable/icon.png"/>
Does that work for you?
user302750,
Your method is incorrect. res/drawable/banner300.jpg should be file:///android_res/drawable/banner300.jpg.
banner300.jpg can be in one of the following locations in your project, and android will automatically load the correct one for the device you're using.
res/drawable/banner300.jpg
res/drawable-ldpi/banner300.jpg
res/drawable-mdpi/banner300.jpg
res/drawable-hdpi/banner300.jpg
res/drawable-xhdpi/banner300.jpg
The assets folder is for generic resources that you don't need different versions of. An example might be an XSL template, or something of that nature.
MikeNereson, your response to your problem is also incorrect, drawable resources should be contained in the res directory.
Here's an example from my own project. I output html, exactly like this:
<img src="file:///android_res/drawable/stats_btn.png"/>
If using an ldpi device, I get the ldpi image, if using hdpi or mdpi, I get the appropriate one for those as well. Android resolves file:///android_res/drawable/stats_btn.png to one of the following resources that I have in my project.
./res/drawable-ldpi/stats_btn.png
./res/drawable-hdpi/stats_btn.png
./res/drawable-mdpi/stats_btn.png
From my tests the path, "file:///android_res/drawable/q1.png" only works with 2.2+. For 2.1 that gives a file not found error. Moving the resource to assets will work but that isn't really feasible if you want to make use of the drawable features (meaning you'd need a copy of the image in each folder...).
Answers involving file:// URLs may not work any more as of Android 4.0. See answer to this question. A way that will work is in the answer here.
I have the exact same problem, but neither placing the image file in res/drawable (which I first had to create, I hust had drawable-hdpi, -ldpi and -mdpi already existing) or using the file:///asset/ URL worked for me.
Here is what I do:
Activity:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
String summary = "<html><body><div style=\"background:red; width:300px; height:50px;\"></div><img src=\"res/drawable/banner300.jpg\"/></body></html>";
mWebView.loadData(summary, "text/html", "utf-8");
Then in res/drawable I placed the banner300.jpg - but it does not show up. Any ideas?
You load the drawables like you would anywhere else in your code...
http://developer.android.com/guide/topics/resources/drawable-resource.html
Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage);
also #MikeNereson using Android, you can only directly access raw files that are located in the assets directory and SDCard.