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:

1
2
3
4
<com.getstream.sdk.chat.view.MessageListView 
    android:id="@+id/messageList" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" />

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

1
2
3
4
5
// Get a ViewModel instance 
val messageListViewModel: MessageListViewModel by viewModels { ChannelViewModelFactory(channel.cid) } 
 
// Bind ViewModel and View together 
messagesViewModel.bindView(messageListView, lifecycleOwner)

1
2
3
4
5
6
7
// Get a ViewModel instance 
ChannelViewModelFactory factory = new ChannelViewModelFactory(channel.getCid()); 
MessageListViewModel viewModel = new ViewModelProvider(this, factory) 
        .get(MessageListViewModel.class); 
 
// Bind ViewModel and View together 
MessageListViewModelBinding.bind(viewModel, messageListView, lifecycle);

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
MessageListView messageList = findViewById(R.id.messageList); 
messageList.setBubbleHelper(new MessageListView.BubbleHelper() { 
    @Override 
    public Drawable getDrawableForMessage(Message message, Boolean mine, List<MessageListItem.Position> positions) { 
        return null; 
    } 
 
    @Override 
    public Drawable getDrawableForAttachment(Message message, Boolean mine, List<MessageListItem.Position> positions, Attachment attachment) { 
        return null; 
    } 
 
    @Override 
    public Drawable getDrawableForAttachmentDescription(Message message, Boolean mine, List<MessageListItem.Position> positions) { 
        return null; 
    } 
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
val messageList = findViewById(R.id.messageList) 
messageList.setBubbleHelper(object: MessageListView.BubbleHelper { 
    override fun getDrawableForAttachment( 
        message: Message, 
        mine: Boolean, 
        positions: List<MessageListItem.Position>, 
        attachment: Attachment 
    ): Drawable { 
        TODO("not implemented") 
    } 
 
    override fun getDrawableForAttachmentDescription( 
        message: Message, 
        mine: Boolean, 
        positions: List<MessageListItem.Position> 
    ): Drawable { 
        TODO("not implemented") 
    } 
 
    override fun getDrawableForMessage( 
        message: Message, 
        mine: Boolean, 
        positions: List<MessageListItem.Position> 
    ): Drawable { 
        TODO("not implemented") 
    } 
})

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<com.getstream.sdk.chat.view.MessageListView 
        android:id="@+id/messageListView" 
        android:layout_width="match_parent" 
        app:streamMessageDateShow="true" 
        android:clipToPadding="false" 
        android:paddingBottom="@dimen/padding_medium" 
        app:streamNewMessagesBehaviour="count_new_messages" 
        app:streamDefaultButtonEnabled="false" 
        > 
 
        <Button 
            android:id="@+id/scrollBtn" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_marginBottom="10dp" 
            android:animateLayoutChanges="true" 
            android:text="Scroll - 1 New message" 
            app:layout_constraintBottom_toBottomOf="parent" 
            app:layout_constraintEnd_toEndOf="parent" 
            app:layout_constraintStart_toStartOf="parent" 
            /> 
             
</com.getstream.sdk.chat.view.MessageListView>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
messageListView.setScrollButtonBehaviour(new MessageListView.ScrollButtonBehaviour() { 
    @Override 
    public void userScrolledUp() { 
        scrollBtn.setVisibility(View.VISIBLE); 
    } 
     
    @Override 
    public void userScrolledToTheBottom() { 
        scrollBtn.setVisibility(View.GONE); 
    } 
     
    @Override 
    public void onUnreadMessageCountChanged(int count) { 
        if (count == 0) { 
            scrollBtn.setText("Scroll"); 
        } else if (count == 1) { 
            scrollBtn.setText("Scroll - 1 New Message"); 
        } else { 
            scrollBtn.setText("Scroll - " + count + " New Messages"); 
        } 
    } 
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
messageListView.setScrollButtonBehaviour(object : MessageListView.ScrollButtonBehaviour { 
    override fun userScrolledUp() { 
        scrollBtn.visibility = View.VISIBLE 
    } 
 
    override fun userScrolledToTheBottom() { 
        scrollBtn.visibility = View.GONE 
    } 
 
    override fun onUnreadMessageCountChanged(count: Int) { 
        when (count) { 
            0 -> scrollBtn.text = "Scroll" 
            1 -> scrollBtn.text = "Scroll - 1 New Message" 
            else -> scrollBtn.text = "Scroll - $count New Messages" 
        } 
    } 
})