Correct alignment of TextViews in RelativeLayout

Question

I'm developing an instant messaging app for a university course, similar to Whatsapp, as you might have guessed by seeing the icon in the attached screenshot :).

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

The layout for sent messages works well, 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> 

These ugly background colors are added simply to see the space made for each view and layout. As you can see in the screenshot, sending messages (right alignment) is excellent. Received messages (left alignment) do not align well because RelativeLayout accepts all available horizontal spaces that are installed only to wrap content.

Does anyone know how to fix this, or maybe the best layout design to accomplish what I need?

Many thanks.

Answer 1

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

Answer 2

When RelativeLayout child alignParentRight , the width will be automatically changed to match_parent . TextView cei_timestamp android:layout_alignParentRight="true" change the width of the parent width from wrap_content to match_parent .
U has two ways to fix it:

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

  
  

• don't use wrap_content , both use a specific width, like 60dp .

Answer 3

I know it's late, but I am sending it to those who are looking for a solution to the same problem. To align the received message to the left, simply delete this line from the second TextView in xml for received messages.

  android:layout_toLeftOf="@+id/cei_timestamp" 

I tried this with a simple example and it worked. Here is the code and screenshot

 <?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>`