Properly aligning TextViews in RelativeLayout

Question

I´m developing an instant message application for an university course, similar to Whatsapp as you could guess seeing the icon in the attached screenshot :).

I have a ListFragment being populated with a custom CursorAdapter. It gives two type of views, sent messages (aligned to right) and received messages (aligned to left).

The layout for sent messages works nicely, but I cannot say the same for received messages.

Here is a screenshot:

Sent message layout:

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="#FFCCCCCC"
        android:padding="5dp" >

        <TextView
            android:id="@+id/ceo_timestamp"
            android:layout_width="60sp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:background="#FFBBBBBB"
            android:gravity="center"
            android:textSize="10sp" />

        <TextView
            android:id="@+id/ceo_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/ceo_timestamp"
            android:background="#FFAAAAAA"
            android:gravity="right"
            android:textSize="16sp" />
    </RelativeLayout>

</RelativeLayout>

Received message layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="left" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:background="#FF999999"
        android:padding="5dp" >

        <TextView
            android:id="@+id/cei_timestamp"
            android:layout_width="60sp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="#FF888888"
            android:gravity="center"
            android:textSize="10sp" />

        <TextView
            android:id="@+id/cei_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/cei_timestamp"
            android:background="#FF777777"
            android:gravity="right"
            android:textSize="16sp" />
    </RelativeLayout>

</RelativeLayout>

Those ugly background colors are added just to see the space taken for each view and layout. As you can see in the screenshot, send messages (right-aligned) work great. Received messages (left-aligned) aren't aligning well, because RelativeLayout takes all horizontal space available, insted of just wrapping content.

Anyone knows how to fix it, or maybe a better layout design to accomplish what I need?

Thanks a lot.

Answer 1

I know it is late but I am posting it for someone looking for the solution of same problem. To align the received message to the left just remove this line from second TextView in xml for received messages.

 android:layout_toLeftOf="@+id/cei_timestamp"

I tried it with a simple example and it worked. Here is the code and screen shot

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.android.myapplication1.MainActivity">
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#FF4081">

    <TextView
        android:id="@+id/textView"
        android:layout_width="60sp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:gravity="center"
        android:text="Hello"
        android:textSize="23sp" />


    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/textView"
        android:gravity="right"
        android:text="New Text"
        android:textColor="#FFF"
        android:textSize="23sp" />
</RelativeLayout>

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout centerHorizontal="true"
    android:layout marginTop = "104dp"
    android:text="New Button" /></RelativeLayout>`

Answer 2

When RelativeLayout's child is alignParentRight, it's width will be auto changed to match_parent. TextView cei_timestamp 's android:layout_alignParentRight="true" make it's parent's width change from wrap_content to match_parent silently.
U have two ways to correct:

1. do not use RelativeLayout

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
   
       <LinearLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_alignParentLeft="true"
           android:background="#FF999999"
           android:padding="5dp" >
   
           <TextView
               android:id="@+id/cei_text"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:background="#FF777777"
               android:gravity="right"
               android:textSize="16sp" />
   
           <TextView
               android:id="@+id/cei_timestamp"
               android:layout_width="60sp"
               android:layout_height="wrap_content"
               android:background="#FF888888"
               android:gravity="center"
               android:textSize="10sp" />
   
       </LinearLayout>
   
   </RelativeLayout>
   

   
   

2. do not use wrap_content, both use specific width like 60dp.

Answer 3

In Sent message layout replace android:layout_alignParentRight="true" parameter with the android:layout_alignParentLeft="true".