Android WebView remote url with local font file in assets? - android

I am trying to reference a local font file in the assets folder as follows:-
#font-face {
font-family: 'MyFont';
src: url('file:///android_asset/MyFont.ttf');
}
And then using
webView.loadUrl("http://www.dummy.com/page_that_uses_font_css.html");
But it seems that this does not work, I have searched stack and the web and found that most examples of doing something similar to this can only do so with loadDataWithBaseURL(...);
I have also tried to override WebResourceResponse WebViewClient.shouldInterceptRequest(...) but it seems that #font-face src references are not picked up by this method and therefore unable to return my font as an asset stream.
Is it even possible to do this at all, any other way?
If anyone could recommend an alternative or provide help on this issue it would be highly appreciated.
Thanks for the help.


It seems you can change the html code too. How does your HTML look like?

Related

How to refer to files in asset folder from outside html

This problem seems familiar but it's not! I have a webpage on a web server and a webview in Android application that loads the webpage. And instead of loading some font from the Internet (or website), i want to load fonts directly from asset folder of Android device (to save data and faster). What i have done is to embed this code in the website with the hope it can use the font in Android asset folder instead:
#font-face {
font-family: 'DejaVuSans';
src: url('file:///android_asset/fonts/DejaVuSans.ttf'); /* but this does not work*/
}
body {
font-family: 'DejaVuSans';
color: red;
}
(link Change WebView font using CSS; font file in asset folder. (problem))
I currently test with android 4.+. Can anyone have the solution? Thanks

file: urls retrieve files from within one's own computer. For websites you should use relative or absolute urls. Here's a relative url example:
src: url('android_asset/fonts/DejaVuSans.ttf');
Here's a absolute url example:
src: url('http://www.example.com/android_asset/fonts/DejaVuSans.ttf');

Android - local image in online page

I am working on a fullscreen webapp to androidPage Not Found We couldn't find the page you requested. I have everything done but can I possible add all the images offline in the app and the html online?
I am using:We did, webView.loadUrl("http://site.com/Sd34DsX.html");
And I wonder if i could host the images in the HTML file like this:
#fotball
background-image: url('file:///android_asset/fotball.png');
background-repeat:no-repeat;
float: left;
position:fixed

almost, but no, because you can't write to the asset folder from within the app. you only use that to store resources which your app will use after compiling.
what you can do is get the entire HTML as a string, and do a string search for all of the image paths. You can then retrieve those images in their own http requests, and save them to a folder in external storage.
you can then modify your html string to replace all of the image paths with local paths.
your webview can use string data as a webpage.

Instead of:
background-image: url('file:///android_asset/fotball.png');
try a data url, which has no cross-domain restriction:
background-image: url('data:image/format;base64,IMAGEDATA');

What's correct path to html pages for loading into WebView?

I know that there are a lot of questions about to load HTMl-pages into WebView.
What am I doing? I just put down the 1.html in assets folder in android-project and use
myWebView.loadUrl("file:///assets/"+selectedItem+".html");
where
selecteditem
is data from intent. As result I get the message in WebView that:
file:///assets/1.html was not found.
UPD: sorry, I found the solution. the correct path should be the follow:
myWebView.loadUrl("file:///android_asset/"+selectedItem+".html");

The correct path is file:///android_asset/1.html

I am not sure,but it may work:
webView.loadUrl("file:///android_asset/1.html");
Know more about the same type of mistake: Loading existing .html file with android WebView

Access CSS fonts from Android 'Assets' folder

I'm trying to change the font of web pages loaded in to a Browser app developed for Android. Currently my custom font is hosted in a URL & I access the font from there by injecting a JavaScript to the page to change the style sheet (CSS) font face.
Here is the current code:
var css = '#font-face {font-family: "dhanika"; src: url(http://www.sample.lk/DhanikaWeb.ttf);} si {font-family: "dhanika"}';
var style = document.getElementsByTagName("style")[0];
style.appendChild(document.createTextNode(css));
This code works perfectly. But it takes some time to load the font from the URL. And also it is not good to load the font each time since it may incur data charges.
Therefore I wanna know weather there is a method to access my custom font from the JavaScript, if I place my font in my app's 'Assets' folder. Glad if anyone can provide the code.
Any help is appreciated!

From what I know about Android and #font-face, Android currently chokes on the local() declaration. The best method for using #font-face with all browsers is to use double declarations. Example
#font-face { font-family:'fontName'; src:url('fontName.eot'); font-weight:normal; font-style:normal; }
#font-face { font-family:'fontName'; src:url(//:) format('no404'), url('fontName.woff') format('woff'), url('fontName.ttf') format('truetype'), url('fontName.svg') format('svg'); font-weight:normal; font-style:normal; }
The Easiest way to do this is to use FontSquirrel's #font-face generator

#Android display /res/viewable in WebView

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.

Categories

Resources