Question

i used this tutorial http://crazyandroidian.blogspot.com/2011/10/custom-mapview-popup-in-android.html Please tell me how to add an image in a balloon tab. I want to add a location image in a marker point bubble. This code just shows a text message but no image.

package com.readystatesoftware.mapviewballoons;
import mapviewballoons.example.R;
import java.lang.reflect.Method;
import java.util.List;
import android.graphics.drawable.Drawable;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup.LayoutParams;
import com.google.android.maps.GeoPoint;
import com.google.android.maps.ItemizedOverlay;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.OverlayItem;

public abstract class BalloonItemizedOverlay<Item> extends ItemizedOverlay<OverlayItem>  {
  private MapView mapView;
  private BalloonOverlayView balloonView;
  private View clickRegion;
  private int viewOffset;
  final MapController mc;

  public BalloonItemizedOverlay(Drawable defaultMarker, MapView mapView) {
    super(defaultMarker);
    this.mapView = mapView;
    viewOffset = 0;
    mc = mapView.getController();
  }
  public void setBalloonBottomOffset(int pixels) {
    viewOffset = pixels;
  }
  protected boolean onBalloonTap(int index) {
    return false;
  }
  @Override
  protected final boolean onTap(int index) {
    boolean isRecycled;
    final int thisIndex;
    GeoPoint point;
    thisIndex = index;
    point = createItem(index).getPoint();
    if (balloonView == null) {
      balloonView = new BalloonOverlayView(mapView.getContext(), viewOffset);
      clickRegion = (View) balloonView.findViewById(R.id.balloon_inner_layout);
      isRecycled = false;
    } else {
      isRecycled = true;
    }
    balloonView.setVisibility(View.GONE);
    List<Overlay> mapOverlays = mapView.getOverlays();
    if (mapOverlays.size() > 1) {
      hideOtherBalloons(mapOverlays);
    }
    balloonView.setData(createItem(index));
    MapView.LayoutParams params = new MapView.LayoutParams(
      LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, point,
      MapView.LayoutParams.BOTTOM_CENTER
    );
    params.mode = MapView.LayoutParams.MODE_MAP;
    setBalloonTouchListener(thisIndex);
    balloonView.setVisibility(View.VISIBLE);
    if (isRecycled) {
      balloonView.setLayoutParams(params);
    } else {
      mapView.addView(balloonView, params);
    }
    mc.animateTo(point);
    return true;
  }
  /**
    * Sets the visibility of this overlay's balloon view to GONE.
  */
  private void hideBalloon() {
    if (balloonView != null) {
      balloonView.setVisibility(View.GONE);
    }
  }
  private void hideOtherBalloons(List<Overlay> overlays) {
    for (Overlay overlay : overlays) {
      if (overlay instanceof BalloonItemizedOverlay<?> && overlay != this) {
        ((BalloonItemizedOverlay<?>) overlay).hideBalloon();
      }
    }
  }
  private void setBalloonTouchListener(final int thisIndex) {
    try {
      @SuppressWarnings("unused")
      Method m = this.getClass().getDeclaredMethod("onBalloonTap", int.class);
      clickRegion.setOnTouchListener(new OnTouchListener() {
        public boolean onTouch(View v, MotionEvent event) {
          View l =  ((View) v.getParent()).findViewById(R.id.balloon_main_layout);
          Drawable d = l.getBackground();
          if (event.getAction() == MotionEvent.ACTION_DOWN) {
            int[] states = {android.R.attr.state_pressed};
            if (d.setState(states)) {
              d.invalidateSelf();
            }
            return true;
          } else if (event.getAction() == MotionEvent.ACTION_UP) {
            int newStates[] = {};
            if (d.setState(newStates)) {
              d.invalidateSelf();
            }
            // call overridden method
            onBalloonTap(thisIndex);
            return true;
          } else {
            return false;
          }
        }
      });
    } catch (SecurityException e) {
      Log.e("BalloonItemizedOverlay", "setBalloonTouchListener reflection SecurityException");
      return;
    } catch (NoSuchMethodException e) {
      // method not overridden - do nothing
      return;
    }
  }
}

Answer 1

I believe that you need to create a layout for your balloon. In this tutorial the author creates a balloon view and has a balloon.xml To display an image you would put the correct image view in the XML file. Kind of like trying to display text and images in a list view where you need a layout for the rows. Unless i missed it you need to define this in your R.id.balloon_main_layout

You might even need to create a class extending OverlayItem because each item on the map will probably have a different picture associated with it. If you create an item that extends OverlayItem then you can pass in a picture or have functions to retrieve the picture when the overlay is created.

EDIT: Your example works exactly the way it describes. The tutorial that you linked to in your comments solves your problem. The tutorial displays text with an ImageView next to it. The images are given to you at the bottom of the tutorial you have to save them to a folder named drawable in your res directory.

Edit: I actually just got the code that you used working. It displays a blank map because i didnt put my api key in but the popup has text and a cancel button next to it that is the image view inflated from balloon_map_overlay.xml

You can extend the OverlayItem like this Include a picture:

import android.graphics.Rect;
import android.graphics.drawable.Drawable;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.OverlayItem;

public class MyItem extends OverlayItem{

    Drawable balloonPic = null;
    Rect mBounds = null;
    public MyItem(GeoPoint point, String title, String snippet, Drawable draw, Rect bounds) {
        super(point, title, snippet);

        mBounds = bounds;
        //0,0 position is the geopoint on the map. Positive is going right and down. negative goes left and up. setBounds accepts (leftBound, topbound, right bound, bottom bound)
        draw.setBounds(-draw.getIntrinsicWidth()/2, -draw.getIntrinsicHeight(), draw.getIntrinsicWidth()/2, 0);
        this.setBalloonPic(draw);

    }

    @Override
    public void setBalloonPic(Drawable draw) {

        balloonPic = draw;

    }
    @Override
    public Drawable getBalloonPic() {

        return balloonPic;

    }

}

In Your balloon overlayview you need to set your data for the pictures when the overlayitems get created. Ill leave that up to you but the example shows how to access the OverlayItem’s get methods and the above code hints at having getters and setters for the Image that you want to display. Otherwise it will display the same image on every balloon.

public void setData(OverlayItem item) {
    layout.setVisibility(VISIBLE);
    if (item.getTitle() != null) {
    title.setVisibility(VISIBLE);
    title.setText(item.getTitle());
    } else {
    title.setVisibility(GONE);
    }
    if (item.getSnippet() != null) {
    snippet.setVisibility(VISIBLE);
    snippet.setText(item.getSnippet());
    } else {
    snippet.setVisibility(GONE);
    }

P.S. your public class MyItemizedOverlay extends BalloonItemizedOverlay<OverlayItem> needs to be
public class MyItemizedOverlay extends BalloonItemizedOverlay<MyItem>