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


To use ChannelListHeaderView, include it in your XML layout as shown below:

<    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 ViewModelval channelListHeaderViewModel: ChannelListHeaderViewModel by viewModels()// Bind the ViewModel with ChannelListView channelListHeaderViewModel.bindView(chanelHeaderView, 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

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.


Using XML Attributes#

The appearance of ChannelListHeaderView can be conveniently modified using its XML attributes.

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


A full list of available XML attributes is available here.

Did you find this page helpful?