4

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:

Image

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)

Image

8
  • I´m using a listView with a adapter, and the adapter manages the two layouts. It´s only a layout problem
    – Sangar82
    May 15, 2014 at 7:59
  • have you use two different layout.xml for incoming and outgoing messages ? May 15, 2014 at 8:44
  • yes, managed by a adapter
    – Sangar82
    May 15, 2014 at 10:06
  • do you expect the time on the right of the screen?
    – Blackbelt
    May 18, 2014 at 18:23
  • yes, the same that the outgoing layout (green bubble) but with reverse order
    – Sangar82
    May 19, 2014 at 7:02

4 Answers 4

4
+50

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.

4
  • Thanks for your reply. I had tried this before. This is the result: i62.tinypic.com/2ur3rf7.jpg The behaviour must be the same that the green bubbles
    – Sangar82
    May 19, 2014 at 19:22
  • @Sangar82 see Edit #2. May 20, 2014 at 8:54
  • 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, 2014 at 12:13
  • You got one layout for left and one for right bubbles now. May 20, 2014 at 13:47
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

7
  • Thanks for your reply. I had tried this before. This is the result: i62.tinypic.com/2ur3rf7.jpg The behaviour must be the same that the green bubbles
    – Sangar82
    May 19, 2014 at 19:21
  • @Sangar82 it strange. Trying putting android:layout_width="0dip" instead of wrap_content in the bubble`s textview
    – Blackbelt
    May 19, 2014 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, 2014 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, 2014 at 19:56
  • right in the same place that the message´s time. I positioned this with the margins
    – Sangar82
    May 19, 2014 at 20:01
0

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>
-1

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

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.