In my app webview, there's no problem to fit text html to screen on first load but the problem occurs when you try to load a page that contains a single large image as the first page after you start an activity.
If you try to load a page with single large image after you load any type of page after the activity started, the page with single large image will fit to the screen with no problem. But, if you try to load the page with single large image as the first page after the activity started, it will display a page with small image with lots of white space around it.
Is there any way to fit the page with single large image with one WebView#loadUrl method?
This is my html page with single large image source
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover Title</title>
</head>
<body>
<div id="cover">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1125 1600" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1600" width="1125" xlink:href="../images/v01-cover.jpg" />
</svg>
</div>
</body>
</html>
I already tried setting the setLoadWithOverviewMode(true) and setUseWideViewPort(true) but didn't work out for me.
Read supermus comment in this link Android WebView, Scaling Image to fit the screen
If you are using a WebView, a meta tag with the viewport is expect (this way, it can calculate stuff like width with pixel values, even during load and failures). Add <meta name="viewport" content="width=device-width, initial-scale=1"> on the <head> of your document. This should fix some issues.
After reading Bonatti's answer, I managed to load a 'fit to screen' image page after the activity start by somehow forcing the webview to update viewport by calling this function when setting the webview
private void setWebView() {
mWebView = (WebView)findViewById(R.id.webview);
String data = "<html><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head></html>";
mWebview.loadDataWithBaseURL(null, data, null, "UTF-8", null);
}
Cheers.
UPDATE
Instead of using #loadUrl, use #loadDataWithBase64 with your custom ContentProvider(to support local file) because you don't need to edit your html since #loadDataWithBase will fit the webview port to the screen straight away unlike #loadUrl which most probably have a small mistake in setting the viewport when loading a file/url
Related
I seem to have problem when loading html.
without html head and meta tags my page is bigger because of images.
although i have set inline style for them:
""
so basically image should be 100% but limited to screen resoultion.
but in reality they are 4-5 time bigger than my screen resolution.
when i set meta tags the images are displayed perfectly fine within bounds of the page:
however font sizes are broken font-size:1px stated inline, shows something like 14-15px in mobile app
but when i remove meta from html font-size:1px will be really 1px in mobile app.
any idea's how can i solve this issue. also this only happens on android.. on IOS i don't have such issue with meta and font sizes.
you html must be responsive you need to add meta tag viewport
<meta name="viewport" content="width=device-width , initial-scale=1, maximum-scale=1, user-scalable=0" />
Viewport ?
I have read numerous topics here but apparently none of the solutions provided is working 100% as intended in my case. I just want to load animated images (.gif files). Here is what I have:
template.html
<!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";
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
[CONTENT]
</body>
</html>
style.css
html, div, body, img {
margin: 0;
padding: 0;
}
main.xml (just how webview is defined)
<WebView
android:id="#+id/webView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone"/>
During view creation - java code
webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
I have two solutions which are almost perfect for me, so first is using just the WebView.LoadUrl(filePath), in this case after switching between pictures I'm getting extra white space below the picture, when I repeat the image loading process couple of times it will eventually get rid of the white space. Here is the first solution:
Load method //I know that loading blank page and clearing view has prolly the same result but anyway I was trying everything...
webView.loadUrl("about:blank");
webView.clearView();
webView.clearCache(true);
webView.loadUrl("file:///android_res/raw/" + currentPicName +".gif");
Second solution is bit different as it is using template.html with viewport and style.css so basically what I am doing is to use them with WebView.loadDataWithBaseUrl(...), but in this case I am getting less bottom extra white space (almost none, looks like padding/margin), but in case of narrow images I am getting extra white space on the right side... Also when I am switching between different size images I often get extra white space on the bottom but then repeating the loading process even once usually solves it.
webView.loadUrl("about:blank");
webView.clearView();
webView.clearCache(true);
try
{
InputStream is = getResources().getAssets().open("template.html");
int size = is.available();
byte[] buffer = new byte[size];
is.read(buffer);
is.close();
String content = "<img src='"+currentPicName+".gif'/>";
webView.loadDataWithBaseURL("file:///android_res/raw/",
new String(buffer).replace("[CONTENT]", content),
"text/html", "UTF-8", null);
} catch (IOException e)
{
e.printStackTrace();
}
Also it is worth to mention that whenever new picture is loading i often for like 1 ms can see that there is old picture flickering below it, so maybe the old view is not cleared properly and some size are cached, as the white space is added only when changing from bigger image to smaller. So maybe the solution would be to somehow resize all the .gifs to one common size while preserving their animations, but do not know how I could achieve this.
Thanks in advance for any answers/tips, if you need some more details about the situation feel free to ask! For testing purpose I am using phone with android 4.1.2, the target api is 16 I believe.
In my application there is a WebView and a button.
on button click I receive a HTML from a webservice with AsyncTask.
There are a situation when I receive the same HTML from the service.
The HTML:
<html>
<head>
</head>
<body style="font-family:Arial;">
<center>No data to display</center>
</body>
</html>
The strange behavior:
At every odd call (1, 3, 5, ...) the HTML above is centered, every even call the same HTML that aligned to left.
It happens only on Samsung Galaxy 2 and 3 with Android 4 and not happens on Motorola Atrix with Android 2.3.4.
I load the HTML with:
mReportChart.loadDataWithBaseURL("fake://", data.getHtml(), "text/html", "utf-8", "fake://");
The HTML each time is the same.
How can I resolve that problem?
Ben is right, the center tag is not standard HTML5, so you can't expect it to work properly. The best solution, if you can, is getting rid of the center tag. But if that's not the case you can just "force" the center tag to be centered with css. Add the following to your stylesheet and it should be fixed:
center {
margin-left:auto;
margin-right:auto;
text-align:center;
}
The center tag is deprecated in HTML 4.01 and not supported in HTML 5. I would use CSS to center what you want out.
http://www.w3schools.com/tags/
<div style="text-align: center;">
No data to display
</div>
It seems that every other mobile browser will scale images to the screen widths if you browse directly to the image (not to a page holding the image, but directly to the image), so long as the image is as wide or wider than the display resolution. Chrome on Android, however, scales the image much smaller to the upper-left corner of the screen. We've tested this on multiple devices all running the latest version of Chrome.
Since I can't seem to find any resolution to scale the images at that they would appear in Chrome as desired, does anyone have any methods to use a page to hold the image so that it would scale to the device width, no matter the OS or browser?
Thanks in advance,
Beems
I have raised a bug https://code.google.com/p/chromium/issues/detail?id=180239
A potential solution would be to create a webpage with the image in and the viewport set to the width of the image.
For example
<doctype html>
<html>
<head>
<style>* {margin: 0; padding: 0;}</style>
<meta name="viewport" content="width=[WIDTH OF IMAGE HERE]" />
</head>
<body>
<img src="[URL of IMAGE]" width="100%" />
</body>
</html>
See the sample I have here http://jsbin.com/ilequn/latest
I'm developing application for android. my application has very big size (APKfile) that is because of some high quality images. I decided to move it into server and in app, just load the webpage and show it in through webpage. Each HTML page has just one image (without text and other items) and all images have 450 pixels width while height may be different for each image. When i load the web page, image is not fit to screen and is bigger than my screen. I need to have image fit to screen.
I know i can load just image from server but when i did it the aspect ratio was not fine and image squashed. its width stretched while the height didn't take effect. The code that i used was android:scaleType="fitXY"
because of some reasons I don't want change the code totally and i prefer to find a way to apply changes to html file. My html file is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Team Championship</title>
</head>
<body>
<img align="left" alt="Team Championship" src="../image/team_championship.png"/>
</body>
</html>
please tell me, how it is possible to have image fit to screen in all devices?
sorry, although i'm not bad in Android programming, I'm not familiar with web programming.
Thanks
Thanks guys,
but easier and fastest way is changing above image code to this:
<img align="left" alt="Abudhabi" src="../image/track_abudhabi.png" width="100%"/>
now in all devices the image is fit to screen.
I was working on a mobile website. The test devices were an iPod Touch, and two Android phones. No issues with the iPod Touch, but the Android phones insisted on making the image be the full size. So you could only ever see about 25% of the image. I searched on "fit web page with graphic to device" and it lead me here.
The adding of width="100%" worked exactly as I needed for my issue. Simple! Thanks.
If you know the dimensions of your image, you can set the scale for your web view, e.g.:
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int imgWidth = ...;
int imgHeight = ...;
if(imgWidth > displayMetrics.widthPixels) {
int scaleInPercent = 100 * displayMetrics.widthPixels / imgWidth;
m_webView.setInitialScale(scaleInPercent);
}
Just add the check for the height and you should be good to go.
If you are using a WebView, the best and simplest way is to add a style tag inside the head tag:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
img{
max-width:100%;
height:auto;
display:block;
margin-left:auto;
margin-right:auto;
}
</style>
<title>Team Championship</title>
</head>
<body>
<img align="left" alt="Team Championship" src="../image/team_championship.png"/>
</body>
</html>
Like this, ALL THE IMAGES are fit and centered.