Skip to main content

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 ModeDark Mode
Light_modeDark_mode

Usage#

To 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:

// Instantiate the ViewModel
val channelListHeaderViewModel: ChannelListHeaderViewModel by viewModels()
// Bind the ViewModel with ChannelListView
channelListHeaderViewModel.bindView(channelHeaderView, viewLifecycleOwner)

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 ModeDark Mode
Light_modeDark_mode

Handling Actions#

The View displays an avatar and action button by default. You can set listeners to handle when a user clicks these:

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.

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

BeforeAfter
Light_modeDark_mode

A full list of available XML attributes is available here.

Did you find this page helpful?