Message Input View
Confused about "Message Input View"?
Let us know how we can improve our documentation:
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!Confused about "Styling via attributes"?
Let us know how we can improve our documentation:
You can style the message input's attachment button, send button, text input, and mentions list using attributes.
Avatar
Copied!Confused about "Avatar"?
Let us know how we can improve our documentation:
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
Copied!Confused about "[object Object],Button"?
Let us know how we can improve our documentation:
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
Copied!Confused about "Input Button"?
Let us know how we can improve our documentation:
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
Copied!Confused about "Input"?
Let us know how we can improve our documentation:
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
Copied!Confused about "Input Background"?
Let us know how we can improve our documentation:
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
Copied!Confused about "[object Object]"?
Let us know how we can improve our documentation:
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!Confused about "Connecting with ,[object Object]"?
Let us know how we can improve our documentation:
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!Confused about "[object Object],[object Object]"?
Let us know how we can improve our documentation:
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