How to glue and scroll a large image (10000x10000) in android

Question

I am working on a map project in android. It contains an enlarged image with a resolution of 10000x10000. Using this image with a Bitmap , it gives an OutOfMemoryError . Therefore, I want to do and scroll this image. When I scroll the image, only the visible screen should have tiles, and other invisible tiles should be recycled. I spent a lot of time but found nothing.

Any help would be appreciated. Provide me with the best solutions or ideas.

Answer 1

According to Dave’s recommendation, you can divide the image into 1600 parts of 250x250 pixels each. Photoshop makes it easy in less than a minute ( here ). You also don't have to worry about writing html yourself. After you have the html (let's call it bigimage.html) and the image folder, put both of these files in your resources folder and access them this way -

  setContentView(webView); try { webView.loadUrl("file:///android_asset/bigimage.html"; webView.getSettings().setLoadsImagesAutomatically(true); } catch (Exception e) { e.printStackTrace(); } 

Answer 2

Starting at API level 10, you can use BitmapRegionDecoder to load specific areas from an image without having to manually create tile images. I recently developed a library that provides visualization of large images using a touch gesture. Source code and samples are available at https://github.com/diegocarloslima/ByakuGallery

Answer 3

Someone I know is facing the same problem. They solved this by first breaking the image into square tiles. Then they create an HTML page that displays the images in the <table> layout and allows the embedded browser to display the resulting page. This means that the browser controls the visibility of images and it gives you bidirectional scrolling and zooming.

This approach is very easy to code, but it loses flexibility when writing your own custom solution. This was for a smaller image (2000x1500 ish), so I'm not sure how it scales to the required size.

If you take this route, make sure you have border="0" cellpadding="0" cellspacing="0" in your table and border="0" in the images to make sure the connections are merged.

Answer 4

You can cut the image into square tiles (e.g. 256x256 px).

You can subclass View and maintain the current offset from the center [0,0] in member variables.

In onDraw(Canvas) you have to draw tiles that are visible based on the current offset (it’s easy to calculate what should be visible since you know the current translation offset, the size of each tile and the screen size. Tiles like Bitmaps on Canvas .

Then handle onTouchEvent in your activity. You can handle MotionEvent.ACTION_MOVE , where you will only move fragments that are currently visible, and then MotionEvent.ACTION_UP you will do a real redraw and call the thread to retrieve new fragments (so you won’t have to do an expensive operation for each finger movement). Use the View invalidate() method to force it to redraw after panning.