OsmDroid bonus pack: Markers with clickable InfoWindows

After finding the useful Tutorial_1 to quickly implement InfoWindows (these bubbles over the Markers that provide additional info), i’ve extended it to easily override the onClick behaviour.

Step 1: Adding an id to the bonuspack_bubble’s root Layout

Inside res/layout, edit the files “bonuspack_bubble.xml” and “bonuspack_bubble_black.xml”

Insert this line on line 3:

android:id="@+id/bubble_layout"

So the root LinearLayout element remains like this in both files:

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/bubble_layout"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" 
 android:orientation="horizontal"
 android:background="@drawable/bonuspack_bubble_black" >
... rest of the file remains the same
</LinearLayout>

Now, in your Main Activity, create this private class:

private class MyInfoWindow extends InfoWindow{
   public MyInfoWindow(int layoutResId, MapView mapView) {
      super(layoutResId, mapView); 
   }
   public void onClose() {
   }

   public void onOpen(Object arg0) {
      LinearLayout layout = (LinearLayout) mView.findViewById(R.id.bubble_layout);
      Button btnMoreInfo = (Button) mView.findViewById(R.id.bubble_moreinfo); 
      TextView txtTitle = (TextView) mView.findViewById(R.id.bubble_title);
      TextView txtDescription = (TextView) mView.findViewById(R.id.bubble_description);
      TextView txtSubdescription = (TextView) mView.findViewById(R.id.bubble_subdescription);

      txtTitle.setText("Title of my marker");
      txtDescription.setText("Click here to view details!");
      txtSubdescription.setText("You can also edit the subdescription");
      layout.setOnClickListener(new OnClickListener() {
         public void onClick(View v) {
            // Override Marker's onClick behaviour here
         }
      }); 
   } 
}

Now add one of those MyInfoWindow to each Marker like this:

Marker startMarker = new Marker(mMapView);
startMarker.setPosition(new GeoPoint(mLat,mLon));
startMarker.setIcon(R.drawable.ic_launcher); 
startMarker.setAnchor(Marker.ANCHOR_CENTER, 1.0f);
InfoWindow infoWindow = new MyInfoWindow(R.layout.bonuspack_bubble, mMapView);
startMarker.setInfoWindow(infoWindow);
mMapView.getOverlays().add(startMarker);
startMarker.setTitle("Title of the marker");

Try it and see how it goes.

As you have noticed, i’m not using the “More info” button inside the bubble.

Instead, i’m overriding the onClick of the whole bubble, because i find it more intuitive. If you want to use the “More info” button, then:

btnMoreInfo.setVisibility(Button.VISIBLE);
 btnMoreInfo.setOnClickListener(new OnClickListener() {
   public void onClick(View v) {
      // Implement onClick behaviour
   }
 });

Give it a try and see how it goes! feel free to post any feedback or suggestions.

Advertisement