Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Android

Posted by Carla Brooks
Carla Brooks
803 Points

Chat Bubble not wrapping content

Hi there people!! I have a little bit of an issue, I´m trying to make a chat bubble layout but the bakcground of the message (the bubble itself) is filling the whole width of the screen and I want it to make a wrap_content of the text... here´s my code :

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="match_parent" android:orientation="horizontal"> <ImageView android:id="@+id/ivProfileLeft" android:layout_width="70dp" android:layout_height="70dp" android:layout_gravity="center_vertical" android:paddingLeft="@dimen/message_list_item_vertical_margin" android:paddingTop="@dimen/message_list_item_vertical_margin" android:src="@drawable/deletecontactbutton" />

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:layout_weight="1">
    <TextView
        android:textSize="12sp"
        android:paddingTop="@dimen/message_list_item_vertical_margin"
        android:paddingBottom="@dimen/message_list_item_vertical_margin"
        android:paddingLeft="@dimen/message_list_item_vertical_margin"
        android:paddingRight="@dimen/message_list_item_vertical_margin"
        android:background="@drawable/com_facebook_button_send_background"
        android:text="Test"
        android:id="@+id/tvBody"
        android:singleLine="false"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">
    </TextView>
</LinearLayout>

<ImageView
    android:id="@+id/ivProfileRight"
    android:layout_gravity="center_vertical"
    android:paddingTop="@dimen/message_list_item_vertical_margin"
    android:paddingRight="@dimen/message_list_item_vertical_margin"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:src="@drawable/deletecontactbutton" />

</LinearLayout>

.... The imageView is the one that is gone whether the message is received or sent... please help!!!!

3 Answers

Carla Brooks
Carla Brooks
803 Points

I figured out the solution! I had to make the inside LinearLayout as weight 1 and set that layout to change the gravity (left or right) depending if the message was sent or received :D

Farouk Charkas
Farouk Charkas
1,957 Points

Nice to hear

Farouk Charkas
Farouk Charkas
1,957 Points
Farouk Charkas
Farouk Charkas
1,957 Points

Hello Carla Brooks,

The problem with your code is that you set the ImageView layoutWidth to 70dp instead of wrap_content

-Farouk, 11

Farouk Charkas
Farouk Charkas
1,957 Points 
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
    android:id="@+id/ivProfileLeft"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:paddingLeft="@dimen/message_list_item_vertical_margin"
    android:paddingTop="@dimen/message_list_item_vertical_margin"
    android:src="@drawable/deletecontactbutton" />

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:layout_weight="1">
    <TextView
        android:textSize="12sp"
        android:paddingTop="@dimen/message_list_item_vertical_margin"
        android:paddingBottom="@dimen/message_list_item_vertical_margin"
        android:paddingLeft="@dimen/message_list_item_vertical_margin"
        android:paddingRight="@dimen/message_list_item_vertical_margin"
        android:background="@drawable/com_facebook_button_send_background"
        android:text="Test"
        android:id="@+id/tvBody"
        android:singleLine="false"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">
    </TextView>
</LinearLayout>

<ImageView
    android:id="@+id/ivProfileRight"
    android:layout_gravity="center_vertical"
    android:paddingTop="@dimen/message_list_item_vertical_margin"
    android:paddingRight="@dimen/message_list_item_vertical_margin"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/deletecontactbutton" />
Carla Brooks
Carla Brooks
803 Points
Carla Brooks
Carla Brooks
803 Points

Hi Faraouk!! I think I didnt explain myself the problem is that the bubble (background of the text) is not wrapping the content, the error is because I am setting the weight value of 1, but I change it to another value it mess this code :

    if (!isMe) { //Left
        holder.inboxSenderPhotoLeft.setVisibility(View.VISIBLE);
        holder.inboxSenderPhotoRight.setVisibility(View.GONE);
        Log.d("CA", "userID is not equal");
    } else { //Right
        Log.d("CA", "userID is equal");
        holder.inboxSenderPhotoRight.setVisibility(View.VISIBLE);
        holder.inboxSenderPhotoLeft.setVisibility(View.GONE);
        holder.message.setGravity(Gravity.END);
    }