# Channel List Header
`ChannelListHeaderView` is a component that shows the title of the channels list, the current connection status, the avatar of the current user, and provides an action button which can be used to create a new conversation. It is designed to be displayed at the top of the channels screen of your app.
| Light Mode | Dark Mode |
| --------------------------------------------------------------- | ------------------------------------------------------------------- |
|  |  |
## Usage
To use `ChannelListHeaderView`, include it in your XML layout as shown below:
```xml
```
`ChannelListHeaderView` is supposed to work with `ChannelListHeaderViewModel`. The basic setup of the ViewModel and connecting it with the View can be done in the following way:
**Kotlin**
```kotlin
// Instantiate the ViewModel
val channelListHeaderViewModel: ChannelListHeaderViewModel by viewModels()
// Bind the ViewModel with ChannelListView
channelListHeaderViewModel.bindView(channelHeaderView, viewLifecycleOwner)
```
**Java**
```java
// Get ViewModel
ChannelListHeaderViewModel viewModel = new ViewModelProvider(this).get(ChannelListHeaderViewModel.class);
// Bind it with ChannelListHeaderView
ChannelListHeaderViewModelBinding.bind(viewModel, channelListHeaderView, getViewLifecycleOwner());
```
The `ChannelListHeaderViewModel::bindView` function provides all the logic of subscribing to data emitted by the ViewModel. By default, the ViewModel will make the View display the avatar of the currently logged-in user as well as the "Searching for network" state when needed.
| Light Mode | Dark Mode |
| ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
|  |  |
## Handling Actions
The View displays an avatar and action button by default. You can set listeners to handle when a user clicks these:
**Kotlin**
```kotlin
channelListHeaderView.setOnActionButtonClickListener {
// Handle action button click
}
channelListHeaderView.setOnUserAvatarClickListener {
// Handle user avatar click
}
```
**Java**
```java
channelListHeaderView.setOnActionButtonClickListener(() -> {
// Handle action button click
});
channelListHeaderView.setOnUserAvatarClickListener(() -> {
// Handle user avatar click
});
```
You can also use XML attributes to hide those Views instead. This is explained below.
## Customization
### Using XML Attributes
The appearance of `ChannelListHeaderView` can be conveniently modified using its XML attributes.
```xml
```
The example above hides the avatar view, makes the title text bold and sets the drawable of the action button to a custom icon.
| 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_list_header_view.xml).
---
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/android/v5/ui/channel-components/channel-list-header/](https://getstream.io/chat/docs/sdk/android/v5/ui/channel-components/channel-list-header/).