Chat Layout -Flip the side of my message

Asked

Viewed 267 times

0

So I’m starting now to do chat activity have no code yet, more thinking the process came to me a question... Practically the way I will do All messages sent will be on one side only, what I want is for it to be the same as Whatsapp or other numerous message apk around, All incoming messages stay on the left side and my message on the right side.

*I’m using firebase.

  • for me, the most certain thing would be that this chat is a webview, Dae, when you already have access to the typed texts, logically you will have to know which user is sending and which is receiving, Dae, as is a webview, Voce works with <div class='sender' style='text-align: right;'> and <div class='receiver' style='text-align: leftt;'>, or as you wish.

1 answer

2


Well, I did it this way:
Using a Recyclerview, I made two Viewholders with their respective xml layouts for the messages (For example, Viewholdermensagemright and Viewholdermensagemesquerda). And, when linking the data (in onBindViewHolder), you should find some way to identify which message is yours and which message is from other people (you can compare Ids, etc)...

public class RecyclerViewChat extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private List<Mensagem> mensagemList;
    private Context context;
    private Usuario usuario;

    private static final int OWN_MESSAGE = 0;
    private static final int OTHERS_MESSAGE = 1;

    public RecyclerViewChat(List<Mensagem> mensagemList, Context context, Usuario usuario) {
        this.mensagemList = mensagemList;
        this.context = context;
        this.usuario = usuario;
    }

    @Override
    public int getItemViewType(int position) {
        // Comparação para saber se é a msg do user ou dos outros...No caso eu usei o nome dele, mas pode usar o que quiser
        if(mensagemList.get(position).getName().equals(usuario.getName())){
            return OWN_MESSAGE;
        } else {
            return OTHERS_MESSAGE;
        }
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(viewType==OWN_MESSAGE){
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.adapter_chat_right, parent, false);
            return new RightChatViewHolder(v);
        } else {
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.adapter_chat_left, parent, false);
            return new LeftChatViewHolder(v);
        }
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

        // left = dos outros
        if(holder instanceof LeftChatViewHolder){

            ((LeftChatViewHolder)holder).msg = mensagemList.get(position);
            ((LeftChatViewHolder)holder).userName.setText(mensagemList.get(position).getName());
            ((LeftChatViewHolder)holder).message.setText(mensagemList.get(position).getMessage());

            // right = sua msg
        } else if(holder instanceof RightChatViewHolder){
            ((RightChatViewHolder)holder).msg = mensagemList.get(position);
            ((RightChatViewHolder)holder).userName.setText(mensagemList.get(position).getName());
            ((RightChatViewHolder)holder).message.setText(mensagemList.get(position).getMessage());
        }

    }

    @Override
    public int getItemCount() {
        return mensagemList.size();
    }

    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);
    }

    public static class LeftChatViewHolder extends RecyclerView.ViewHolder{

        private TextView userName;
        private TextView message;

        private Mensagem msg;

        public LeftChatViewHolder(View itemView) {
            super(itemView);

            userName = (TextView) itemView.findViewById(R.id.chat_adapter_left_username);
            message = (TextView) itemView.findViewById(R.id.chat_adapter_left_mensagem);

        }
    }

    public static class RightChatViewHolder extends RecyclerView.ViewHolder{

        private TextView userName;
        private TextView message;

        private Mensagem msg;

        public RightChatViewHolder(View itemView) {
            super(itemView);

            userName = (TextView) itemView.findViewById(R.id.chat_adapter_right_username);
            message = (TextView) itemView.findViewById(R.id.chat_adapter_right_mensagem);

        }
    }
    // add um novo objeto mensagem...
    public void setNewMessage(Mensagem message){
        if(mensagemList==null){
            mensagemList = new ArrayList<>();
        }
        this.mensagemList.add(message);
        this.notifyDataSetChanged();
    }
     // pega a posição da ultima mensagem
     public Integer lastPos(){
        return mensagemList.size()-1;
    }

}

Don’t forget to use one recyclerView.scrollToPosition(adapter.lastPos()); in Activity whenever you add a new message where the lastPos method finds the last position of the message listing (and recyclerView is the object of type Recyclerview and Adapter is an object of type Recyclerviewchat that I passed you) and finally gives an automatic scroll to it... It’s to make things easier.

  • I understand, I added that I am using firebase, as I have not yet reached this part I will leave the question open before giving Accepted in yours,!

  • You will send the list of messages in the constructor of this class that I passed... It will not change anything. You can test and create messages as objects generated by java even for test purposes only...?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.