RelativeLayout matching parent although it shouldn't

Question

I'm trying to create a message layout in a chat application.

This message layout should contain:

• Message Textview in a rounded rectangle
• Message status check icon ImageView within that same rectangle
• Message send time TextView outside the rounded rectangle and to its right.

When text is short, the whole layout should align itself to the right. When the text is long, message TextView is going to expand itself to the left and upon touching the left side of the screen, it expands to a new row.

The problem is: Rounded rectangle stretches to the whole screen regardless of the message being short or long although underlying FrameLayout width is set to wrap_content.

Here is an image of the problem:

The layout I am using is:

<RelativeLayout
    android:id="@+id/outer_rl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="8dp"
    android:paddingTop="8dp">

    <TextView
        android:id="@+id/text_message_time"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:textSize="10sp"
        app:showDate="@{message.postedAt}" />

    <RelativeLayout
        android:id="@+id/bubble_ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/text_message_time"
        android:background="@drawable/rounded_rectangle_bubble_sent"
        android:padding="8dp">

        <ImageView
            android:id="@+id/iv_check"
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:layout_alignParentRight="true"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="4dp"
            app:setStatusPng="@{message.status}" />

        <TextView
            android:id="@+id/messagetext_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="6dp"
            android:layout_marginTop="2dp"
            android:layout_toLeftOf="@id/iv_check"
            android:singleLine="false"
            android:text="@{message.messageText}"
            android:textColor="#ffffff" />

    </RelativeLayout>
</RelativeLayout>

The inner RelativeLayout named bubble_ll has its width equals wrap_content.

What I am expecting is:

• text_message_time TextView should be attached to the right of the screen due to its layout_alignParentEnd property set true.
• bubble_ll stands left of the text_message_time view, due to its layout_toLeftOf property set. And it should have a width of its contents.

I have tried other layouts such as Linear, ConstraintLayout etc.

The LinearLayout approach did not work, since the width is set to wrap_content for TextView always overlaps status info checks and message time make them disappear when the message in the TextView is long.

With ConstraintLayout I could not align bubble to stay still on the right. It stays on the center of the screen horizontally since it is constrained on both horizontal sides of the screen.

Any help will be appreciated.

Answer 1

I have come up with the following layout which is a combination of RelativeLayout and LinearLayout. I hope this serves your purpose. Please change the drawables and the ids if necessary.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/outer_rl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:padding="8dp">

    <TextView
        android:id="@+id/text_message_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/message_container"
        android:layout_alignParentRight="true"
        android:layout_margin="4dp"
        android:text="10:30 am"
        android:textSize="10sp" />

    <LinearLayout
        android:id="@+id/message_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"

        android:layout_toLeftOf="@+id/text_message_time"
        android:background="@android:color/holo_blue_dark"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/messagetext_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:padding="4dp"
            android:singleLine="false"
            android:text="You have a long message here. This is so long that it takes two lines inside the TextView. No wonder, now its taking three lines and now its four. How long this message can go? I now have that question!!!"
            android:textColor="@android:color/white" />

        <ImageView
            android:id="@+id/iv_check"
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:layout_centerVertical="true"
            android:layout_margin="8dp"
            android:src="@android:drawable/presence_online" />
    </LinearLayout>
</RelativeLayout>