Skip to content Skip to sidebar Skip to footer

How To Auto Scroll Up The Chat Messages (using Recyclerview Instead Of Listview) Above The Softkeypad Whenever Keypad Pop Ups?

Like in chat applications whenever we want to send messages soft keypad pop ups which also auto scroll the last seen messages to top of the soft keypad provided that nothing is hid

Solution 1:

With RecyclerView you can achieve this as follows:

LinearLayoutManagerlinearLayoutManager=newLinearLayoutManager(this);
linearLayoutManager.setReverseLayout(true);
recyclerView.setLayoutManager(linearLayoutManager);

This block of code will tell the RecyclerView to scroll relative to the bottom of the list but also it shows the messages in reverse order so in your code if you are getting the messages from database, read them from the last message like this:

Cursorc= ...;
c.moveToLast();
do{
//your code which gets messages from cursor...
}while(c.moveToPrevoius());

and when you want to add a new message to the list just add them like this:

//ArrayList messages
messages.add(0, message);

Solution 2:

How I handle with this is very simple, to achieve one good behaviour, similar to Whatsapp or other popular chats.

At first, set the LinearLayoutManager like this.

newLinearLayoutManager(this.getContext(), LinearLayoutManager.VERTICAL, true);
 chatLayoutManager.setStackFromEnd(true);

When messages begin to overflow the RecyclerView at the bottom, needs to set the current position to 0, to achieve this, a simple interface works like a charm, to warning when the RecyclerView.Adapter has rendered the last message.

publicinterfaceOnLastItemRendered{

    voidlastItemRendered();

}

Pass the interface implementation from the activity/fragment to de RecyclerView.Adapter to call scrollToPosition in the RecyclerView.

new ChatMessageListAdapter(
    context, user, lastOldMessages,
    new OnLastItemRendered() {

        @Override
        publicvoidlastItemRendered() {

            ContainerFragment.this.myRecyclerViewToChat.scrollToPosition(0);
    }
});

And finally, if want to perform animations in the RecyclerView, implements one method to add the message in the RecyclerView.Adapter calling at the end to notifyItemInserted method.

public void add(ChatMessage chatMessage) {

    if (this.chatMessages == null) {

        this.chatMessages = new ArrayList<ChatMessage>();
    }

    this.chatMessages.add(chatMessage);

    Collections.sort(this.chatMessages, this.orderChatMessagesComparator);

    this.notifyItemInserted(0);

    this.onLastItemRendered.lastItemRendered();
}

And, for the X messages loaded at the beginning, in the onBindViewHolder.

@OverridepublicvoidonBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    finalChatMessagecurrentMessage=this.chatMessages.get(position);

    ... //Do your stuff.if (position == 0) this.onLastItemRendered.lastItemRendered();
}

Work done.

Solution 3:

You can detect the focus on the edit text, and if your editText has focus, scroll your recyclerView list to the last element.

privateOnFocuseChangeListenerfocuseListener=newOnFocuseChangeListener(){
  publicvoidonFocusChange(View v, boolean hasFocus){
            if(hasFocus){

            // Scroll down to the last element of the list
            recyclerView.scrollToPosition(sizeOfYourList);

          } else {
              focusedView  = null;
        }
    }
}

Similarly use scrollToPosition () when you click on your send button or where you want to show the last element of the list.

Post a Comment for "How To Auto Scroll Up The Chat Messages (using Recyclerview Instead Of Listview) Above The Softkeypad Whenever Keypad Pop Ups?"