# Channel Header
`ChannelHeaderView` 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 `ChannelHeaderView`, include it in your XML layout as shown below:
```xml
```
We recommend using the `ChannelHeaderViewModel` 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 as follows:
```kotlin
// Initialize ViewModel
val viewModel: ChannelHeaderViewModel by viewModels {
ChannelViewModelFactory(cid = "messaging:123")
}
// Bind the View and ViewModel
viewModel.bindView(channelHeaderView, lifecycleOwner)
```
```java
// Initialize ViewModel
ViewModelProvider.Factory factory = new ChannelViewModelFactory.Builder()
.cid("messaging:123")
.build();
ViewModelProvider provider = new ViewModelProvider(this, factory);
ChannelHeaderViewModel viewModel = provider.get(ChannelHeaderViewModel.class);
// Bind the View and ViewModel
ChannelHeaderViewModelBinding.bind(viewModel, channelHeaderView, 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, `ChannelHeaderView` 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
channelHeaderView.setBackButtonClickListener {
// Handle back button click
}
channelHeaderView.setAvatarClickListener {
// Handle avatar click
}
channelHeaderView.setTitleClickListener {
// Handle title click
}
channelHeaderView.setSubtitleClickListener {
// Handle subtitle click
}
```
```java
channelHeaderView.setBackButtonClickListener(() -> {
// Handle back button click
});
channelHeaderView.setAvatarClickListener(() -> {
// Handle avatar click
});
channelHeaderView.setTitleClickListener(() -> {
// Handle title click
});
channelHeaderView.setSubtitleClickListener(() -> {
// Handle subtitle click
});
```
## Customization
### Using XML Attributes
The appearance of `ChannelHeaderView` 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_channel_header_view.xml).
---
This page was last updated at 2026-04-10T16:24:28.037Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/android/v7/ui/message-components/channel-header/](https://getstream.io/chat/docs/sdk/android/v7/ui/message-components/channel-header/).