Layout Chat Bubbles Issues: Textview Fills All The Screen

I'm working on bubble chat. I use a adapter with two layouts, one for incoming messages and other for my messages. The adapter is working well. My problems are with the incoming la

Solution 1:

Set layout_weight attribute (set android:layout_weight="1" on your message_text_serverTextView object in both bubble layouts) to tell parent container how you want it to distribute available space to its children.

In result (aside from styles I stripped) you would get exactly what you want:

See the docs or check top answers in this question to find out more about layout_weight and use of it.

EDIT

You must do something wrong as setting parent container and server text and date textview fields width to match_parent and server text layout_width should be really sufficient to get that for both bubles.

EDIT 2

You (ab)using margin and padding in your layout.

I need that the oranges bubbles to have the same behaviour that the green´s when i have only a word in the bubble and the same behaviour when the bubble is full of words (see green bubbles)

You just need to play with layout_width and layout_gravity of the server_text TextView. Here the proper layout shot:

and then the layout behind it. No padding/margin needed. Just gravity and play width height and width plus weight. Just style it as you want later and you're home:

<?xml version="1.0" encoding="utf-8"?><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:animateLayoutChanges="true"xmlns:android="http://schemas.android.com/apk/res/android"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"><TextViewandroid:id="@+id/TextView02"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5sp"android:layout_weight="1"android:text="Foo bar foo foo foo"android:textSize="20sp" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"android:text="Enviado"android:textSize="10sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"android:text="23:48"android:textSize="10sp" /></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:text="Enviado"android:textSize="10sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:text="23:48"android:textSize="10sp" /></LinearLayout><TextViewandroid:id="@+id/TextView01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5sp"android:layout_weight="1"android:text="Foo bar foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo"android:textSize="20sp" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"><TextViewandroid:id="@+id/TextView02"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5sp"android:layout_weight="1"android:text="Foo bar foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo"android:textSize="20sp" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"android:text="Enviado"android:textSize="10sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"android:text="23:48"android:textSize="10sp" /></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:text="Enviado"android:textSize="10sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:text="23:48"android:textSize="10sp" /></LinearLayout><TextViewandroid:id="@+id/TextView01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5sp"android:layout_weight="1"android:text="Foo bar foo foo"android:textSize="20sp" /></LinearLayout></LinearLayout>

Basically no padding/margin needed.

Solution 2:

add

 android:layout_weight="1"

to the TextView (the one with the buble). This way it should take all the space less the one needed to the RelativeLayout.

Edit:

the height of your root layout should be wrap_content, and you need also to assign a position to the children of the inner RelativeLayout:

android:layout_below="@id/sended_server" and android:layout_alignWithParentIfMissing="true" to the TextView with id time_server, should do the trick

Solution 3:

Use RlativeLayout for this:

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:animateLayoutChanges="true" ><RelativeLayoutandroid:id="@+id/message_server"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_alignParentTop="true"android:layout_gravity="left"android:gravity="left" ><TextViewandroid:id="@+id/sended_server"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="9dp"android:layout_marginTop="10sp"android:text="Enviado"android:textSize="10sp"android:visibility="gone" /><TextViewandroid:id="@+id/time_server"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="18dp"android:layout_marginTop="23dp"android:text="23:48"android:textSize="10sp"android:background="@drawable/speech_bubble_orange"android:shadowColor="@color/textShadow"android:textColor="@color/textColor />
    </RelativeLayout>

    <TextView
        android:id="@+id/message_text_server"
        android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:layout_margin="5sp"android:layout_toLeftOf="@id/message_server"android:shadowDx="1"android:shadowDy="1"android:text="Medium Text"android:textSize="20sp" /></RelativeLayout>

Solution 4:

For First try this,

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:animateLayoutChanges="true"android:gravity="left"android:orientation="horizontal" ><TextViewandroid:id="@+id/message_text_server"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_margin="5sp"android:layout_weight="1"android:background="@android:color/holo_orange_light"android:shadowColor="@android:color/darker_gray"android:shadowDx="1"android:shadowDy="1"android:text="Medium Text"android:textColor="@android:color/white"android:textSize="20sp" /><RelativeLayoutandroid:id="@+id/message_server"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="left"android:gravity="left" ><TextViewandroid:id="@+id/sended_server"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="9dp"android:layout_marginTop="10sp"android:text="Enviado"android:textSize="10sp"android:visibility="visible" /><TextViewandroid:id="@+id/time_server"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="18dp"android:layout_marginTop="23dp"android:text="23:48"android:textSize="10sp" /></RelativeLayout></LinearLayout>

For second,

if you change the attribute position as if you put time textview first and message textview second then time textview get space as it needed then remaining space given to the second textview so for this reason its working fine when you changing attribute positions