Выровняйте окно чата слева от RecyclerView

Question

Я создаю приложение чата, и у меня все установлено на go, проблема в том, что когда я отображаю свой текст в RecyclerView, пузырь чата friend выравнивается, как текст, отправляемый пользователем. Как я могу выровнять его по левому краю окна просмотра? У меня есть 2 разных макета, по одному на каждый пузырь, и один переработчик.

Это фотография, объясняющая мою проблему:

И вот это own_message.xml:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:paddingEnd="15dp"
    android:paddingStart="60dp"
    android:clipToPadding="false">

    <TextView
        android:id="@+id/own_message_body"
        style="@style/ChatBubble"
        android:background="@drawable/own_message"
        tools:text="This is my own message, hope it is okay.">
    </TextView>

</RelativeLayout>

И others_message.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:paddingStart="15dp"
    android:paddingTop="10dp"
    android:paddingEnd="60dp"
    android:paddingBottom="10dp">


    <TextView
        android:id="@+id/others_message_body"
        style="@style/ChatBubble"
        android:background="@drawable/others_message"
        tools:text="Hey! I am a stranger, i'm chatting with you right now! :)" />

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignTop="@+id/others_message_body"
        android:layout_alignBottom="@+id/others_message_body"
        android:layout_marginStart="10dp"
        android:layout_toEndOf="@+id/others_message_body"
        android:contentDescription="@string/user_avatar"
        app:srcCompat="@drawable/ic_user_avatar">

    </ImageView>

</RelativeLayout>

И, если это необходимо, это то, где я называю свой адаптер:

val layoutManager = LinearLayoutManager(applicationContext, RecyclerView.VERTICAL, false)
                binding.recyclerViewChat.layoutManager = layoutManager
                binding.recyclerViewChat.setHasFixedSize(true)
                val adapter = ChatAdapter(messages)
                binding.recyclerViewChat.adapter = adapter

Как выровнять пузырьки чата друзей слева от адаптера?

Answer 1

Оба ваших макета выровнены по правому краю. Вы хотите, чтобы others_message.xml был выровнен по левому краю.

Вы хотите, чтобы ваш ImageView был выровнен по start из parent. И затем, вы хотите, чтобы TextView был выровнен с end того ImageView.

Поэтому вы захотите сделать следующее:

1. Замените android:layout_toEndOf="@+id/others_message_body" на android:layout_alignParentStart="true" в ImageView
2. Дайте ImageView id, например, android:id="@+id/imageViewId"
3. Выровняйте TextView до конца ImageView, добавив android:layout_alignEnd="@id/imageViewId"

Окончательный результат others_message.xml должен выглядеть примерно так:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:paddingStart="15dp"
    android:paddingTop="10dp"
    android:paddingEnd="60dp"
    android:paddingBottom="10dp">


    <TextView
        android:id="@+id/others_message_body"
        style="@style/ChatBubble"
        android:background="@drawable/others_message"
        android:layout_alignEnd="@id/imageViewId"
        tools:text="Hey! I am a stranger, i'm chatting with you right now! :)" />

    <ImageView
        android:id="@+id/imageViewId"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignTop="@id/others_message_body"
        android:layout_alignBottom="@id/others_message_body"
        android:layout_marginStart="10dp"
        android:layout_alignParentStart="true"
        android:contentDescription="@string/user_avatar"
        app:srcCompat="@drawable/ic_user_avatar">

    </ImageView>

</RelativeLayout>