1

I try to implement the Map View balloon for GoogleMaps, but I block with the layout of the balloon.
The size of the balloon must be the content size, however, it takes the background drawable size, because it's bigger. As I have a quite large balloon 9-patch image, provided by someone else, a small balloon content takes all the screen (drawable size).

I saw this related question: How to wrap content views rather than background drawable? , which is exactly what I want, but it has no correct answer (using a FrameLayout makes the same problem, because the ImageView src will take the drawable size too, with wrap_content or fill_parent).

Here is my layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content" android:id="@+id/balloon_main_layout"
    android:orientation="horizontal" android:clickable="true"
    android:focusable="true" android:focusableInTouchMode="true"
    android:layout_width="wrap_content" android:background="@drawable/info_bulle_selector">
    <LinearLayout android:id="@+id/linearLayout1"
        android:layout_height="wrap_content" android:layout_width="0dp"
        android:layout_weight="1">
        <TextView android:layout_height="wrap_content"
            android:layout_width="wrap_content" android:text="TextView"
            android:id="@+id/balloon_item_title" android:textColor="#ffffff"></TextView>
    </LinearLayout>
    <ImageView android:id="@+id/balloon_close"
        android:layout_marginLeft="5dp" android:src="@drawable/fermer_selector"
        android:scaleType="fitXY" android:layout_height="30dp"
        android:layout_width="30dp"></ImageView>
</LinearLayout>

Here is a screen of what I have (the red space has to be deleted):
Current baloon layout

If you have any idea to solve this problem (which I often have when I design my layouts with background image), it would be great.
Thanks in advance.

EDIT:
Here the nine-patch png: nine-patch balloon

Community
  • 1
  • 1
Astrorvald
  • 223
  • 1
  • 9

1 Answers1

2

When I do understand your problem right, you have two options:

1) make the balloon 9-patch image smaller, especially the non-stretchable and the padding areas of the 9-patch image, so it can better fit to smaller content. See for more documentation here: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

EDIT:

As I notice in point 1), your 9-patch image was too big. It has a dimension of 330px in width and 74px in height. Because your content does not fill up the whole background images width and height, you got spaces within your layout.

As a possible solution, please shrink your 9-patch image. I shrinked your image to a width of 150px and a height of 34px and I got the following result:

screen shows 3 balloons with different contents

Here is the shrinked 9-patch image: enter image description here

AZ13
  • 14,397
  • 5
  • 35
  • 31
  • Yes, I thought too to the first solution, but it's a kind of trick, and so it doesn't solve the general problem, so I wondered if another solution exists. The second solution is not ok for the balloon, due to the little triangle. However, I will wait if there is some other answer before to accept your solution. – Astrorvald Aug 23 '11 at 15:55
  • can you please upload the 9-patch image? – AZ13 Aug 23 '11 at 15:57
  • This is not a general solution, but it will be ok :) – Astrorvald Aug 24 '11 at 07:43