Skip to main content
Version: v6

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 that 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.feature.channels.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 viewModel: ChannelListHeaderViewModel by viewModels()

// Bind the ViewModel with ChannelListHeaderView
viewModel.bindView(channelListHeaderView, 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 "Waiting 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.feature.channels.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?