I'm making an android application that has a map in which clicking on a marker shows the infowindow as follows:
But I need the infowindow to look like this and not do it:
How can I do it? Some example? Thanks
You can check the official documentation
To do this you must create a layout with what you want to appear in your infoWindow, as an example infowindow_layout.xml
:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp" >
<ImageView
android:id="@+id/info_window_imagen"
android:layout_width="80dp"
android:layout_height="80dp"
android:scaleType="centerCrop"
android:src="@drawable/imagen_default" />
<TextView
android:id="@+id/info_window_nombre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="@id/info_window_imagen"
android:paddingLeft="5dp"
android:text="Carlo Estrada Solano" />
<TextView
android:id="@+id/info_window_placas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="20sp"
android:layout_below="@id/info_window_nombre"
android:layout_toRightOf="@id/info_window_imagen"
android:paddingLeft="5dp"
android:text="Placas: SX5487" />
<TextView
android:id="@+id/info_window_estado"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/info_window_placas"
android:layout_toRightOf="@id/info_window_imagen"
android:paddingLeft="5dp"
android:text="Estado: Activo" />
</RelativeLayout>
you would have something similar to:
You create a class that extends from InfoWindowAdapter
which will load the previous layout:
public class CustomInfoWindowAdapter implements InfoWindowAdapter{
private static final String TAG = "CustomInfoWindowAdapter";
private LayoutInflater inflater;
public CustomInfoWindowAdapter(LayoutInflater inflater){
this.inflater = inflater;
}
@Override
public View getInfoContents(final Marker m) {
//Carga layout personalizado.
View v = inflater.inflate(R.layout.infowindow_layout, null);
String[] info = m.getTitle().split("&");
String url = m.getSnippet();
((TextView)v.findViewById(R.id.info_window_nombre)).setText("Lina Cortés");
((TextView)v.findViewById(R.id.info_window_placas)).setText("Placas: SRX32");
((TextView)v.findViewById(R.id.info_window_estado)).setText("Estado: Activo");
return v;
}
@Override
public View getInfoWindow(Marker m) {
return null;
}
}
Finally to load the custom infoWindow, to your GoogleMap instance using the method setInfoWindowAdapter()
you assign the InfoWindowAdapter
customized.
myGoogleMap.setInfoWindowAdapter(new CustomInfoWindowAdapter(LayoutInflater.from(getActivity())));
With this you will get what you want to show a custom infoWindow when you click on the map marker.