Message List Header View

LAST EDIT Feb 17 2021

MessageListHeaderView displays useful information about the current channel. Typically it will show:

  • A back navigation button

  • Channel name

  • Number of members of a channel

  • Last time the channel was active

  • Online indicator about other users

MessageListHeaderView in channel called "General"
MessageListHeaderView searching for network with Dark theme.

Adding the layout

Copied!

Here's an example of the header being added to an XML layout:

1
2
3
4
5
6
7
<io.getstream.chat.android.ui.message.list.header.MessageListHeaderView 
        android:id="@+id/messagesHeaderView" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        app:layout_constraintEnd_toEndOf="parent" 
        app:layout_constraintStart_toStartOf="parent" 
        app:layout_constraintTop_toTopOf="parent" />

Binding With View Model

MessageListHeaderView comes with MessageListHeaderViewModel which is responsible for providing all needed data. The view can be bound with it using bindView:

1
2
3
4
5
// Get ViewModel 
val factory: MessageListViewModelFactory = MessageListViewModelFactory(cid = "channelType:channelId") 
val viewModel: MessageListHeaderViewModel by viewModels { factory } 
// Bind it with MessageListHeaderView 
viewModel.bindView(messageListHeaderView, viewLifecycleOwner)
1
2
3
4
5
6
7
// Get ViewModel 
MessageListViewModelFactory factory = new MessageListViewModelFactory("channelType:channelId"); 
MessageListHeaderViewModel viewModel =  
    new ViewModelProvider(this, factory).get(MessageListHeaderViewModel.class); 
// Bind it with MessageListHeaderView 
MessageListHeaderViewModelBinding 
    .bind(viewModel, messageListHeaderView, getViewLifecycleOwner());

Handling User Interactions

Copied!

MessageListHeaderView exposes multiple listeners for handling interactions with its components:

1
2
3
4
5
6
messageListHeaderView.setAvatarClickListener { 
    // Handle avatar click 
} 
messageListHeaderView.setTitleClickListener { 
    // Handle title click 
}
1
2
3
4
5
6
messageListHeaderView.setAvatarClickListener(() -> { 
    // Handle avatar click 
}); 
messageListHeaderView.setTitleClickListener(() -> { 
    // Handle title click 
});

A full list of available listeners to set can be found here.

Customizations

Copied!

The view also gives you an opportunity to change component's visibility, fonts, or icons. The list of available attributes can be found here.