如何让消息出现在不同的侧面？

Question

I make a chat app using a video tutorial, but this tutorial does not show how to make messages from different people appear on different sides. The sender and receiver see all messages on the left. Could you please give some advices on this? Thanks in advance.

Now it looks like this

Main code

public class MainActivity extends AppCompatActivity {

private static int SIGN_IN_CODE=1;
private RelativeLayout activity_main;
private FirebaseListAdapter<Message> adapter;
private FloatingActionButton sendBtn;

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if(requestCode==SIGN_IN_CODE) {
           if(requestCode == RESULT_OK) {
               Snackbar.make(activity_main, "You are authorized", Snackbar.LENGTH_LONG).show();
               displayAllMessages();
               } else {
                 Snackbar.make(activity_main, "You are not authorized", Snackbar.LENGTH_LONG).show();
                 finish();
           }
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        activity_main=findViewById(R.id.activity_main);
        sendBtn = findViewById(R.id.btnSend);
        sendBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                EditText textField = findViewById(R.id.messageField);
                if(textField.getText().toString().equals(""))
                    return;
                FirebaseDatabase.getInstance().getReference().push().setValue(
                        new Message(
                                FirebaseAuth.getInstance().getCurrentUser().getEmail(),
                        textField.getText().toString()));
                textField.setText("");
            }
        });

        //Пользователь ещё не авторизован
        if (FirebaseAuth.getInstance().getCurrentUser()==null)
            startActivityForResult(AuthUI.getInstance().createSignInIntentBuilder().build(), SIGN_IN_CODE);
        //Пользователь авторизован
        else {
            Snackbar.make(activity_main, "You are authorized", Snackbar.LENGTH_LONG).show();
            displayAllMessages();
        }
    }

    @Override
    protected void onStart() {
        super.onStart();
        adapter.startListening();
    }

    private void displayAllMessages() {
        ListView listOfMessages = findViewById(R.id.list_of_messages);
        FirebaseListOptions<Message> options =
                new FirebaseListOptions.Builder<Message>()
                        .setQuery(FirebaseDatabase.getInstance().getReference(), Message.class)
                        .setLayout(R.layout.list_item)
                        .build();
        adapter = new FirebaseListAdapter<Message>(options){
            @Override
            protected void populateView(View v, Message model, int position) {
                TextView mess_user, mess_time;
                BubbleTextView mess_text;
                mess_user = v.findViewById(R.id.message_user);
                mess_time = v.findViewById(R.id.message_time);
                mess_text = v.findViewById(R.id.message_text);
                mess_user.setText(model.getUserName());
                mess_text.setText(model.getTextMessage());
                mess_time.setText(DateFormat.format("dd-MM-yyyy HH:mm:ss", model.getMessageTime()));
            }
        };
        listOfMessages.setAdapter(adapter);
    }
    @Override
    protected void onStop() {
        super.onStop();
        adapter.stopListening();
    }
}

Message Class

public class Message {
    private String UserName;
    private String TextMessage;
    private long MessageTime;

    public Message() {}
    public Message (String UserName, String TextMessage){
        this.UserName = UserName;
        this.TextMessage = TextMessage;

        this.MessageTime = new Date().getTime();
    }

    public String getUserName() {
        return UserName;
    }

    public void setUserName(String userName) {
        UserName = userName;
    }

    public String getTextMessage() {
        return TextMessage;
    }

    public void setTextMessage(String textMessage) {
        TextMessage = textMessage;
    }

    public long getMessageTime() {
        return MessageTime;
    }

    public void setMessageTime(long messageTime) {
        MessageTime = messageTime;
    }
}

Main XML

<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="match_parent"
tools:context=".MainActivity"
android:id="@+id/activity_main">

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/btnSend"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:src="@drawable/ic_send_button"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    app:fabSize="normal">
</com.google.android.material.floatingactionbutton.FloatingActionButton>

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/text_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:layout_toLeftOf="@id/btnSend"
    >
    <EditText
        android:id="@+id/messageField"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint=" Message..."
        />
</com.google.android.material.textfield.TextInputLayout>

<ListView
    android:id="@+id/list_of_messages"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/text_layout"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:divider="@android:color/transparent"
    android:dividerHeight="12dp"
    android:layout_marginBottom="5dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:stackFromBottom="true"
    android:transcriptMode="alwaysScroll">
</ListView>

</RelativeLayout>

XML for the message bubbles

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:id="@+id/message_user"
        android:textStyle="normal|bold"
    />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:id="@+id/message_time"
    />

    <com.github.library.bubbleview.BubbleTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:id="@+id/message_text"
        android:layout_marginTop="9dp"
        android:layout_below="@id/message_user"
        android:textSize="18sp"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="#fff"
        android:padding="10dp"
        app:angle="10dp"
        app:arrowWidth="8dp"
        app:arrowHeight="10dp"
        app:arrowPosition="10dp"
        app:bubbleColor="#03dac5"
    />

</RelativeLayout>

Answer 1

Try adding layout_gravity attribute in your BubbleTextView when you need this like this:

android:layout_gravity="right"

Answer 2

Every user will have a unique email - Let say here in the example - d@mail.ru is your email. You need to add user logic to dynamically check to decide whether you want a bubble test layout to be LEFT or RIGHT.

Update the message bubble layout.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/parentLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:id="@+id/message_user"
        android:textStyle="normal|bold"
    />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:id="@+id/message_time"
    />

    <com.github.library.bubbleview.BubbleTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:id="@+id/message_text"
        android:layout_marginTop="9dp"
        android:layout_below="@id/message_user"
        android:textSize="18sp"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="#fff"
        android:padding="10dp"
        app:angle="10dp"
        app:arrowWidth="8dp"
        app:arrowHeight="10dp"
        app:arrowPosition="10dp"
        app:bubbleColor="#03dac5"
    />

</RelativeLayout>

Adapter code:- you can update as you need either LEFT or RIGHT.

       adapter = new FirebaseListAdapter<Message>(options){
                    @Override
                    protected void populateView(View v, Message model, int position) {
                        TextView mess_user, mess_time;
                        BubbleTextView mess_text;
                        RelativeLayout Layout = v.findViewById(R.id.parentlayout);
                        mess_user = v.findViewById(R.id.message_user);
                        mess_time = v.findViewById(R.id.message_time);
                        mess_text = v.findViewById(R.id.message_text);
                        mess_user.setText(model.getUserName());
                        mess_text.setText(model.getTextMessage());
                        mess_time.setText(DateFormat.format("dd-MM-yyyy HH:mm:ss", model.getMessageTime()));

                       if(!model.getUserName().equals("d@mail.ru")) {
                       mess_text.setGravity(Gravity.LEFT)
                      } else {
                        mess_text.setGravity(Gravity.RIGHT)
                     }
               }
          };

Check this link as a reference - https://github.com/rpadma/Trip-Planner/blob/master/app/src/main/java/com/etuloser/padma/rohit/homework09a/ChatAdapter.java