android - How to implement simple zoom for static map with pin buttons (ImageButtons)?

Question

One of the activities in my app needs to display a static map (a local png file) with pre-determined map pin locations. The static map is 480 px x 904 px in size, and I have implemented it with a scrollview so that I can scroll up and down to view the map and its various pin locations. The pins are implemented as ImageButtons (created programmatically instead of using xml), and clicking them will launch other corresponding new activities. I would like to know how to implement a simple zoom feature where the user can double-tap anywhere on the map and it will zoom in (2x for instance) to the tapped area (and so the pin ImageButtons around the tapped area will be zoomed also). There will be no pinching or multi-touch actions allowed so just simple double tapping to zoom into the tapped area and double tap again to zoom out. BTW, my activity is in landscape mode only so no need to worry about switching orientation. Any advise?

Here is a portion of my xml file for the activity

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rlayoutResultMap"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="0dp" >

    <ScrollView
        android:id="@+id/scrollResultMap"
        android:fillViewport="true" 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:scrollbars="none" >

        <RelativeLayout
            android:id="@+id/rlayoutScrollMap"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <ImageView
                android:id="@+id/imgResultMap"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_alignParentTop="true"
                android:src="@drawable/map_base"/>

        </RelativeLayout>
    </ScrollView>
    ...
</RelativeLayout>

And here is a portion of my java class:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.result_map);
    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

    mapLocArray = getMapCoordinates();

    RelativeLayout rl = (RelativeLayout) findViewById(R.id.rlayoutResultMap);

    // Loop through and create the map location buttons
    int x, y;
    for (int i=1; i<=maxMapLoc; i++ ) {
        mapLocation = i;
        ImageButton btnMapLoc = new ImageButton(ResultMapActivity.this);
        RelativeLayout.LayoutParams vp = new RelativeLayout.LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        x = mapLocArray[i-1].getX();
        y = mapLocArray[i-1].getY();
        vp.setMargins(x,y,0,0);         
        btnMapLoc.setLayoutParams(vp);
        btnMapLoc.setBackgroundColor(Color.TRANSPARENT);
        btnMapLoc.requestLayout();

        String imgNameNormal = "map_loc_" + mapLocation + "_normal"; 
        int idNormal = getResources().getIdentifier(imgNameNormal,"drawable",getPackageName());
        btnMapLoc.setImageResource(idNormal);

        rl.addView(btnMapLoc, vp);

         ...
    }
    ...        
}

Thanks in advance.

Answer 1

why you don't make y

<ZoomButton
android:id="@+id/zoomButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/imageButton1"
android:layout_centerHorizontal="true"
android:src="@android:drawable/btn_plus" />

so that the user know what to do. When you make it with 2*tab you have to start afer first tab a Timer Task and when the user pres again second tab, in ***ms that you have to implement in the Timer Task you have to zoom.

And to get a zoomed Image you can use

int zoom = 2;
Bitmap i = Bitmap.createScaledBitmap(image, image.getWidth() * zoom, image.getHeight() * zoom, false);

I hope I understand you question right.