#
Channel List HeaderChannelListHeaderView
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 |
---|---|
![]() | ![]() |
#
UsageTo use ChannelListHeaderView
, include it in your XML layout as shown below:
<io.getstream.chat.android.ui.channel.list.header.ChannelListHeaderView
android:id="@+id/channelListHeaderView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
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
- Java
// Instantiate the ViewModel
val channelListHeaderViewModel: ChannelListHeaderViewModel by viewModels()
// Bind the ViewModel with ChannelListView
channelListHeaderViewModel.bindView(channelHeaderView, viewLifecycleOwner)
// 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 ActionsThe View displays an avatar and action button by default. You can set listeners to handle when a user clicks these:
- Kotlin
- Java
channelListHeaderView.setOnActionButtonClickListener {
// Handle action button click
}
channelListHeaderView.setOnUserAvatarClickListener {
// Handle user avatar click
}
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 AttributesThe appearance of ChannelListHeaderView
can be conveniently modified using its XML attributes.
<io.getstream.chat.android.ui.channel.list.header.ChannelListHeaderView
android:id="@+id/channelListHeaderView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:streamUiShowUserAvatar="false"
app:streamUiShowOfflineProgressBar="false"
app:streamUiActionButtonIcon="@drawable/ic_stream_logo"
app:streamUiOnlineTitleTextStyle="bold"
/>
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.