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:

enter image description here

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.

those stupid things and coffee are nice to keep on when having work to do and lacking time :) — mavnaranjo, Mar 06 '12 at 07:28

score 1 · Answer 1 · answered Mar 06 '12 at 06:26

1

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

answered Mar 06 '12 at 06:26

Om Narain Shukla

361
1
4
12

Thanks for your quick answer! I tried that, and alignments work good, but the opposite as expected. I want to get sent messages to right, and received messages to left. – mavnaranjo Mar 06 '12 at 07:20
So you can change the alignment of both to left and right wherever you want . :) – Om Narain Shukla Mar 06 '12 at 07:40

score 0 · Answer 2 · edited Dec 17 '13 at 10:01

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:

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>

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

score 0 · Answer 3 · answered Aug 04 '16 at 20:24

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

Properly aligning TextViews in RelativeLayout

3 Answers3

Linked