Message List View

LAST EDIT May 17 2021

MessageListView renders a list of messages. It implements all the features you expect from a chat:

  • Displaying text, images, and attachments

  • Rich URL previews

  • Editing, copying, flagging, and deleting messages

  • Opening and creating threads

  • Reactions

  • Read state

  • Replies

  • Muting and blocking users

  • Custom attachments

MessageListView in light mode

MessageListView, like our other components, supports dark mode:

MessageListView in dark mode

The example below shows how to use the MessageListView in your layout:

Displaying new messages


To display new messages in the view, use displayNewMessages:

This piece of code will show a simple message in the chat. One way to avoid handling the logic of getting new messages and calling displayNewMessages manually, it is possible to use the MessageListViewModel, as described in the next section.

Showing empty state


Show empty state:

Showing loading state


Show loading state:

Binding with a ViewModel


To handle the implementation for receiving new messages, showing loading state, pagination... and many other common behaviours, it is recommended to use MessageListViewModel. The following code shows how to connect the view and the ViewModel using bindView:

This will set the listeners and handlers on the message list, forwarding everything to the ViewModel. It is also possible to set these manually: the options for listeners and handlers are described in the next sections.



MessageListView provides multiple methods for handling user interactions handling, that includes different clicks:

A full list of available listeners to set can be found here.



It is also possible to change general behaviour by using handlers. For example:

The full list of available handlers is available here.



Many properties about this view, like colours, padding and margins, can be changed via XML, the list of attributes can be found here.

Some other customizations can be done programmatically. Like:

Using Transform Style


The view and its view holders styles can be configured programmatically using TransformStyle.messageListStyleTransformer and TransformStyle.messageListItemStyleTransformer (a list of supported customizations can be found here and here):

NOTE: The style transformer should be set before the view is rendered to make sure that the new style was applied.

New Messages Behaviour


It is possible to have 2 behaviours for when new messages arrive, scroll to the bottom of the screen when a new message arrives (SCROLL_TO_BOTTOM), or count the number of new messages that arrived (COUNT_UPDATE). They can be set using the XML, as described in the section above, or using setNewMessagesBehaviour:

Date time formatter


It is necessary to implement the interface


Format of HH:mm



To change the way messages are presented to the user, it is necessary to set the MessageListItemViewHolderFactory, which will provide a different kind of messages accordingly to the message type:

Filter messages


It is possible to filter messages. The predicate must be set using setMessageListItemPredicate, and the messages will be filtered once they arrive:

Changing behaviour for end region reached


It is possible to set a listener for when the end region was reached:

NOTE: Please be aware that if you're using the ViewModel and override the EndRegionReachedHandler you have to handle pagination, otherwise pagination won't work.

Custom attachments


By default, the message list view can show a message with text and attachments. The kind of attachments can be:

  • Media attachments (pictures, gifs and so on)

  • File attachments (different non-media files)

  • Some links (previews - youtube as an example)

  • Combinations of media/files + links attachments

Attachments content is placed above the text of a message. If you'd like to draw any of these types in the custom way you're able to do this by using custom AttachmentViewFactory.

This factory lets you override content for attachments in the message list. For example, if you want to customize only your particular attachments and keep default behaviour for other attachments you can do the following: