How to offset the balloon view in a marker in Google Map V2?

Question

When I click a marker, appears a balloon. But there are too space between the marker and the balloon, so how I can reduce this distance?. It's like using the setBalloonBottomOffset method in the V1 Google Map.

My custom balloon is this class:

public class CustomInfoWindowAdapter implements InfoWindowAdapter {

    private final View mWindow;
    private final View mContents;

    public CustomInfoWindowAdapter(Activity activity) {
        LayoutInflater inflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        mWindow = inflater.inflate(R.layout.ballon, null);
        mContents = inflater.inflate(R.layout.ballon, null);
    }

    @Override
    public View getInfoWindow(Marker marker) {
        render(marker, mWindow);
        return mWindow;
    }

    @Override
    public View getInfoContents(Marker marker) {
        render(marker, mContents);
        return mContents;
    }

    private void render(Marker marker, View view) {
        String title = marker.getTitle();
        TextView titleUi = ((TextView) view.findViewById(R.id.txtTitle));
        if (title != null) {
            titleUi.setText(title);
        } else {
            titleUi.setText("");
        }

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

I show a marker like

marker.showInfoWindow();

My balloon xml is

<RelativeLayout
    android:layout_width="250dp"
    android:layout_height="75dp"
    android:background="@drawable/ballon" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/txtTitle"
                style="@style/Ballon_Title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:paddingLeft="15dp"
                android:paddingRight="50dp"
                android:paddingTop="10dp"
                android:singleLine="true"
                android:text="Con mis amigos amigos" />

            <TextView
                android:id="@+id/txtPlace"
                style="@style/Ballon_Place"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:paddingBottom="20dp"
                android:paddingLeft="15dp"
                android:paddingRight="50dp"
                android:singleLine="true"
                android:text="Puerta del sol" />
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </RelativeLayout>

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:paddingRight="12dp"
        android:paddingTop="18dp"
        android:src="@drawable/icon_arrow" />
</RelativeLayout>

Titustityus

Can you add a screenshot so that we can see the error? I would advice you to 1- return null; inside getInfoContents 2-inflate the view inside getInfoWindow. Do not reuse. – Vargo

It doesn't have any error. The main problem is the distance between a marker and a balloon, when I have a lot of pois, user doesn't know which poi has clicked. So, if it's very hard to fix it, the best to leave it. – Titustityus

Answer 1

Map Markers are 'anchored' by default to the middle of the bottom of your layout (i.e., anchor(0.5,1)).

You can change the anchor point by using MarkerOptions.anchor when you create your Marker.

Miun

How you said the default distance between the marker and the balloon is the minimum with the anchor method, so I can't reduce more this distance with this method, and now, the current distance between them is a little big. – Titustityus

Anchor allows you to place the marker anywhere within your balloon layout, from anchor(0.0,0.0) at the upper left hand corner to anchor(1.0,1.0) at the lower right hand corner. If the default of anchor(0.5,1.0) i.e., centered on the bottom, doesn't align with your graphic, then change it to anchor(0.5,0.9) to move the marker up 10% of your layout's height. – Miun

Answer 2

Have you tried using negative bottom margin for your whole balloon layout? Like so:

<RelativeLayout
    android:layout_width="250dp"
    android:layout_height="75dp"
    android:background="@drawable/ballon"

    android:layout_marginBottom="-8dp" >

Probably won't work or cause content to be cut off at the bottom, but still worth trying as the simplest approach. Perhaps there's another way to trick GoogleMap class but it's hard to figure out not having the source code to the API.

Another tip: you probably don't need your getInfoContents() method – just return null there. This method will only be called if you return null from getInfoWindow() (see here) – to incorporate your content view into default info window, which is clearly not your goal since you want to move balloon around. Consequently, you can also throw out mContents, it's totally redundant, just takes up mem for another copy of your inflated view hierarchy that never gets used.

Tell me if the margin thing works for you. We could probably also try to make use of something like ((View)mWindow.getParent()) later when the item is being displayed but that would be trickier so I sugget to just try the margin first.

Overword

Yes, I've tried it. But the distance between the balloon and the mark doesn't change. It makes the layout, is contained in the balloon, is displaced downward. And it's not very nice, because the balloon arrow disappears in the layout. – Titustityus

Ok, next move then. Before returning from getInfoWindow(), post something like LayoutParams parentParams = ((View)mWindow.getParent()).getLayoutParams() to ui handler (a new Handler() in onCreate() of an activity that is a ui thread handler), set a breakpoint in the runnable. This way you'll see if you can move info window's parent. (This is just off the top of my head, it may not work. The trick with posting to handler is to get the runnable executed after the info window has been added to view hierarchy) Cheers, lemme know how it goes – Overword

It doesn't have a parent, because when I've inflated the view, the second parameter is null. So, when I execute the getParent method returns null. – Titustityus

Even when you post it to the ui handler in getInfoWindow()? See, after you return it from getInfoWindow() it gets inserted into a view hierarchy – after that it does have a parent. The trick is to grab the parent when it's there :) – Overword

I've done it. p and v are null: public View getInfoWindow(Marker marker) { render(marker, mWindow); Handler handler = new Handler(); Thread t = new Thread(new Runnable() { @Override public void run() { ViewParent p = mWindow.getParent(); View v = ((View)mWindow.getParent()); LayoutParams l = v.getLayoutParams(); LayoutParams parentParams = ((View)mWindow.getParent()).getLayoutParams(); Log.i("INFO", parentParams.toString()); } }); handler.postDelayed(t, 3000); return mWindow; } – Titustityus

Hmmm, this is weird. Actually, for now I have no more ideas. I'll give it some more thought when I have some time, right now I don't. – Overword

Answer 3

This is an old question, the current API has a MarkerOptions.infoWindowAnchor method which may help.

Dishearten