Layout chat bubbles issues: TextView fills all the screen

Question

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 layout, don't get show well the incoming time text. When the message text grows, fills the entire width of the screen, and it hidden the text of the message time.

First question: How can achieve this?

This is the incoming messages layout:

<?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="fill_parent"
    android:orientation="horizontal"
    android:animateLayoutChanges="true"
    android:gravity="left">

    <TextView
        android:id="@+id/message_text_server"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5sp"
        android:background="@drawable/speech_bubble_orange"
        android:shadowColor="@color/textShadow"
        android:shadowDx="1"
        android:shadowDy="1"
        android:text="Medium Text"
        android:textColor="@color/textColor"
        android:textSize="20sp" />

    <RelativeLayout
        android:id="@+id/message_server"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="left"
        android:layout_gravity="left" >
        
        <TextView
            android: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" />        

        <TextView
            android: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>

Second Question The layout of my messages is the same but changing the elements's position and are working well. Why?

This is an image of the problem:

Edit

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)

I´m using a listView with a adapter, and the adapter manages the two layouts. It´s only a layout problem — Sangar82, May 15 '14 at 07:59
have you use two different layout.xml for incoming and outgoing messages ? — Haresh Chhelana, May 15 '14 at 08:44
yes, the same that the outgoing layout (green bubble) but with reverse order — Sangar82, May 19 '14 at 07:02
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) http://i62.tinypic.com/2ur3rf7.jpg — Sangar82, May 19 '14 at 19:30

score 4 · Answer 1 · edited May 23 '17 at 12:09

Set layout_weight attribute (set android:layout_weight="1" on your message_text_server TextView 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:

enter image description here

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:

enter image description here

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"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:animateLayoutChanges="true"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left">
        <TextView
            android: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" />
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:text="Enviado"
                android:textSize="10sp" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:text="23:48"
                android:textSize="10sp" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="Enviado"
                android:textSize="10sp" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="23:48"
                android:textSize="10sp" />
        </LinearLayout>
        <TextView
            android: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>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left">
        <TextView
            android: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" />
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:text="Enviado"
                android:textSize="10sp" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:text="23:48"
                android:textSize="10sp" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="Enviado"
                android:textSize="10sp" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="23:48"
                android:textSize="10sp" />
        </LinearLayout>
        <TextView
            android: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.

Thanks for your reply. I had tried this before. This is the result: http://i62.tinypic.com/2ur3rf7.jpg The behaviour must be the same that the green bubbles — Sangar82, May 19 '14 at 19:22
The first and the last linearlayout (orange bubbles) aren't the same. I use only a layout for all the incoming messages and another for the outgoing messages. Here, you are using two different. I need only one layout. You make a layout for a long text and another for a short text, not a layout that combine two. — Sangar82, May 20 '14 at 12:13

Blackbelt · Answer 2 · 2014-05-26T14:21:29.953

1

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

edited May 26 '14 at 14:21

answered May 18 '14 at 18:28

Blackbelt

156,034
29
297
305

Thanks for your reply. I had tried this before. This is the result: http://i62.tinypic.com/2ur3rf7.jpg The behaviour must be the same that the green bubbles – Sangar82 May 19 '14 at 19:21
@Sangar82 it strange. Trying putting `android:layout_width="0dip"` instead of `wrap_content` in the bubble`s textview – Blackbelt May 19 '14 at 19:24
the height of the root's LinearLayout should be wrap_content. Also remove the margin attribute from the TextView inside the RelativeLayout, just to narrow down the issue – Blackbelt May 19 '14 at 19:41
looks kind of it, doesn't it? Can you remove the android:visibility="gone" for "enviado" just to see how does it look? – Blackbelt May 19 '14 at 19:56
right in the same place that the message´s time. I positioned this with the margins – Sangar82 May 19 '14 at 20:01
can you link a screenshot? Also when you use RelativeLayout you have to assign relative position to the children except the first one that is positioned to the left/top – Blackbelt May 19 '14 at 20:02
android:layout_below="@id/sended_server" and android:layout_alignWithParentIfMissing="true" to the TextView with the time (time_server) – Blackbelt May 20 '14 at 12:13

score 0 · Answer 3 · answered May 25 '14 at 16:34

Use RlativeLayout for this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:animateLayoutChanges="true" >

    <RelativeLayout
        android: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" >

        <TextView
            android: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" />

        <TextView
            android: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>

score -1 · Answer 4 · answered May 19 '14 at 04:24

For First try this,

<?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="fill_parent"
    android:animateLayoutChanges="true"
    android:gravity="left"
    android:orientation="horizontal" >

    <TextView
        android: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" />

    <RelativeLayout
        android:id="@+id/message_server"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:gravity="left" >

        <TextView
            android: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" />

        <TextView
            android: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

thanks for your reply but doesn't work as expected. http://es.tinypic.com/r/3fsyg/8 — Sangar82, May 19 '14 at 19:19

Layout chat bubbles issues: TextView fills all the screen

4 Answers4

Linked