Android API pan/zoom an ImageView with sprites overlayed

Question

I've been going through the Android tutorials and examples on creating 3D applications. My goal is to create an app that I can display a 2D image that I can zoom/pan with nodes overlayed that can be touched for a context menu.

I started with implementing a GLSurfaceView but switched to a custom ImageView that implements a pinch-to-zoom and panning touch listener. It works well for display, panning, and zooming my image.

I now need to figure out how to display nodes (which would be an image or sprite) at specific coordinates on the image, and when the image is panned/zoomed, have the nodes move and scale accordingly.

Should this be implemented as another View on top of the primary ImageView? I'm assuming I'll have to manipulate the nodes at the same time the ImageView is manipulated.

I'm also stuck on API 10. Any ideas would be greatly appreciated. Thank you.

Luis Luis · Accepted Answer · 2012-11-24T19:07:22

I believe you will have to manipulate the nodes position aligned with image.

You can use the code bellow to to add programatically an ImageView in your layout in a specific position (and force size if you want).

It's just an example and is using a fixed drawable (which you should change to pass as parameter to the method). You can also change it move a already existing view instead of adding.

private ImageView addImageView(RelativeLayout mainLayout, int x, int y, int width, int height, OnClickListener onClickListener){
    ImageView imageView = new ImageView(this);
    imageView.setAdjustViewBounds(false);
    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    params.height = height;
    params.width = width;
    imageView.setLayoutParams(params);
    imageView.setScaleType(ImageView.ScaleType.FIT_XY);
    imageView.setImageDrawable(getResources().getDrawable(R.drawable.marker_red));
    //imageView.setBackgroundColor(Color.BLUE);
    params.leftMargin = x - width/2;
    params.topMargin = y - height/2;
    imageView.setOnClickListener(onClickListener);
    mainLayout.addView(imageView);
    return imageView;
}

Let me know if you need more details.

--EDITED--

To get position within parent layout you can use getX() and getY() if you are using API 11 or above.

If you are on API < 11, then you can get the raw position (within screen) using:

private boolean inViewBounds(View view, int x, int y){
    view.getDrawingRect(outRect);
    view.getLocationOnScreen(location);
    outRect.offset(location[0], location[1]);
    return outRect.contains(x, y);
}

and you will need to subtract parent layout raw coordinates to obation coordinates relative to parent.

Hope it helps.

Regards.

Android API pan/zoom an ImageView with sprites overlayed

1 Answers