Chat layout left and right align with wrapped background

Question

Im in developing chat view layout. and trying to left and right align the message and time according to sender and user. each message and time wrapped in rounded corner background view. Here is my layout view.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/senderHead"
        android:layout_height="40dp"
        android:layout_width="40dp"
        android:text="Sender"
        android:textColor="#fff"
        android:textSize="16sp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"

        />

    <RelativeLayout
        android:id="@+id/chatLayout"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/chat_background_rounded">

            <TextView
                android:text="Hi John Are you available?"
                android:inputType="textMultiLine"
                android:id="@+id/txtMessage"
                android:textSize="16sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:textColor="#FF000000" />

            <TextView
                android:layout_below="@id/txtMessage"
                android:text="12:45PM"
                android:id="@+id/txtTime"
                android:textSize="12sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="5dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:textColor="@color/colorSecondaryText" />
    </RelativeLayout>


    <TextView
        android:id="@+id/userHead"
        android:layout_height="40dp"
        android:layout_width="40dp"
        android:text="User"
        android:textColor="#fff"
        android:textSize="16sp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        />

</RelativeLayout>

And in the coding i do the alignment.

  RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);

if(user){
      txtMessage.setGravity(Gravity.RIGHT);
      txtTime.setGravity(Gravity.RIGHT);
      params.addRule(RelativeLayout.LEFT_OF, R.id.userHead);
      params.addRule(RelativeLayout.START_OF, R.id.userHead);
}else{
     txtMessage.setGravity(Gravity.START);
     txtTime.setGravity(Gravity.START);
     params.addRule(RelativeLayout.RIGHT_OF, R.id.senderHead);
     params.addRule(RelativeLayout.END_OF, R.id.senderHead);
}

chatBgLayout.setLayoutParams(params);

but im not getting perfect layout because userHead side message and time is not aligned to right perfectly. if i put those Textview layouts width to match_parent then it works fine. but in that case bubble not wrapping to text because it is match parent. also longer text takes device width. i want it to limit. can some one help me on this?

im expecting this kind of chat view.

Answer 1

So check the below code i replaced the relative layout with linear layout.check whether it may solve your problem

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
    android:id="@+id/senderHead"
    android:layout_height="40dp"
    android:layout_width="40dp"
    android:text="Sender"
    android:textColor="#fff"
    android:textSize="16sp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"

    />

<LinearLayout
    android:id="@+id/chatLayout"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/chat_background_rounded"
    android:layout_toLeftOf="@+id/userHead"
    android:orientation="vertical">

    <TextView
        android:text="Hi John Are you available?"
        android:inputType="textMultiLine"
        android:id="@+id/txtMessage"
        android:textSize="16sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textColor="#FF000000" />

    <TextView
        android:layout_below="@id/txtMessage"
        android:text="12:45PM"
        android:id="@+id/txtTime"
        android:textSize="12sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textColor="@color/colorSecondaryText" 
        android:layout_gravity="end"/>
</LinearLayout>


<TextView
    android:id="@+id/userHead"
    android:layout_height="40dp"
    android:layout_width="40dp"
    android:text="User"
    android:textColor="#fff"
    android:textSize="16sp"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    />

Answer 2

I ended up using two views for sender and receiver. that way i can hide and show layout for each easy way.