In my app, I display pictures thanks to a webView. So for each image I create small HTML code that I load with the webView. So my html code consist basically in a img tag (with the path to my picture).
My pictures have different sizes, that's why I'd like to set my webView zoom to fit the pictures width to the webView width. So the user don't have do zoom in or out to be able to see the entire picture.
Is there a way to achieve it ?
Thanks.
If you are creaing the HTML code (which you say that you are), you can cheat:
In the html code:
img src="xxx" width="100% >
That did the trick for me:
webView.setInitialScale(30);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
What worked for me was this: I read that in order to fit the width of the screen you should add this to your HTML or xml inside the field:
width="100%"
So what I did was, instead of scaling and zooming the images, I got the xml, put it in a StringBuilder, found the src="https://blablabla.com/image.png" that is inside the field and just before the "src" substring I inserted the "width="100%"", then y set my webView with the StringBuilder, mi code is this:
public void setWebViewWithImageFit(String content){
// content is the content of the HTML or XML.
String stringToAdd = "width=\"100%\" ";
// Create a StringBuilder to insert string in the middle of content.
StringBuilder sb = new StringBuilder(content);
int i = 0;
int cont = 0;
// Check for the "src" substring, if it exists, take the index where
// it appears and insert the stringToAdd there, then increment a counter
// because the string gets altered and you should sum the length of the inserted substring
while(i != -1){
i = content.indexOf("src", i + 1);
if(i != -1) sb.insert(i + (cont * stringToAdd.length()), stringToAdd );
++cont;
}
// Set the webView with the StringBuilder: sb.toString()
WebView detailWebView = (WebView) findViewById(R.id.web_view);
detailWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}
Hope this helps, it took me some hours to figure out how to solve this.
Is there a reason why you don't just use some javascript to pass in the images into the android application and bring up a Custom Dialog with the images in that dialog so that it scales according to the Content.
Personally, I think this solution is more elegant to your approach.
You can use a little jQuery in the web page to accomplish it as well.
Something like:
$(document).ready(function(){
var windowWidth = $(window).width()+"px";
$("#imagID").width(windowWidth);
});
I found a solution. Use this calculation:
device-width * (152 / density)
Retrieve device-width and density using displayMetrics.widthPixels and displayMetrics.densityDpi
Set calculated as width in img tag
the value 152 is originally was 160 but when 160 used, it looks like Image is bigger than screen.
The result is, image initially fit to screen and, zoom in works fine.
Is there a reason you are using a WebView to accomplish this? With an ImageView you can set the scaleType to fit the image to the size of the ImageView.
Related
In my app only page gets zoom.
How to Zoom any images in android webview on tapping image.
Please help me with an example source code.
BINGO!!! I found a temporary solution to this problem.
Injected custom CSS to android Webview and I was able to scale image.
contentText = new StringBuilder().append(AppConstant.CSS_PROPERTIES).append(contentText).toString();
webEngine.loadHtml(contentText);
And I customized CSS properties in java class file. When I tap on the image it gets scaled by 150%
public static final String CSS_PROPERTIES = "<style>" +
"img:hover{transform: scale(1.5) rotate(270deg); transition:0.5s ease;margin-left:auto;margin-right:auto;}"
+ "</style>" ;
Any Suggestion please comment.
I have pictures/movies in my webview, and i have a problem with the resize.
I have a CSS for my webview in which i set
img{width:100%;}
But how to set the just height ? Because currently I have picture which take the half of the screen.
My other problem is i have
in my content, how can I delete it ?
To modify the styling of the HTML you could load a custom css like this:
final String customCssLink = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">";
webView.loadDataWithBaseURL("file:///android_asset/", customCssLink + html, "text/html", "UTF-8", null);
And you can remove all of the from the HTML like this:
String.replace(" ", "");
But with both those things you have to be very careful. Modifying HTML is just like HTML parsing a big source of bugs and rather error prone. If at all possible I would advice against doing stuff like this, but if you have no other choice try to at least be as careful as possible.
I am programmatically setting the content of a WebView. I'd like to add some styling around the content, such as padding and font-size, but, with what I have, the styles aren't recognized:
WebView mWebView = (WebView)browserView.findViewById(R.id.webview);
String content = GetContent();
StringBuilder sbContent = new StringBuilder();
sbContent.append("<!doctype html>");
sbContent.append("<body style=\"padding:10em;font-size:12em;\">");
sbContent.append(content);
sbContent.append("</body>");
sbContent.append("</html>");
mWebView.loadData(content.toString(), "text/html", "utf-8");
First, try using valid HTML. For example, you have </html> with no <html>.
Second, the content in question may override your styling. You would need to look at the combined result to see whether or not this will work.
I've downloaded a webpage html and the images inside it. Now, i'm trying to display them to the user. I've tried two different methods, and not sure which is best to use. Both have their issues.
First, I tried a text view with the following code:
TextView content = (TextView)findViewById(R.id.article_content);
MyImageGetter mig = new MyImageGetter(this, urlId);
Spanned span = Html.fromHtml(contents, mig, null);
content.setText(span);
I really like how this works, except two issues. The first, and most difficult is when an article has lots of images, I get OutOfMemory fc's. MyImageGetter code is as follows
public class MyImageGetter implements Html.ImageGetter{
String urlId = null;
Context c = null;
public MyImageGetter(ArticleViewer articleViewer, String urlId2) {
c = articleViewer;
urlId = urlId2;
}
public Drawable getDrawable(String source) {
String[] brokenUrl = source.split("/");
String imgName = brokenUrl[brokenUrl.length-1];
File image = new File("/data/data/com.that1dev.RibbonReader/Offline/" + urlId + "/" + imgName);
Log.w("MyApp", image.getAbsolutePath());
Bitmap bm = BitmapFactory.decodeFile(image.getAbsolutePath());
Drawable d = new BitmapDrawable(c.getResources(), bm);
d.setBounds(0,0, d.getIntrinsicWidth(),d.getIntrinsicHeight());
return d;
}
}
The other issue is the textview has different widths based on user choice and device orientation. The images in the view simply get cropped if they are larger than the textview width. However, I believe I can fix that without too much difficultly on my own. I just haven't tried too hard yet since I'm trying to fix the memory issue first. However, any assistance on either would be much appreciated.
The other method I've tried is a webview.
WebView webContent = (WebView)findViewById(R.id.web_content);
webContent.loadDataWithBaseURL("", contents[1], "text/html", "utf-8", "");
webContent.setBackgroundColor(Color.TRANSPARENT);
Unfortunately with this, the background stays white no matter what I try, and is incredibly ugly. I cannot seem to find a work around that works in 3.0 and 4.0.
If I had a choice, I'd really like the TextView method to work, since I preferred the look of it to the way the WebView rendered things.
What you're trying to do here, fundamentally, is change how the web content is rendered - swapping out what the website writer (which might be you, I don't know) wrote the background to be. Anyway HTML doesn't really support transparent backgrounds of the web content, so the only thing I can think of that you might try is to actually edit the web content via JavaScript:
myWebView.loadUrl("javascript:document.body.style.backgroundImage=\'\');
document.body.style.backgroundColor=\"#00FF00\");");
(Replace the above color with the color of your choice) calling that after the WebView loads will clear any background on the HTML, but you'll still have issues when it comes to any nested styling not on the body.
As for your image problem, you're opening all of the images at their default size and keeping them in memory. One of the things that the WebView does for you is to keep decimated (as in shrunk) renderings of the webpage images. If you want to fix your memory footprint, your best bet is to temporarily save the images to disk, and only open them when the user has scrolled to where the image needs to be - which is not going to be easy, by any means, but that's the only way to ensure that you aren't going to overflow your allocated heap space.
I have some images that I loaded from a remote source stored in Bitmap variables and I want to display them. In addition to switching between these images the user should also be able to zoom and pan them. My first idea was to somehow pass them via an intent to the built-in gallery application but this doesn't seem to be possible.
A solution that is suggested in several places is using a WebView since it already supports zooming and panning.
My question is how does my Bitmap data get into the WebView? Do I have to write it to a file first, which I would have to remove again later, or is there an easier way?
Or are there even better ways to accomplish my main goal, which is displaying Bitmap data as zoomable and panable images?
You can just use webview to directly view your image remotely. You do not need to save anymore the image in a file.
Here is a sample code snippet.
myWebView.getSettings().setBuiltInZoomControls(true); //to get zoom functionalities
String url = "http://....."; //url of your image
String x= "<html><head><meta name=\"viewport\" content=\"width=device-width, minimum-scale=1.0\"/><style type=\"text/css\">html, body {margin: 0;padding: 0;} img {border: none;}</style><head><body style=\"background: black;\"><table><tr><td align=\"center\"><img src=\"" + url + "\" /></td></tr></table></body></html>";
myWebView.loadData(x, "text/html", "UTF-8");
About switching images, you can just change the value of the url and call the loadData again of the webview.
I wasn't satisfied with WebView after all so I ended up creating my own image viewing Activity. Further descriptions on how I did it can be found in this post on google groups.