Message Input View

LAST EDIT Apr 26 2021

MessageInputView is used to create a new chat message. It supports the following features:

  • Emoticons

  • Attachments

  • Slash Commands

  • Typing events

  • Editing messages

  • Threads

  • Mentions

  • Replies

MessageInputView

Here's an example layout:

MessageInputView comes with MessageInputViewModel which handles sending different types of messages out of the box. The easiest way of initializing the view is binding it with this ViewModel, using the bindView function. Here's an example:

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

Handling User Interactions

Copied!

MessageInputView exposes multiple methods for setting listeners, that includes listener for typing or for sending a message:

A full list of available listeners to set can be found here.

Customisations

Copied!

XML

Copied!

You can also change the component's visibility, fonts, or icons. The list of available attributes can be found here.

By changing the attributes, a user can create many styles for the MessageInputView like this example:

View with code above

Or this example:

View with code above - another example

We are not advocating that you use such extravagant colours, but we support many types of customisation.

It is also possible to customise the icons in the dialog of the selection of the attachments:

With the following example

The result is:

Custom icon in the left

Programatically

Copied!

It is also possible to customise the colours programmatically by using TransformStyle

NOTE: The style transformer should be set before the view is rendered to make sure that the new style was applied.

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.