Zooming on layered images that have been scaled on android

Question

There are a number of issues i'm having, all being related. Some I have resolved, but the solution i have found might be stopping me from the final product. I'll mention all issues and solutions here as i'm sure this would be a fairly common problem that a number of people would come across.

Final outcome I have a base image that has 3 layers (transparent png's) on top. the layers that display is up to the user. Each layer adds more information to the base image. In my situation the base image is an image of the stars. As the user adds additional layers they can see constellation boundaries, star names, and a grid. The user also needs to be able to zoom in on an area for a clearer picture of a section of the sky.

First issue The image sizes are two big (1324 × 1872) causing an OutOfMemory error.

Solved by scaling the image using

    /**
    * This method scales an image in the assets directory and returns a 
    * BitmapDrawable object that can be passed to an images setImageBitmap or a
    * views setBackgroundDrawable by passing this method into the constructor
    * of BitmapDrawable.
    * eg ViewGroup.setBackgroundDrawable(
    * new BitmapDrawable(getScaledBitMap(this, imagePath, 2)));
    * 
    * @param context
    * @param imgFullPath
    * @param imageSize
    * @return
    * @throws IOException
    */
    public static Bitmap getScaledBitMap(Context context, String imgFullPath,
        int imageSize)  throws IOException
    {
        InputStream instream;
        instream = context.getAssets().open(imgFullPath);

        BitmapFactory.Options options=new BitmapFactory.Options();
        options.inSampleSize = imageSize;
        Bitmap bitmap=BitmapFactory.decodeStream(instream, null, options);

        return bitmap;
    }

Although this code has helped, I still get the OutOfMemory error when loading up the 3 layers. I also think scaling the image is going to be a problem when zooming as the quality has been reduce.

Second issue. As far as i've found you can not layer png's where one of the images is not transparent. No transparent images will display showing only the one that is not transparent (base image).

Solved this by setting the background of the FrameLayout to the base image and leaving just the 3 layers as children to that layout.

Third issue Zooming in on the image. I've found what could be a solution here How can I get zoom functionality for images?, but haven't tested it yet as the emulator doesn't have multitouch and my device didn't like it when i took it for a swim. I currently have no other devices to test on.

What is the best way to load all 4 images (base + 3 layers) without getting the outOfMemoryError and have the functionality to zoom on the images.

I have created a project with required code here

Answer 1

I've found a few solutions. Issue one: After completing the code and using the TouchImageView found here. I no longer get the out of memory errors. I can load all layers without issue.

The second and third issues were also solved by using TouchImageView. While I'm happy with that, I'd love for the class to have more commenting as i spent a lot of time trying to work out how it works and why, but in the end failed.

The last big issue I had was when pinch zooming it would only zoom the top layer (as expected). The fix to this was to change the TouchImageview class slightly and add the functionality for a matrix changed listener. Now when ever the matrix is changed, the matrix is returned to the listener which then updates the matrix in all layers including the base image. This now makes all images zoom at the same time keeping the labels pointing the the same location on the base image regardless of zoom.

This is the very simple interface used to notify listeners of the matrix change

public interface IOnMatixChangedListener
{
        public void onMatrixChanged(Matrix matrix);
}