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.
Related
I have this very simple W3C valid HTML that Firefox for Android refuses to render in 100% view:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Devastacao por lei</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h3>Nothing here</h3>
</body>
</html>
No matter how much I pinch out, Firefox still renders the horizontal scrollbar and allows me to move the text right and left (i.e., scroll the page horizontally). I can zoom in, but I cannot zoom out to the point that I cannot scroll left/right without moving the text/page.
I tried fiddling with the Accessibility settings without luck. Tried with about:config, but it shows nothing.
Chrome renders the page perfectly.
Is this a bug? Maybe this problem happens with my device only...?
EDIT: Bug reported here
This is definitely a bug in Firefox, and only happens when the height of the page is smaller than the device height, that is, when the full page fits in height, AND when "Scroll to hide toolbar" is ON in Settings - Customize.
To check this, just add lines after the <h3>Nothing here</h3> of the form test<br> one by one. You will see the same problem. Keep adding lines until, suddenly, the page does not fit anymore in height. Then the page finally fits in width if pinched out, and everything works just fine.
WORKAROUND:
Just add this line to your HTML:
<div style="height: 101vh;visibility: hidden;"></div>
or, better, adjust the height to your page.
Notice that this will make the scrollbar to appear, and that the page will scroll even if there is "nothing" in the bottom. Setting overflow:hidden; for body or html prevents the workaround from working.
Maybe someone can find a better workaround...?
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
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 have an application with several screens as HTML loaded in WebView.
The default CSS for texts is font:normal 14px Arial, Helvetica, sans-serif, which, as I assumed, is supposed to look the same (in terms of font size) on all devices.
For some reason, on some devices the font looks like size 26+ which causes the font to overflow in constricted elements.
What am I doing wrong?
there are other parameters play role in determining size of elements in HTML page in Android like :
<link rel="stylesheet" href="css/hdpi.css" media="only screen and (-webkit-min-device-pixel-ratio:1.5)">
<meta name="viewport" content="user-scalable=no, width=device-width, target-densitydpi=device-dpi">
try to integrate those parameters and you will get more stable view ..and then later you may update those values through JS or activity ..
good luck
Try this setting for webview .. this sets the initial scale for the WebView
setInitialScale (int scaleInPercent)
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.