Message Input View

LAST EDIT Feb 16 2021
This documentation is for the old stream-chat-android UI implementation. Check out MessageInputView in our new UI components for an updated version.

The MessageInputView is used to enter a chat message. It implements the following features:

  • Emoticons

  • Attachments

  • Slash Commands

  • Typing events

  • Editing messages

  • Threads

  • Mentions

Here's an example layout:

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

MessageInputView comes together with MessageInputViewModel which handles sending different types of messages out of the box. The easiest way of initializing message input is binding it with the view model, using bindView() extension function. Here's an example:

1
2
MessageInputViewModel messageInputViewModel = new MessageInputViewModel(channel.cid); 
MessageInputViewModelBindingKt.bind(messageInputViewModel, messageInputView, viewLifecycleOwner);
1
MessageInputViewModel(channel.cid).bindView(messageInputView, viewLifecycleOwner)

That's it, you can try to send your first message.

Styling via attributes

Copied!

You can style the message input's attachment button, send button, text input, and mentions list using attributes.

Avatar

Copied!
nametypedescriptiondefaultoptional
app:streamAvatarWidthdimension32dp
app:streamAvatarHeightdimension32dp
app:streamAvatarBackGroundColorcolor#989898
app:streamAvatarTextSizedimension14sp
app:streamAvatarTextColorcolorWHITE
app:streamAvatarTextStylenormal, bold, italicbold
app:streamAvatarTextFontreference-
app:streamAvatarTextFontAssetsstring-

Attachment Button

Copied!
nametypedescriptiondefaultoptional
app:streamShowAttachmentButtonbooleantrue
app:streamAttachmentButtonDefaultIconColorcolor#989898
app:streamAttachmentButtonDefaultIconPressedColorcolorWHITE
app:streamAttachmentButtonDefaultIconDisabledColorcolorLTGRAY
app:streamAttachmentButtonSelectedIconColorcolorBLACK
app:streamAttachmentButtonIconreference-
app:streamAttachmentButtonWidthdimension25dp
app:streamAttachmentButtonHeightdimension25dp
app:streamAttachmentCloseButtonBackgroundreferencestream_button_close

Input Button

Copied!
nametypedescriptiondefaultoptional
app:streamInputButtonDefaultIconColorcolor#0076FF
app:streamInputButtonEditIconColorcolor#0DD25E
app:streamInputButtonDefaultIconPressedColorcolorWHITE
app:streamInputButtonDefaultIconDisabledColorcolor#989898
app:streamInputButtonIconreference-
app:streamInputButtonWidthdimension25dp
app:streamInputButtonHeightdimension25dp

Input

Copied!
nametypedescriptiondefaultoptional
app:streamInputHintstringWrite a message
app:streamInputTextSizedimension15sp
app:streamInputTextColorcolorBLACK
app:streamInputHintColorcolor#989898
app:streamInputTextStylenormal, bold, italicnormal
app:streamInputTextFontreference-
app:streamInputTextFontAssetsstring-

Input Background

Copied!
nametypedescriptiondefaultoptional
app:streamInputBackgroundreferencestream_round_message_composer
app:streamInputSelectedBackgroundreference-
app:streamInputEditBackgroundreference-
app:streamInputBackgroundTextSizedimension15sp
app:streamInputBackgroundTextColorcolorBLACK
app:streamInputBackgroundTextStylenormal, bold, italicnormal
app:streamInputBackgroundTextFontreference-
app:streamInputBackgroundTextFontAssetsstring-

Attachments & Permissions

Copied!

MessageInputView allows you to send messages with attachments like images, videos, and other files. Moreover, you don't need to handle camera and storage permissions by yourself - MessageInputView does that by itself. It's also compatible with the new scoped storage model.

Connecting with MessageListView

Copied!

Binding MessageInputView with MessageInputViewModel gives you many functionalities out of the box. However, some of them (e.g. editing message and active thread handling ) don't work correctly without providing additional context. If you want to know how to connect MessageInputView with MessageListView easily, see Combining Views and View Models docs.

Creating your own MessageInputViewModel

Copied!

You can always decide to create your own view model implementation instead of using provided one. In that case, MessageInputView exposes multiple variables and methods which will help you proceed with that:

  • messageSendHandler - main handler which is responsible for sending different kind of messages

  • messageText - gives an access to message text

  • addTypeListener() and removeTypeListener() - allow to add and remove typing listeners

  • configureMembers() - allows to configure members which can be mentioned

  • configureCommands() - allows to configure available commands

  • setNormalMode(), setThreadMode(), and setEditMode() - allow to configure input mode