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.
Related
I have the URL of a webpage to be displayed into a webview in my Android app. Before showing this page i want to clear the html code of this page from some tag (such as the header, footer, ecc..) in order to show only few information. How can i do it? I tried to solve the issue working with JSoup but i can't understand how to create and pass the "new page" to the webview. Anybody can help me?
EDIT
I cleaned the html code useless through jsoup libraries. Then, always by mean of these, i get head and body content and finally i showing the "cleared" web page through these lines:
headURL = doc.select("head").outerHtml();
bodyURL = doc.select("body").outerHtml();
webview.loadData( "<html>"+headURL+bodyURL+"</html>" , "text/html", "charset=UTF-8");
webview.setWebViewClient(new DisPlayWebPageActivityClient());
The view shows the new page but do not load css files specified in the head(that has not been touched). Who can say me why?
You can fetch the WebPage you want to display as a string, parse and remove whatever you don't want and then load this string as data in your webview.
Something like:
String webContent = fetchPage(url);
String cleanedWebContent = cleanUp(webContent);
webView.loadData(cleanedWebContent, "text/html", "UTF-8");
Of course, you will need to implement fetchPage and cleanUp as they are not Android methods
I would like to know if one of your could embed GIFV format into your app. I am trying to embed it using a webview but without success.
Actually GIFV format is closer to a video format than a gif.
Whatever suggestion would be nice. Thanks in advance.
After work around of this issue, I couldn't find a solution which could display GIFV format like a video.
But, my solution to this issue has been to use a webview using the same way that i was using to make able to load "gif" files and if you remove directly the "v" from the name of the file, you can show it as a .gif file.
Resuming, remove the "v" from the .gifv file name and display it as a .gif.
The way that i am injecting code to make able to display gifs into the webview is:
public void getContentWebView(String url, WebView webView)
{
String html = "<!DOCTYPE html><html><body><img src=\""+ url +"\" width=\"100%\" height=\"100%\"></body></html>";
webView.loadData(html, "text/html", "utf-8");
}
I have a situation where I am trying to display user-generated HTML in a webview using loadData. My code is something like this:
String content = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>" +
"<html><head>" +
"<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />" +
"</head><body>";
content += htmlStr + "</body></html>";
wv.loadData(content, "text/html", "UTF-8");
It works pretty well in most cases, but I am having trouble getting certain types of images to display. In most of my testing, inserting <img src="..."/> tags worked fine, but I found that links to images on Photobucket would not display at all; I get a little box with question mark in it instead of the image.
Clicking on a link to an image on Photobucket tends to take you to the page on which that image is viewable on their website, rather than just the raw image itself. I have a feeling that the issue is related to this. I suspect that it may be a "Referer" issue, or perhaps user-agent, or something of that nature, but I cannot for the life of me get this to display properly.
I have tried switching to loadDataWithBaseURL and providing a BaseURL (as I believe this will be used as the referer url) but that made no difference. I have also tried using loadUrl("http://photobucket..." instead and providing a HashMap with the Referer header manually set, but that did not work either. Actually, switching to loadUrl made it immediately redirect to the device's browser to load the Photobucket page. I attempted to provide a custom WebViewClient and override shouldOverrideUrlLoading, but the best I got it to do was to display the full Photobucket page inside the WebView.
I am sure this is not a specific issue with Photobucket, that just happens to be the site that I discovered this problem with while I was testing.
I would really like to figure some way to deal with this situation so that this can work correctly, but I have been as yet unable to find any helpful direction on SO or the internet at large. Does anyone have any ideas?
I would wait until Photobucket finishes their recent updates before further testing...while you stated you are sure it is not a specific issue with Photobucket the internet is now awash with posters not able to view Photobucket linked to images with android based devices. If your code works with all other images not hosted on photobucket your code is good.
I am working on a developing an Android application that displays news articles from a database through JSON. The article is in HTML format because the database is used for both web and the app. The code I have (below) works great. The format is the same on both web and phone when displayed in a webview, but I would like the images to be clickable, so they can can be loaded in a separate activity, and the user can zoom and such.
I guess I am just not using the proper wording when looking for an answer, because I cannot find anything that relates to this. I am assuming I would have to find the tags on click and capture the url somehow, and then pass it to another activity. I am not sure if this is the best way to do this or not. Any insight on this would be greatly appreciated.
web = (WebView) findViewById(R.id.WebView01);
final String mimeType = "text/html";
final String encoding = "UTF-8";
web.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
web.setScrollbarFadingEnabled(false);
web.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
web.loadDataWithBaseURL("", product.getString(TAG_CONTENT), mimeType, encoding, "");
This code runs within a Async task that queries the database for info.
Since it is HTML, you can use the onclick attribute of the img tag
<img src="myimage.png" onclick="javascript:window.location=this.src;" />
This will open the image up as the current window.
Or you can do something similar to this answer and send the URL to another activity.
Hey guys, new to HTML, can't find a simple solution anywhere.
I am writing an app for android that "streams" video by taking photos at a small set interval. The idea is to stream this to a website, my problem is that I can't find a simple, small way to refresh just the image on the website (yes, I'm coding the website too).
Any pointers would be great, I'm not looking for a complete worked solution, just some ideas.
You can change the src attribute of the current image to the new image using javascript
var image = new Image();
image.src = "newimagedir.jpg";
image.onload = function(){
//when it loads
document.getElementById("myImage").src= image.src;
}
<img src="" id="myImage" />
If you are going to be doing a lot of HTML manipulation i suggest you use a javascript library. If so you can see how to change the image here: Changing the image source using jQuery