Message List View

Last Edit: Sep 22 2020

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:


<com.getstream.sdk.chat.view.MessageListView
    android:id="@+id/messageList"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:background="#f3f5f8">
                    

To render the list of Messages you need to connect the view to the ChannelViewModel:


// instantiate the viewmodel
val channel = client.channel(channelType, channelID)
val viewModelFactory = ChannelViewModelFactory(application, channel)
val viewModel = ViewModelProvider(this, viewModelFactory).get(ChannelViewModel::class.java)
// connect the viewmodel and the MessageListView
val messageList = findViewById(R.id.messageList)
messageList.setViewModel(viewModel, this)
                    

// create the channel view model
Channel channel = client.channel(channelType, channelID);
ChannelViewModelFactory viewModelFactory = new ChannelViewModelFactory(this.getApplication(), channel);
viewModel = new ViewModelProvider(this, viewModelFactory).get(ChannelViewModel.class);
// set the viewmodel on the ChannelHeaderView
MessageListView messageList = findViewById(R.id.messageList);
messageList.setViewModel(viewModel, this);
                    

The viewModel 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

Customizing the message list using attributes

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

Avatar

Name Type Description Default Optional
app:streamAvatarWidth dimension 32dp
app:streamAvatarHeight dimension 32dp
app:streamAvatarBorderWidth dimension 3dp
app:streamAvatarBorderColor color WHITE
app:streamAvatarBackGroundColor color stream_gray_dark
app:streamAvatarTextSize dimension 14sp
app:streamAvatarTextColor color WHITE
app:streamAvatarTextStyle normal, bold, italic bold
app:streamAvatarTextFont reference -
app:streamAvatarTextFontAssets string -

Read State

Name Type Description Default Optional
app:streamShowReadState boolean true
app:streamReadStateAvatarWidth dimension 14dp
app:streamReadStateAvatarHeight dimension 14dp
app:streamReadStateTextSize dimension 8sp
app:streamReadStateTextColor color BLACK
app:streamReadStateTextStyle normal, bold, italic bold
app:streamReadStateTextFont reference -
app:streamReadStateTextFontAssets string -

Reactions

Name Type Description Default Optional
app:streamReactionEnabled boolean true
app:streamrReactionViewBgDrawable reference -
app:streamReactionViewBgColor color #292929
app:streamReactionViewEmojiSize dimension 12sp
app:streamReactionViewEmojiMargin dimension 1dp
app:streamReactionInputbgColor color #292929
app:streamReactionInputEmojiSize dimension 27sp
app:streamReactionInputEmojiMargin dimension 5dp

Message

Name Type Description Default Optional
app:streamMessageTextSizeMine dimension 15sp
app:streamMessageTextSizeTheirs dimension 15sp
app:streamMessageTextColorMine color BLACK
app:streamMessageTextColorTheirs color BLACK
app:streamMessageTextStyleMine normal, bold, italic normal
app:streamMessageTextStyleTheirs normal, bold, italic normal
app:streamMessageTextFontMine reference -
app:streamMessageTextFontTheirs reference -
app:streamMessageTextFontMineAssets string -
app:streamMessageTextFontTheirsAssets string -
app:streamMessageBubbleDrawableMine reference -
app:streamMessageBubbleDrawableTheirs reference -
app:streamMessageTopLeftCornerRadiusMine dimension 16dp
app:streamMessageTopRightCornerRadiusMine dimension 16dp
app:streamMessageBottomRightCornerRadiusMine dimension 2dp
app:streamMessageBottomLeftCornerRadiusMine dimension 16dp
app:streamMessageTopLeftCornerRadiusTheirs dimension 16dp
app:streamMessageTopRightCornerRadiusTheirs dimension 16dp
app:streamMessageBottomRightCornerRadiusTheirs dimension 16dp
app:streamMessageBottomLeftCornerRadiusTheirs dimension 2dp
app:streamMessageBackgroundColorMine color #0D000000
app:streamMessageBackgroundColorTheirs color WHITE
app:streamMessageBorderColorMine color #14000000
app:streamMessageBorderColorTheirs color #14000000
app:streamMessageBorderWidthMine dimension 1dp
app:streamMessageBorderWidthTheirs dimension 1dp
app:streamMessageLinkTextColorMine color -
app:streamMessageLinkTextColorTheirs color -

Attachment

Name Type Description Default Optional
app:streamAttachmentBackgroundColorMine color streamMessageBackgroundColorMine
app:streamAttachmentBackgroundColorTheirs color streamMessageBackgroundColorTheirs
app:streamAttachmentBorderColorMine color streamMessageBorderColorMine
app:streamAttachmentBorderColorTheirs color streamMessageBorderColorTheirs
app:streamAttachmentTitleTextSizeMine dimension 13sp
app:streamAttachmentTitleTextSizeTheirs dimension 13sp
app:streamAttachmentTitleTextColorMine color #026DFE
app:streamAttachmentTitleTextColorTheirs color #026DFE
app:streamAttachmentTitleTextStyleMine normal, bold, italic bold
app:streamAttachmentTitleTextStyleTheirs normal, bold, italic bold
app:streamAttachmentTitleTextFontMine reference -
app:streamAttachmentTitleTextFontTheirs reference -
app:streamAttachmentTitleTextFontAssetsMine string -
app:streamAttachmentTitleTextFontAssetsTheirs string -
app:streamAttachmentDescriptionTextSizeMine dimension 11sp
app:streamAttachmentDescriptionTextSizeTheirs dimension 11sp
app:streamAttachmentDescriptionTextColorMine color stream_gray_dark
app:streamAttachmentDescriptionTextColorTheirs color stream_gray_dark
app:streamAttachmentDescriptionTextStyleMine normal, bold, italic normal
app:streamAttachmentDescriptionTextStyleTheirs normal, bold, italic normal
app:streamAttachmentDescriptionTextFontMine reference -
app:streamAttachmentDescriptionTextFontTheirs reference -
app:streamAttachmentDescriptionTextFontAssetsMine string -
app:streamAttachmentDescriptionTextFontAssetsTheirs string -
app:streamAttachmentFileSizeTextSizeMine dimension 12sp
app:streamAttachmentFileSizeTextSizeTheirs dimension 12sp
app:streamAttachmentFileSizeTextColorMine color stream_gray_dark
app:streamAttachmentFileSizeTextColorTheirs color stream_gray_dark
app:streamAttachmentFileSizeTextStyleMine normal, bold, italic bold
app:streamAttachmentFileSizeTextStyleTheirs normal, bold, italic bold
app:streamAttachmentFileSizeTextFontMine reference -
app:streamAttachmentFileSizeTextFontTheirs reference -
app:streamAttachmentFileSizeTextFontAssetsMine string -
app:streamAttachmentFileSizeTextFontAssetsTheirs string -

Date Separator

Name Type Description Default Optional
app:streamDateSeparatorDateTextSize dimension 12sp
app:streamDateSeparatorDateTextColor color stream_gray_dark
app:streamDateSeparatorDateTextStyle normal, bold, italic bold
app:streamDateSeparatorDateTextFont reference -
app:streamDateSeparatorDateTextFontAssets string -
app:streamDateSeparatorLineWidth dimension 1dp
app:streamDateSeparatorLineColor color stream_gray_dark
app:streamDateSeparatorLineDrawable reference -

Message details

Name Type Description Default Optional
app:streamMessageUserNameTextSize dimension 11sp
app:streamMessageUserNameTextColor color stream_gray_dark
app:streamMessageUserNameTextStyle normal, bold, italic normal
app:streamMessageUserNameTextFont reference -
app:streamMessageUserNameTextFontAssets string -
app:streamMessageDateTextSizeMine dimension 11sp
app:streamMessageDateTextSizeTheirs dimension 11sp
app:streamMessageDateTextColorMine color stream_gray_dark
app:streamMessageDateTextColorTheirs color stream_gray_dark
app:streamMessageDateTextStyleMine normal, bold, italic normal
app:streamMessageDateTextStyleTheirs normal, bold, italic normal
app:streamMessageDateTextFontMine reference -
app:streamMessageDateTextFontAssetsMine string -
app:streamUserNameShow boolean true
app:streamMessageDateShow boolean true

Threads

Name Type Description Default Optional
app:streamThreadEnabled boolean true

Customizing the message list - BubbleHelper

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 in 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.


MessageListView messageList = findViewById(R.id.messageList);
messageList.setBubbleHelper(new MessageListView.BubbleHelper() {
    @Override
    public Drawable getDrawableForMessage(Message message, Boolean mine, List<MessageViewHolderFactory.Position> positions) {
        return null;
    }

    @Override
    public Drawable getDrawableForAttachment(Message message, Boolean mine, List<MessageViewHolderFactory.Position> positions, Attachment attachment) {
        return null;
    }

    @Override
    public Drawable getDrawableForAttachmentDescription(Message message, Boolean mine, List<MessageViewHolderFactory.Position> positions) {
        return null;
    }
});
                    

val messageList = findViewById(R.id.messageList)
messageList.setBubbleHelper(object: MessageListView.BubbleHelper {
    override fun getDrawableForAttachment(
        message: Message?,
        mine: Boolean?,
        positions: MutableList<MessageViewHolderFactory.Position>?,
        attachment: Attachment?
    ): Drawable {
        TODO("not implemented")
    }

    override fun getDrawableForAttachmentDescription(
        message: Message?,
        mine: Boolean?,
        positions: MutableList<MessageViewHolderFactory.Position>?
    ): Drawable {
        TODO("not implemented")
    }

    override fun getDrawableForMessage(
        message: Message?,
        mine: Boolean?,
        positions: MutableList<MessageViewHolderFactory.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.

Custom Attachment Type

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.

There are 4 steps for creating your own attachment type:

  1. Create a MessageViewHolderFactory

  2. Tell the MessageListView to use your custom MessageViewHolderFactory

  3. Implement an Attachment View Holder

  4. Create a custom layout for your Attachment View Holder

The Kotlin Chat Tutorial explains this in more detail.