Channel List Header View

LAST EDIT Apr 08 2021

The ChannelListHeaderView is a simple header that displays the user avatar, title, and action button.

It works best together with ChannelListView, being able to show information about the currently logged in user as well as handle clicks on its components.

ChannelListHeaderView can show a different header depending on the user's online state:

ChannelListHeaderView with online title
ChannelListHeaderView with offline title

Here's an example layout containing the view:

1
2
3
4
<io.getstream.chat.android.ui.channel.list.header.ChannelListHeaderView 
    android:id="@+id/channelListHeaderView" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" />

Binding with a ViewModel

Copied!

ChannelListHeaderView comes with ChannelListHeaderViewModel which can provide all the necessary data to it. The view can be bound to the Viewmodel using bindView:

1
2
3
4
// Get ViewModel 
val viewModel: ChannelListHeaderViewModel by viewModels() 
// Bind it with ChannelListHeaderView 
viewModel.bindView(channelListHeaderView, viewLifecycleOwner)
1
2
3
4
// Get ViewModel 
ChannelListHeaderViewModel viewModel = new ViewModelProvider(this).get(ChannelListHeaderViewModel.class); 
// Bind it with ChannelListHeaderView 
ChannelListHeaderViewModelBinding.bind(viewModel, channelListHeaderView, getViewLifecycleOwner());

From that point, the view will be able to display the current user avatar as well as online status.

Customizations

Copied!

ChannelListHeaderView allows you to handle user interaction with its components. The list of available listeners can be found here.

You can also change the component's visibility, fonts, or icons. The list of available attributes can be found here.