androidtextviewandroid-relativelayoutandroid-wrap-content

RelativeLayout matching parent although it shouldn't


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

This message layout should contain:

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:

enter image description here

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:

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.


Solution

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