Message Input View

LAST EDIT Feb 17 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:

1
2
3
4
5
6
7
8
<io.getstream.chat.android.ui.message.input.MessageInputView 
        android:id="@+id/messageInputView" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        app:layout_constraintBottom_toBottomOf="parent" 
        app:layout_constraintEnd_toEndOf="parent" 
        app:layout_constraintStart_toStartOf="parent" 
        />

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:

1
2
3
4
5
// Get ViewModel 
val factory: MessageListViewModelFactory = MessageListViewModelFactory(cid = "channelType:channelId") 
val viewModel: MessageInputViewModel by viewModels { factory } 
// Bind it with MessageInputView 
viewModel.bindView(messageInputView, viewLifecycleOwner)
1
2
3
4
5
6
7
// Get ViewModel 
MessageListViewModelFactory factory = new MessageListViewModelFactory("channelType:channelId"); 
MessageInputViewModel viewModel = 
    new ViewModelProvider(this, factory).get(MessageInputViewModel.class); 
// Bind it with MessageInputView 
MessageInputViewModelBinding 
    .bind(viewModel, messageInputView, getViewLifecycleOwner());

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
messageInputView.setOnSendButtonClickListener { 
    // Handle send button click 
} 
messageInputView.setTypingListener( 
object : MessageInputView.TypingListener { 
    override fun onKeystroke() { 
        // Handle keystroke case 
    } 
 
    override fun onStopTyping() { 
        // Handle stop typing case 
    } 
} 
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
messageInputView.setOnSendButtonClickListener(() -> { 
    // Handle send button click 
}); 
messageInputView.setTypingListener(new MessageInputView.TypingListener() { 
    @Override 
    public void onKeystroke() { 
        // Handle send button click 
    } 
 
    @Override 
    public void onStopTyping() { 
        // Handle stop typing case 
    } 
});

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

Customizations

Copied!

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

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.