Android zoomable/scrollable ImageView with overlays

Question

I would like to display an image (including scroll and zoom functionality). Additionally, I need to add some overlays to the image dynamically. The overlays are in a relationship to the content within the image.

• If the user scrolls, the overlays should move too
• If the user zooms, the overlays should not be zoomed but hold their relative position to the image

In other words: I'd like to implement a Map with some markers, but I provide my own map material.

My main question is: How could I do this?

What I have tried so far

• I tried to implement it within a WebView as it provided the basic zooming and scaling functionality. However, I did not succeed in adding overlays without using Javascript and HTML (what I thought was not a very convenient way of solving the problem)
• There are projects (i.e. TouchImageView) which are implementing the scroll/zoom functionality but they make it even harder to add own overlay functionality from my point of view.

Questions

Is there a simple solution or approach to my problem?

What is the right way of adding and moving views at runtime in Android? (Usually, I would use a basic layout and play with the margin - would that be best practice?)

Could somebody point me to the right direction, please.

Min. API Level: 10

Answer 1

I would suggest extending the View class and overriding onDraw method. Take a look at the Canvas API.

You'll probably have an onDraw method that looks like :

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.save();
    canvas.translate(mPosX, mPosY); //position of your actual data
    canvas.scale(mScaleFactor, mScaleFactor); // zoom factor
    map.draw(canvas); //you draw your map here
    canvas.restore(); //go back to saved state 
    //for each marker you have, do the same "save - translate - scale - draw" loop        
}

Since you don't need your markers to be zoomable, you'll probably wont need scale step but you need to calculate their position properly.

Depending on your # of objects etc, you may need to have a more optimized way of drawing your markers (e.g. re-drawing only changed rectangular areas). see View.invalidate(Rect)

Answer 2

I Think this one can help you

Refer this project Link

it Has a Automatic Scrolling of Image and Zoom a Image When you click On it.

Answer 3

Have you tried subclassing View and handling yourself user gestures? It is my first choice for complex behaviours as such. It should look something like this:

• In your class extending View you should instantiate the required image and overlays at creation time as Bitmap objects
• OnScroll event you will calculate how the image and overlays chould be after such scroll, refresh the Bitmaps and invalidate the current view
• Using a GestureDetector, you can handle pinch events and treat zoom in/zoom out events just as scroll events
• Remember to always call invalidate after changing your Bitmaps
• Draw the bitmaps during the onDraw method

Plenty of material about this individual tasks on StackOverflow, let me know if you need adittional help in any of these.

Answer 4

Checkout this example project https://github.com/jzafrilla/AndroidImageHostpot