Firebase的ListView聊天消息

Question

I have created an app which involves chatting with other people, and to make the chat activity more pleasing to the eye I created a ListView to change the UI of each message. When I send a message the first message appears and displays correctly but if I send another message it overrides the previous message in the listView instead of just adding another value to the list view, here's my code:

ChatActivty:

private void append_chat_conversation(DataSnapshot dataSnapshot) {
        for (DataSnapshot ds : dataSnapshot.getChildren()) {
            Log.e("Chat details: ", String.valueOf(ds));
            chat_username = dataSnapshot.child("username").getValue(String.class);
            chat_msg = dataSnapshot.child("message").getValue(String.class);

            Chat chat = new Chat(chat_username, chat_msg);
            ArrayList<Chat> chatList = new ArrayList<>();
            chatList.add(chat);

            chatListAdapter adapter = new chatListAdapter(this, R.layout.chat_message, chatList);
            mListView.setAdapter(adapter);
            Log.e("Chat username: ", "" + chat_username);
            Log.e("Chat message: ", "" + chat_msg);

        }
}

Chat List adapter:

public class chatListAdapter extends ArrayAdapter<Chat> {

    private Context mContext;
    int mResource;
    TextView usernameTV, messageTV;

    public chatListAdapter(Context context, int resource, ArrayList<Chat> objects) {
        super(context, resource, objects);
        mContext = context;
        mResource = resource;

    }

    @NonNull
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        String username = getItem(position).getUsername();
        String message = getItem(position).getMessage();

        Chat chat = new Chat(username, message);

        LayoutInflater inflater = LayoutInflater.from(mContext);
        convertView = inflater.inflate(mResource, parent, false);

        usernameTV = convertView.findViewById(R.id.username_chat);
        messageTV = convertView.findViewById(R.id.message_chat);

        usernameTV.setText(username);
        messageTV.setText(message);

        return convertView;
    }
}

I won't add the other bits of code (the getter and setters or the actual layout of the individual messages) because I don't think that's a problem. Let me know if you need anything else, I'm sure I'm doing something stupid here to make this happen,

Thanks, Nathan

EDIT:

I finally found out how to add to the listview without it overriding with this code:

private void append_chat_conversation(DataSnapshot dataSnapshot) {
        for (DataSnapshot ds : dataSnapshot.getChildren()) {
            Log.e("Chat details: ", String.valueOf(ds));
            chat_username = dataSnapshot.child("username").getValue(String.class);
            chat_msg = dataSnapshot.child("message").getValue(String.class);

            Chat chat = new Chat(chat_username, chat_msg);
            chatList.add(chat);
            Log.e("Chat username: ", "" + chat_username);
            Log.e("Chat message: ", "" + chat_msg);
        }
        adapter.notifyDataSetChanged();
    }

with the array list and adpater being a public variable at the top, however it still shows the message twice. I still need to find a fix for that. Thanks for the help

Answer 1

You can use a FirebaseListAdapter to display messages from firebase, and apply a custom layout to the messages in the list.

    FirebaseDatabase database = FirebaseDatabase.getInstance();
    Query messages = database.getReference("chatrooms").child(sessionId).child("messages");

    FirebaseListOptions<Message> options = new FirebaseListOptions.Builder<Message>().setQuery(messages, Message.class).setLayout(R.layout.message).build();

    ListView messageList = chatActivity.findViewById(R.id.message_list);
    adapter = new FirebaseListAdapter<Message>(options){
        @Override
        protected void populateView(View v, Message model, int position) {
            // Get references to the views of message.xml
            TextView messageText = v.findViewById(R.id.message_text);
            TextView messageUser = v.findViewById(R.id.message_user);
            TextView messageTime = v.findViewById(R.id.message_time);

            // Set their text
            messageText.setText(model.getMessageBody());
            messageUser.setText(model.getUser());

            // Format the date before showing it
            messageTime.setText(DateFormat.format("dd-MM-yyyy (HH:mm:ss)",
                    model.getTime()));
        }
    };

    messageList.setAdapter(adapter);
    adapter.startListening();

See more here: https://code.tutsplus.com/tutorials/how-to-create-an-android-chat-app-using-firebase--cms-27397

Answer 2

Try re-arrange like this:

private void append_chat_conversation(DataSnapshot dataSnapshot) {
    ArrayList<Chat> chatList = new ArrayList<>();
    for (DataSnapshot ds : dataSnapshot.getChildren()) {
        Log.e("Chat details: ", String.valueOf(ds));
        chat_username = dataSnapshot.child("username").getValue(String.class);
        chat_msg = dataSnapshot.child("message").getValue(String.class);

        Chat chat = new Chat(chat_username, chat_msg);
        chatList.add(chat);
        Log.e("Chat username: ", "" + chat_username);
        Log.e("Chat message: ", "" + chat_msg);
    }
    chatListAdapter adapter = new chatListAdapter(this, R.layout.chat_message, chatList);
    mListView.setAdapter(adapter);
}

Edited:

private void append_chat_conversation(DataSnapshot dataSnapshot) {
    chatListAdapter adapter = (chatListAdapter)mListView.getAdapter();

    chat_username = dataSnapshot.child("username").getValue(String.class);
    chat_msg = dataSnapshot.child("message").getValue(String.class);
    Log.e("Chat username: ", "" + chat_username);
    Log.e("Chat message: ", "" + chat_msg);
    Chat chat = new Chat(chat_username, chat_msg);

    adapter.add(chat);
    adapter.notifyDataSetChanged();
}

Answer 3

To solve this, simply use only the following lines of code:

private void append_chat_conversation(DataSnapshot dataSnapshot) {
        ArrayList<Chat> chatList = new ArrayList<>();
        for (DataSnapshot ds : dataSnapshot.getChildren()) {
            chatList.add(ds.getValue(Chat.class));
        }
        chatListAdapter adapter = new chatListAdapter(this, R.layout.chat_message, chatList);
        mListView.setAdapter(adapter);
}

The problem in your code is that your are creating a new instance of an ArrayList at every iteration, ending up having everytime only one item in the list.

Edit:

Seeing this, your database reference should look like this:

DatabaseReference rootRef = FirebaseDatabase.getInstance().getReference();
DatabaseReference keyRef = rootRef.child("matches").child("1").child("-LluNpbfFgzFclI7cdAS").child("messages");