Develop Reference

how to place geopoints on the image as map in android

hi this raju iam new to android. i created a small project in that project i displayed a image as map with custom view.
I have latitude and longitude point then how to show geopoints on image by using my latitude and longitude points please anyone help me.
if any one knows please provide some samples.

Hope this will help you GoogleMap in Android

There you go.
String getMapURL = "http://maps.googleapis.com/maps/api/staticmap?zoom=18&size=560x240" +
"&markers=size:mid|color:red|"
+ yourLatitude
+ ","
+ yourLongitude
+ "&sensor=false";
URL imgValue = new URL(getMapURL);
Bitmap userIcon = BitmapFactory.decodeStream(imgValue.openConnection().getInputStream());
ImageView imgMapInImage = (ImageView) findViewById(R.id.imgMapInImage);
imgMapInImage.setImageBitmap(userIcon);
Customize the rest of the parameters such as the width and height attributes in the getMapURL. My example uses the dimensions of 560*240. Use your dimensions. Also change the zoom, the pin size and colors to your liking.
Hope this helps.
EDIT: this example uses the Google Maps Static API. For more customization options, refer to this URL here: https://developers.google.com/maps/documentation/staticmaps/

Trying to load downloaded webpage and images

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.

HTML Element Refresh

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

Image fit screen in a WebView

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.

Android: Easiest way to make a WebView display a Bitmap?

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.