Message List View

The message list renders a list of messages. It implements all the features you expect from a chat/message list view:

• Reactions

• Editing

• Typing indicators

• Read state

• Rich URL previews

• Threads

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

To render the list of messages you need to connect the view to the MessageListViewModel using MessageListViewModelBinding:

The view model provides the view with:

• The list of messages

• The ability to mark messages as read

• Pagination/ loading more content

• Keeping track if there are new messages (that are not shown since you're scrolled up)

• The current channel

• Edit message state

• Start thread state

• Button to scroll to the bottom.

• Count of new messages.

The following listeners can be set:

• setMessageClickListener

• setMessageLongClickListener

• setMessageRetryListener

• setAttachmentClickListener

• setReactionViewClickListener

• setUserClickListener

• setReadStateClickListener

• setOnStartThreadListener

The following handlers can be set:

• setEndRegionReachedHandler

• setLastMessageReadHandler

• setOnMessageEditHandler

• setOnMessageDeleteHandler

• setOnStartThreadHandler

• setOnMessageFlagHandler

• setOnSendGiphyHandler

• setOnMessageRetryHandler

The message list view exposes multiple methods which might be helpful if you decide not to use default view model but create your own controller instead:

• init()

• setScrollButtonBehaviour()

• setNewMessagesBehaviour()

• setScrollButtonBackgroundResource()

• setScrollButtonBackground()

• setScrollButtonIconResource()

• setScrollButtonIcon()

• setAttachmentViewHolderFactory()

• setMessageViewHolderFactory()

• setBubbleHelper()

• displayNewMessage()

• scrollToBottom()

• setLoadingView()

• setEmptyStateView()

You can use the following properties in your XML to change your MessageListView:

Message Bubbles can be quite complex in messaging apps. Many messaging apps will change the bubble layout based on:

• The message position in a group of messages (top, middle, bottom)

• The overall position of the message on the screen

• If the message is yours or written by someone else

• If the message has attachments

To allow you to customize the message bubble rendering we allow you to set your own message Bubble Helper. Here's an example of how to set a custom bubble helper.

For some messaging use cases, you'll run into the issue that you need to create many different drawables. One library that can help with that is DrawableToolbox which simplifies the programmatic creation of drawables.

You can customize the layout for a specific type of message or attachment. Example use cases include adding a form, a live location, a checkout flow, etc.

These are the steps for creating your own attachment type:

1. Implement an Attachment ViewHolder, with your custom layout

2. Create an AttachmentViewHolderFactory that creates instances of your ViewHolder

3. Tell the MessageListView to use your custom AttachmentViewHolderFactory

The Kotlin Chat Tutorial explains this in more detail.

Although it is possible to customize the default button, sometimes a user may want a completely different view.

As MessageListView extends from ConstraintLayout, any view can be inserted inside of it and used as the button to scroll to button and show the count of new messages.

Then the behaviour of the button can be set with the method setScrollButtonBehaviour implementing the interface MessageListView.ScrollButtonBehaviour, as an example: