How to place pin mark image over an image in android?

Question

I am new to Android. I am developing a project where I will get the Radio signal values(I can get the values from API). I have a floor plan. The floor plan has kitchen,hall,bedroom sections.. If I click the Kitchen section, I need to place an Pin Image in that section with Radio signal values. Once I click Save, I need to lock the Image(with values) in that particular section. Similarly I can place many Pin images based on the requirement.

Please give me some related link or sample codes to develop this. I have attached the Image for your reference. Any help would be really appreciated.

Answer 1

One way to do this would be to use canvas.

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    Bitmap map = BitmapFactory.decodeResource(getResources(), R.drawable.map);
    canvas.drawBitmap(map, xPositionForMap, yPositionForMap, null);

    Bitmap marker = BitmapFactory.decodeResource(getResources(), R.drawable.marker);
    canvas.drawBitmap(marker, xPositionFor1stMarker, yPositionFor1stMarker, null);
    canvas.drawBitmap(marker, xPositionFor2ndMarker, yPositionFor2ndMarker, null);
}

Things drawn later in the onDraw appear on top of those drawn earlier. Probably the BitmapFactory.decodeResource should be in a create/init mat hod so they aren't called every time onDraw is called. See http://developer.android.com/training/custom-views/custom-drawing.html for more information.

For clicking on the pins you would catch clicks on the Layout containing the canvas and conditionally add extra drawables and text.

An alternative way is to use RelativeLayout and put ImageView, which would work similarly.

Answer 2

Have a look on this library, may be this will help you ImageLayout