Message Input View

Last Edit: Oct 19 2020

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:


<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 a different types of messages out of the box. The easiest way of initializing message input is binding it with MessageInputViewModel, using bindView() extension function. Here's an example:


MessageInputViewModel messageInputViewModel = new MessageInputViewModel(channel.cid);
MessageInputViewModelBindingKt.bindView(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.

Avatar

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

Input

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 new scoped storage model.

Connecting with MessageListView

Binding MessageInputView with MessageInputViewModel gives you many functionalities out of the box. However, editing messages and active thread handling needs some additional setup. The easiest way of handling those features is by connecting MessageInputViewModel with MessageListView and correspondingMessageListViewModel. Here's an example:


val messagesViewModel = MessageListViewModel(cid)
MessageInputViewModel(cid).apply {
    messagesViewModel.mode.observe(
        viewLifecycleOwner,
        Observer {
            when (it) {
                is MessageListViewModel.Mode.Thread -> setActiveThread(it.parentMessage)
                is MessageListViewModel.Mode.Normal -> resetThread()
            }
        }
    )
    messageListView.setOnMessageEditHandler {
        editMessage.postValue(it)
    }
}
                    

final MessageListViewModel messageListViewModel = new MessageListViewModel(cid);
final MessageInputViewModel messageInputViewModel = new MessageInputViewModel(cid);
messageListViewModel.getMode().observe(this, mode -> {
    if (mode instanceof MessageListViewModel.Mode.Thread) {
        messageInputViewModel.setActiveThread(((MessageListViewModel.Mode.Thread) mode).getParentMessage());
    } else if (mode instanceof MessageListViewModel.Mode.Normal) {
        messageInputViewModel.resetThread();
    }
});
messageListView.setOnMessageEditHandler((message) -> {
    messageInputViewModel.getEditMessage().postValue(message);
    return Unit.INSTANCE;
});
                    

Creating your own MessageInputViewModel

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

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

  • messageText variable- gives an access to message text

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

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

  • configureCommands() method - allows to configure available commands

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