# Message List Header
`MessageListHeaderView` is a component that can be used on a message list screen. It shows the channel's name and avatar, members and online members count, current connection status, and a back button.
| Light Mode | Dark Mode |
| ------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|  |  |
## Usage
To use `MessageListHeaderView`, include it in your XML layout as shown below:
```xml
```
We recommend using the `MessageListHeaderViewModel` that gets all needed data from the Stream API and then renders it in the view.
The basic setup of the ViewModel and connecting it to the view is done the following way:
```kotlin
// Initialize ViewModel
val viewModel: MessageListHeaderViewModel by viewModels {
MessageListViewModelFactory(cid = "messaging:123")
}
// Bind the View and ViewModel
viewModel.bindView(messageListHeaderView, lifecycleOwner)
```
```java
// Get ViewModel
ViewModelProvider.Factory factory = new MessageListViewModelFactory.Builder()
.cid("channelType:channelId")
.build();
ViewModelProvider provider = new ViewModelProvider(this, factory);
MessageListHeaderViewModel viewModel = provider.get(MessageListHeaderViewModel.class);
// Bind it with MessageListHeaderView
MessageListHeaderViewModelBinding.bind(viewModel, messageListHeaderView, getViewLifecycleOwner());
```
By default, the ViewModel will make the View display useful channel information and the "Searching for network" state when needed.
| Light Mode | Dark Mode |
| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
|  |  |
## Handling Actions
By default, `MessageListHeaderView` displays all the Views described above, but none of them come with a default click behavior. You can change that by setting the following listeners:
```kotlin
messageListHeaderView.setBackButtonClickListener {
// Handle back button click
}
messageListHeaderView.setAvatarClickListener {
// Handle avatar click
}
messageListHeaderView.setTitleClickListener {
// Handle title click
}
messageListHeaderView.setSubtitleClickListener {
// Handle subtitle click
}
```
```java
messageListHeaderView.setBackButtonClickListener(() -> {
// Handle back button click
});
messageListHeaderView.setAvatarClickListener(() -> {
// Handle avatar click
});
messageListHeaderView.setTitleClickListener(() -> {
// Handle title click
});
messageListHeaderView.setSubtitleClickListener(() -> {
// Handle subtitle click
});
```
## Customization
### Using XML Attributes
The appearance of `MessageListHeaderView` can be conveniently modified using its XML attributes.
```xml
```
The example above hides the back button, makes the title text red and subtitle text bold.
| Before | After |
| ------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
|  |  |
A full list of available XML attributes is available [here](https://github.com/GetStream/stream-chat-android/blob/main/stream-chat-android-ui-components/src/main/res/values/attrs_message_list_header_view.xml).
---
This page was last updated at 2026-08-14T17:46:39.964Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/android/v5/ui/message-components/message-list-header/](https://getstream.io/chat/docs/sdk/android/v5/ui/message-components/message-list-header/).