Message Input View

Last Edit: Jan 14 2021

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:

    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:

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

MessageInputViewModel(channel.cid).bindView(messageInputView, viewLifecycleOwner)

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

Styling via attributes

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


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

Attachment Button

Name Type Description Default Optional
app:streamShowAttachmentButton boolean true
app:streamAttachmentButtonDefaultIconColor color #989898
app:streamAttachmentButtonDefaultIconPressedColor color WHITE
app:streamAttachmentButtonDefaultIconDisabledColor color LTGRAY
app:streamAttachmentButtonSelectedIconColor color BLACK
app:streamAttachmentButtonIcon reference -
app:streamAttachmentButtonWidth dimension 25dp
app:streamAttachmentButtonHeight dimension 25dp
app:streamAttachmentCloseButtonBackground reference stream_button_close

Input Button

Name Type Description Default Optional
app:streamInputButtonDefaultIconColor color #0076FF
app:streamInputButtonEditIconColor color #0DD25E
app:streamInputButtonDefaultIconPressedColor color WHITE
app:streamInputButtonDefaultIconDisabledColor color #989898
app:streamInputButtonIcon reference -
app:streamInputButtonWidth dimension 25dp
app:streamInputButtonHeight dimension 25dp


Name Type Description Default Optional
app:streamInputHint string Write a message
app:streamInputTextSize dimension 15sp
app:streamInputTextColor color BLACK
app:streamInputHintColor color #989898
app:streamInputTextStyle normal, bold, italic normal
app:streamInputTextFont reference -
app:streamInputTextFontAssets string -

Input Background

Name Type Description Default Optional
app:streamInputBackground reference stream_round_message_composer
app:streamInputSelectedBackground reference -
app:streamInputEditBackground reference -
app:streamInputBackgroundTextSize dimension 15sp
app:streamInputBackgroundTextColor color BLACK
app:streamInputBackgroundTextStyle normal, bold, italic normal
app:streamInputBackgroundTextFont reference -
app:streamInputBackgroundTextFontAssets string -

Attachments & Permissions

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

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

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