Set width of custom InfoWindow in Google Maps api v2

Question

I created markers on the map. When I click on them, the custom info windows are always as wide as the screen.

I tried setting layout_width="200dp" but that didn't help. I also tried setting

view.setLayoutParams(new LayoutParams(GetDipsFromPixel(200), GetDipsFromPixel(300)));

I can set the width of the textviews by setting snippetUi.setWidth(GetDipsFromPixel(200)); but the layout still remains screen wide.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="#FFFFFF"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:padding="10dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#FFFFFF"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/worldmap_infowindow_profileimg"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/noimage" />

        <TextView
            android:id="@+id/worldmap_infowindow_username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="To do No.2."
            android:textColor="#000000"
            android:textSize="16sp"
            android:textStyle="bold" 
            android:paddingLeft="5dp"/>
    </LinearLayout>

    <View android:id="@+id/separator" 
         android:background="#ababab" 
         android:layout_width = "fill_parent"
         android:layout_marginTop="3dp"
         android:layout_marginBottom="3dp"
         android:layout_height="1dp"/>

    <TextView
        android:id="@+id/worldmap_infowindow_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="See the Giza Pyramids"
        android:textColor="#000000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/worldmap_infowindow_details"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="It was fascinating! It's a shame that it was raining, though."
        android:textColor="#000000"
        android:textSize="14sp"
        android:textStyle="normal" />

</LinearLayout>

Class:

 private class CustomInfoWindowAdapter implements InfoWindowAdapter {

       private View view;

       public CustomInfoWindowAdapter() {
            view = getLayoutInflater().inflate(R.layout.custom_infowindow, null);
       }

       @Override
       public View getInfoContents(Marker marker) {

           if (WorldMap.this.myMarker != null
                   && WorldMap.this.myMarker.isInfoWindowShown()) {
               WorldMap.this.myMarker.hideInfoWindow();
               WorldMap.this.myMarker.showInfoWindow();
           }
           return null;
       }

       @Override
       public View getInfoWindow(final Marker marker) {
           WorldMap.this.myMarker = marker;


           final String title = marker.getTitle();
           final TextView titleUi = ((TextView) view.findViewById(R.id.worldmap_infowindow_name));
           if (title != null) {
               titleUi.setText(title);
           } else {
               titleUi.setText("");
           }

           final String snippet = marker.getSnippet();
           final TextView snippetUi = ((TextView) view.findViewById(R.id.worldmap_infowindow_details));
           if (snippet != null) {
               snippetUi.setText(snippet);
           } else {
               snippetUi.setText("");
           }

           return view;
       }
   }

Carbarn

May this will help u #16712022 @Carbarn – Uneven

It did help, thank you. I just added android:background="@drawable/bg_custominfowindow" where bg_custominfowindow is a shape created in xml. Please add this as a solution. – Carbarn

great it helped..I m going to add answer with short explanation. – Uneven

use android:minWidth parameters for custom layouts.. – Stoned

Answer 1

If you want to show custom window with fixed size ( Height or Width ) then you have to make drawable and set it as a background of XML.

I have posted my answer HERE with solution.You can refer how it works.

Uneven

Actually the real solution is to use a drawable as background. Specifying layout_width does not help on its own! – Carbarn

That can't be right, it seems so counter intuitive. If it is right then it's a crazy implementation. Grrrr, I thought Google hired the best programmers, shame they do not 'think' like the rest of us. – Exhaust

Answer 2

Basically you just need to have another level of layout below root, like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:background="@android:color/transparent"
android:layout_height="wrap_content">

<LinearLayout
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="horizontal">
    ...

Patriarchy

If someone wantsthis solution to work on screen with different dimension then just fetch the value from diiferent dimen.xml – Hyperthyroidism

Answer 3

Just create the parent layout with "wrap_content" and a child layout with the desired size:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:orientation="vertical">

    <!-- This layout defines the desired size -->
    <LinearLayout
        android:layout_width="240dp"
        android:layout_height="320dp"
        android:orientation="vertical">

        <!-- Your views here -->

    </LinearLayout>

</LinearLayout>

Detoxify

Answer 4

@Override
public View getInfoWindow(Marker arg0) {
   return null;
}

@Override
public View getInfoContents(Marker arg0) {
   View v = getActivity().getLayoutInflater().inflate(R.layout.custom_info_window, null);
   v.setLayoutParams(new LinearLayout.LayoutParams(500,300));
}

Llamas

What if i only want to set the width static and not the height? Height should be wrap content. How can i do that? Any idea? – Peroration

Answer 5

In my case, I set the fixed width of one of the child of the layout and it worked. Don't know why it did not work when setting width of the root view. Here is an example:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:orientation="vertical"
    android:padding="3dp">

    <ImageView
        android:id="@+id/info_window_image"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/facebook"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:lines="1"
        android:maxLines="1"
        android:singleLine="true"
        android:text="Free for All Soccer Game"
        android:textColor="@color/blue"
        android:textSize="@dimen/medium" />
</LinearLayout

>

Wiggle