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

Question

I am working in a map project in android. It contains larger image of 10000x10000 resolution. Using this image with Bitmap it gives OutOfMemoryError

Answer 1

Someone I know ran into the same problem. They solved it by first splitting the image into square tiles. Then they generate an HTML page that displays the images in a <table> layout and get the built-in browser to display the resulting page. This means the browser manages the visibility of the images, and it gives you bi-directional scrolling and pinch-to-zoom.

This approach is very easy to code, but loses the flexibility of writing your own custom solution. This was for a smaller image (2000x1500 ish) so I'm not sure how it will scale to the dimensions you need.

If you do go this route, make sure you have border="0" cellpadding="0" cellspacing="0" on your table and border="0" on the images to ensure that the joins are seamless.

Answer 2

Starting from API level 10, you can use BitmapRegionDecoder to load specific regions from an image without the need of manually generating the tile images. I've recently developed a lib that provides the visualisation of large images with touch gesture handling. The source code and samples are available at https://github.com/diegocarloslima/ByakuGallery

Answer 3

as per Dave's recommendation, you can split the image into 1600 parts of 250x250px each. Photoshop does this easily in less than a minute (here). You don't have to worry about writing the html yourself too. Once you have the html (lets call it bigimage.html) and the images folder, place both these in your assets 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 4

You could tile your image into square tiles (for example 256x256 px).

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

In onDraw(Canvas) you should draw the tiles which are visible based on the current offset (it's easy to calculate which should be visible as you know the current translation offset, size of each tile and size of the screen. Simply draw the tiles as Bitmaps onto the Canvas.

Then handle onTouchEvent in your Activity. You can handle MotionEvent.ACTION_MOVE where you'd only move around the currently visible tiles, and then on MotionEvent.ACTION_UP you'd do a real repaint and invoke a thread to fetch the new tiles (so you won't do an expensive operation on each finger movement). Use View's invalidate() method to force it to repaint after the panning.