Relative layout similar to WhatsApp messages

Question

I am trying to develop a Chat Application in Android. I need to create a layout similar to WhatsApp. Two TextViews - One for message and another one for time. They both should be wrapped to the width and height. I am using a RelativeLayout to align them so that when long message is inserted, the 'Time' view doesnt get pushed to the side.

<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right"
android:paddingLeft="40dp"
android:orientation="horizontal"
>

<RelativeLayout

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
     android:padding="10dp"

     android:background="@drawable/chat_bubble_sent">

    <TextView
    android:id="@+id/dateView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignBottom="@+id/msgTextView"
    android:text="Date"
    android:layout_marginRight="10dp"
    android:textSize="12sp"
    android:textColor="#343434"
    />

    <TextView
    android:id="@+id/msgTextView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/dateView"
    android:text="Text goes here"
    android:textColor="#040404"
    android:typeface="sans"
    android:textSize="15sp"
    />

 </RelativeLayout>
 </LinearLayout>

But using this code, I am getting some empty space between those two views. I have seen some of the questions regarding this but i couldnt get the right solution..

if i use "layout_width:wrap_content" in "msgTextView" they are wrapped side by side, but there is empty space before those two views..

In any case I need to get rid of that empty space so that the background is just applied for those wrapped TextViews. Hope i didnt confuse u

Any ideas how to get it? Thanks in advance..

@Jimmer check my answer here :http://stackoverflow.com/questions/30168465/whatsapp-message-layout-how-to-get-time-view-in-the-same-row/30439423#30439423 — Hisham Muneer, May 25 '15 at 13:25
http://stackoverflow.com/questions/30168465/whatsapp-message-layout-how-to-get-time-view-in-the-same-row this will help you on this — Rakesh, Sep 22 '16 at 09:50

score 4 · Answer 1 · answered Feb 08 '14 at 05:15

Try this..

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="40dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="@drawable/chat_bubble_sent"
        android:padding="10dp" >

        <TextView
            android:id="@+id/msgTextView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            android:text="Text goes here"
            android:textColor="#040404"
            android:textSize="15sp"
            android:typeface="sans" />

        <TextView
            android:id="@+id/dateView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginRight="10dp"
            android:text="Date"
            android:textColor="#343434"
            android:textSize="12sp" />
    </LinearLayout>

</RelativeLayout>

It's NOT working exactly the way like in WhatsApp. The TextView with a message suppose to push down a date line down below itself when the message is too long. — ekashking, Oct 05 '18 at 00:12

Relative layout similar to WhatsApp messages

1 Answers1