Creating a layout for a skype-style text input bubble

Question

In iPhone there is a method on UIImage called stretchableimagewithleftcapwidth which can be used to create a chat bubble to stretch for any size (keeping the corners natural size).

We don't seem to have this in Android so I've set out to make a layout that I can then use as a background image with a FrameLayout. The trouble I'm having at the moment is the top row which consists of 3 columns: the left top corner, the stretchable top, and the right top corner. How do I get the left and right top corners to remain fixed size (11dip) and tell the middle to fill any remaining space in the parent? This is what I have so far.

<?xml version="1.0" encoding="UTF-8"?>
    <merge xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/layout_bubble_container"
    android:orientation="vertical">    
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="11dip"
        android:id="@+id/layout_bubble_toprow"
        android:orientation="horizontal">    
        <LinearLayout
            android:id="@+id/layout_top_leftCorner"
            android:layout_width="11dip"
            android:layout_height="fill_parent"
            android:gravity="left|top">
            <ImageView
                android:id="@+id/bubble_top_leftcorner"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:src="@drawable/bubble_lefttop" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_top"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:gravity="top|center" >

            <ImageView
                android:id="@+id/bubble_top"
                android:layout_width="match_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/bubble_top" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_top_rightCorner"
            android:layout_width="11dip"
            android:layout_height="fill_parent"
            android:gravity="right|top" >

            <ImageView
                android:id="@+id/bubble_top_rightcorner"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:src="@drawable/bubble_righttop" />
        </LinearLayout>    
    </LinearLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="11dip"
        android:id="@+id/layout_bubble_middlerow"
        android:orientation="horizontal"
        android:background="@color/WHITE">    
        <LinearLayout
            android:id="@+id/layout_left"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:gravity="left"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/bubble_left"
                android:layout_width="11dip"
                android:layout_height="fill_parent"
                android:src="@drawable/bubble_left" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/layout_right"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="right" 
            android:layout_weight="1">

            <ImageView
                android:id="@+id/bubble_right"
                android:layout_width="11dip"
                android:layout_height="fill_parent"
                android:src="@drawable/bubble_right" />
        </LinearLayout>    
    </LinearLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="11dip"
        android:id="@+id/layout_bubble_bottomrow"
        android:orientation="horizontal">    
        <LinearLayout
            android:id="@+id/layout_bottom_leftCorner"
            android:layout_width="11dip"
            android:layout_height="fill_parent"
            android:gravity="left|top">
            <ImageView
                android:id="@+id/bubble_bottom_leftcorner"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:src="@drawable/bubble_leftbottom" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_bottom"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:gravity="top|center" >

            <ImageView
                android:id="@+id/bubble_bottom"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/bubble_bottom" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_bottom_rightCorner"
            android:layout_width="11dip"
            android:layout_height="fill_parent"
            android:gravity="right|top" >

            <ImageView
                android:id="@+id/bubble_bottom_rightcorner"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:src="@drawable/bubble_rightbottom" />
        </LinearLayout>    
    </LinearLayout>
</LinearLayout>

Here is the layout tree in eclipse if this helps.

Here is what it looks like rendered in the layout editor in eclipse. Note the top and bottom rows not stretching appropriately.

Thanks in advance.

Answer 1

i also needed a chat bubble kind of view in my app so I used a 9 patch drawable as the background image and it is working fine.

check this question:

Why do 9-patch graphics size correctly in the emulator but not on a phone?

And also this link:

http://warting.se/2012/06/04/chat-bubbles-in-android/