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.

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"))

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

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

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()
        }
    }
}

public final class MyMessageListActivity extends AppCompatActivity {

    public MyMessageListActivity() {
        super(R.layout.fragment_container);
    }
    
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (savedInstanceState == null) {
            MessageListFragment fragment  = MessageListFragment.newInstance("messaging:123", builder -> {
                builder.showHeader(true);
                return Unit.INSTANCE;
            });
            getSupportFragmentManager().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
    }
}

public final class MyMessageListActivity extends AppCompatActivity implements MessageListFragment.BackPressListener {

    public MyMessageListActivity() {
        super(R.layout.fragment_container);
    }
    
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Add MessageListFragment to the layout
    }

    @Override
    public void 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)
        }
    }
}

public final class CustomMessageListFragment extends MessageListFragment {

    @Override
    protected void setupMessageListHeader(@NonNull 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
    protected void setupMessageList(@NonNull MessageListView messageListView) {
        super.setupMessageList(messageListView);
        // Customize message list view
    }

    @Override
    protected void setupMessageComposer(@NonNull MessageComposerView messageComposerView) {
        super.setupMessageComposer(messageComposerView);
        // Customize message composer view
    }
}

public final class CustomMessageListActivity extends MessageListActivity {

    @NonNull
    @Override
    protected MessageListFragment createMessageListFragment(@NonNull String cid, @Nullable String messageId) {
        return MessageListFragment.newInstance(cid, builder -> {
            builder.setFragment(new CustomMessageListFragment());
            builder.customTheme(R.style.StreamUiTheme);
            builder.showHeader(true);
            builder.messageId(messageId);
            return Unit.INSTANCE;
        });
    }
}

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
    )
)

context.startActivity(MessageListActivity.createIntent(context, "messaging:123", null, CustomMessageListActivity.class));

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

Building a Channel List Screen

Message List Header