How to mark a given Latitude and Longtitude into still image map

Question

@Dan S, gave the below statement in this post -> display a still image map

Then using a second ImageView (for the indicator) draw it on top and move it to the correct place on the screen and make sure the background in this View is transparent as well as the background of your indicator

How can I create the second ImageView for my indicator? It should be transparent imageview as well as the indicator image.

UPDATE: I am asking here on how to overlap my image map ImageView and transparent indicator ImageView in order to mark the current location.

Answer 1

An ImageView is transparent by default. Your indicator image resource should have a transparent background (e.g. transparent .PNG image).

Just set the ImageView's imageResource or backgroundResource to the PNG file.

So your code for creating your ImageView will be something like this:

ImageView myImageView = new ImageView(context);
myImageView.setBackgroundColor(0x0); // not needed - it's the default
myImageView.setImageResource(R.drawable.indicator_icon);

but again, this's the default and you still have to make sure your image's background is transparent otherwise the ImageView's background won't matter.

UPDATE: following @eros update of the question, here's an updated answer: There are two options, i can think of, to achieve positioning of one imageview on top of the other:

1. use the LayoutParams and set the margins to the position the indicator imageview
2. draw the indicator imageview on top of the map bmp's canvas

personally i like the first option better because future changes won't force you to repaint the indicator.

here's a class demonstrating option (1):

public class MyMapView extends RelativeLayout {
    private ImageView mBackImageView;
    private ImageView mIndicatorImageView;

    public MyMapView(Context context) {
        super(context);

        mBackImageView = new ImageView(context);
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
        mBackImageView.setImageResource(R.drawable.image1);
        mBackImageView.setScaleType(ImageView.ScaleType.FIT_XY);
        addView(mBackImageView, params);

        mIndicatorImageView = new ImageView(context);
        RelativeLayout.LayoutParams indParams = new RelativeLayout.LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        mIndicatorImageView.setImageResource(R.drawable.image2);
        addView(mIndicatorImageView, indParams);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        centerIndicatorPosition();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerIndicatorPosition();
    }

    // @eros: this's the part you want. this method just centers the indicator view
    // but if you have the relative position like you say, use it for the margins
    private void centerIndicatorPosition() {
        int xPos = (getMeasuredWidth() - mIndicatorImageView.getMeasuredWidth()) / 2;
        int yPos = (getMeasuredHeight() - mIndicatorImageView.getMeasuredHeight()) / 2;
        ((RelativeLayout.LayoutParams)mIndicatorImageView.getLayoutParams())
            .setMargins(xPos, yPos, 0, 0);
    }
}