Skip to main content
Version: v6

Message List Screen

You can set up a self-contained chat screen that displays a list of messages and gives users the ability to send messages by using one of the following components:

  • MessageListFragment: A Fragment that represents a self-contained chat screen.
  • MessageListActivity: An Activity that is just a thin wrapper around MessageListFragment.

The MessageListFragment contains these three inner components:

  • MessageListHeaderView: Displays a navigation icon, the name of the channel or thread and the channel avatar.
  • MessageListView: Shows a list of paginated messages, with threads, replies, reactions and deleted messages.
  • MessageComposerView: Allows users to participate in the chat by sending messages and attachments.
note

Fragments and Activities representing self-contained screens are easy to use. They allow you to explore the features of our SDK in a breeze, however, they offer limited customization.

Usage

To use the message list screen, you can simply start MessageListActivity from the SDK:

context.startActivity(MessageListActivity.createIntent(context, cid = "messaging:123"))

This single line of code will produce a fully working solution, as shown in the image below.

The Message List Screen Component

Alternatively, you can achieve the same result by adding MessageListFragment from the SDK to your Fragment or Activity:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
class MyMessageListActivity : AppCompatActivity(R.layout.fragment_container) {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
if (savedInstanceState == null) {
val fragment = MessageListFragment.newInstance(cid = "messaging:123") {
showHeader(true)
}
supportFragmentManager.beginTransaction()
.replace(R.id.container, fragment)
.commit()
}
}
}

Next, let's see how to handle actions on the screen.

Handling Actions

To handle actions supported by MessageListFragment you have to implement corresponding click listeners in the parent Fragment or Activity:

class MyMessageListActivity : AppCompatActivity(R.layout.fragment_container), MessageListFragment.BackPressListener {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Add MessageListFragment to the layout
}

override fun onBackPress() {
// Handle back press
}
}

Currently, there's only a single click listener you can use with the MessageListFragment:

  • BackPressListener: Click listener for the navigation button in the header. Finishes Activity by default.

Customization

The message list screen component offers limited customization. The MessageListFragment exposes a builder with the following methods:

  • setFragment: Sets custom message list Fragment. The Fragment must be a subclass of MessageListFragment.
  • customTheme: Custom theme for the screen.
  • showHeader: Whether the header is shown or hidden.
  • messageId: The ID of the message to highlight.

Other than that, you can use inheritance for further customization as shown in the example below:

class CustomMessageListFragment : MessageListFragment() {

override fun setupMessageListHeader(messageListHeaderView: MessageListHeaderView) {
super.setupMessageListHeader(messageListHeaderView)
// Customize message list header view

// For example, set a custom listener for the back button
messageListHeaderView.setBackButtonClickListener {
// Handle back press
}
}

override fun setupMessageList(messageListView: MessageListView) {
super.setupMessageList(messageListView)
// Customize message list view
}

override fun setupMessageComposer(messageComposerView: MessageComposerView) {
super.setupMessageComposer(messageComposerView)
// Customize message composer view
}
}

class CustomMessageListActivity : MessageListActivity() {

override fun createMessageListFragment(cid: String, messageId: String?): MessageListFragment {
return MessageListFragment.newInstance(cid) {
setFragment(CustomMessageListFragment())
customTheme(R.style.StreamUiTheme)
showHeader(true)
messageId(messageId)
}
}
}

Then you need to add CustomMessageListActivity to your AndroidManifest.xml, create an Intent for it using the MessageListActivity.createIntent() method, and finally start the Activity:

context.startActivity(
MessageListActivity.createIntent(
context = context,
cid = "messaging:123",
activityClass = CustomMessageListActivity::class.java
)
)
note

Fragments and Activities representing self-contained screens can be styled using the options described in the theming guide.

Did you find this page helpful?