Question

I am trying to build a speech bubble for a chat room. Each of the speech bubbles has the attached xml layout. 

I am achieving this by setting the textView to wrap_content, the speech bubble imageView to match_parent and the frame_layout to wrap_content. So that the speech_bubble image behind the text scales according to the amount of text in the bubble. 

I set the width on the textView to match parent and the height to wrap_content and for some reason, it works perfectly as required in Ice Cream Sandwich (Android 4.1).
However in Gingerbread the inner imageView speech bubble does not scale to match_parent so that the text can fit neatly inside the bubble. 
In Gingerbread the inner imageView stays the same size always, regardless of the text and the text overflows outside the bubble. 
Even though the frameLayout expands to wrap_content, the imageView does not match_parent as it is supposed to. 

Any ideas on why this is happening?  Is there another parameter I can set thru xml or a method I can call programmatically to fix this? 

Thanks!

Correct Behavior in ICS:

Correct Behavior in ICS

Incorrect Behavior in GingerBread:
Incorrect Behavior in GingerBread

XML Layout :

<merge xmlns:android="http://schemas.android.com/apk/res/android">
        <FrameLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/speech_bubble_framelayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="@color/color_transparent"
            android:layout_toRightOf="@id/message_user_imageView">

        <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
                   android:id="@+id/message_background_imageview"
                   android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:layout_margin="5dp"
                   android:scaleType="fitXY"
                   android:layout_centerInParent="true"
                   android:textColor="@color/color_brown_mud"
                   android:background="@drawable/chat_bubble_flipped"
                />
        <TextView
                android:id="@+id/message_textView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:maxEms="10"
                android:background="@color/color_transparent"
                android:textColor="@color/color_brown_uiDesign_pallete"
                android:textSize="15sp"
                android:textStyle="bold"
                android:gravity="center_horizontal"
                android:text="Message"
                android:padding="5dp"
                android:layout_marginLeft="25dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="15dp"
                android:layout_marginBottom="15dp"
                />
    </FrameLayout>
</merge>

Answer 1

From the looks of it, this is caused by a circular dependency in your sizes: the inner text and image size is dependent on the FrameLayout (match_parent), while the FrameLayout’s size is dependent on what’s contained inside it (wrap_content). Use of a FrameLayout is discouraged where more than one child is involved for exactly this sort of reason. For safety, I’d recommend changing the FrameLayout to a RelativeLayout, and setting the following property on the inner image view:

android:layout_alignTop="@+id/message_textview"
android:layout_alignBottom="@+id/message_textview"

This will ensure your image always matches up to the size of your text.