This is the first part of my next tutorial for Google Maps Android API v2.
It's about using the InfoWindowAdapter to make awesome looking InfoWindows for your Marker.
Here I'm going to show you how to implement this adapter and how to implement the method
getInfoContents(Marker marker). This will only change what's
inside the InfoWindow and not how the window itself looks. In this simple example I'm simply going to add an image to the InfoWindow, change the title a bit and add a String from a custom object to it.
You might want to check my
previous post on adding an object to a marker if you haven't seen it yet, I'll continue using that project for this tutorial as well.
This is how it should look when you've correctly implemented everything:
I've changed my EventInfo class a bit to add an String called "type" to it. Some of you asked for this code so I'm posting the class here:
public class EventInfo {
private LatLng latLong;
private String name;
private Date someDate;
private String type;
public EventInfo(LatLng latLong, String name, Date someDate, String type) {
super();
this.latLong = latLong;
this.name = name;
this.someDate = someDate;
this.type = type;
}
public LatLng getLatLong() {
return latLong;
}
public void setLatLong(LatLng latLong) {
this.latLong = latLong;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Date getSomeDate() {
return someDate;
}
public void setSomeDate(Date someDate) {
this.someDate = someDate;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
}
So I've also made a small change in the setUpEventSpots() to initiate the EventInfo objects:
EventInfo firstEventInfo = new EventInfo(new LatLng(50.154, 4.35), "Right now - event", new Date(), "Party");
EventInfo secondEventInfo = new EventInfo(new LatLng(51.25, 4.15), "Future Event", new Date(1032, 5, 25), "Convention");
Now let's setup a layout file for our contents. It's just a normal xml-file. I've placed an ImageView in it, with the launcer icon. You can change this picture if you want. For example use a picture of the object that the marker represents. Here's the code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/ivInfoWindowMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:adjustViewBounds="true"
android:src="@drawable/ic_launcher">
</ImageView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/txtInfoWindowTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#ff000000"
android:textSize="14dp"
android:textStyle="bold"/>
<TextView
android:id="@+id/txtInfoWindowEventType"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#ff7f7f7f"
android:textSize="14dp"/>
</LinearLayout>
</LinearLayout>
Just have a good look at this code and check the screenshot above to compare.
Next up, let's finally use the InfoWindowAdapter :-)
I've added this code at the end of my setUpEventSpots() method:
mapFragment.getMap().setInfoWindowAdapter(new InfoWindowAdapter() {
private final View contents = getLayoutInflater().inflate(R.layout.content, null);
@Override
public View getInfoWindow(Marker marker) {
//Only changing the content for this tutorial
//if you return null, it will just use the default window
return null;
}
@Override
public View getInfoContents(Marker marker) {
EventInfo eventInfo = eventMarkerMap.get(marker);
String title = marker.getTitle();
TextView txtTitle = ((TextView) contents.findViewById(R.id.txtInfoWindowTitle));
if (title != null) {
// Spannable string allows us to edit the formatting of the text.
SpannableString titleText = new SpannableString(title);
titleText.setSpan(new ForegroundColorSpan(Color.RED), 0, titleText.length(), 0);
txtTitle.setText(titleText);
} else {
txtTitle.setText("");
}
TextView txtType = ((TextView) contents.findViewById(R.id.txtInfoWindowEventType));
txtType.setText(eventInfo.getType());
return contents;
}
});
Try this out and if you're having any problems, just leave a comment below and I'll see what I can do.
Be sure to check back for part 2 where I'm going to make a custom window for the InfoWindow, perhaps I'll try something like a circle or something. I don't know yet.
It should be online somewhere in the next two days.
Happy Programming
