Skip to main content

Message List Header#

MessageListHeaderView is a component that can be used on a message list screen. It shows the channel's name and avatar, members and online members count, current connection status, and a back button.

Light ModeDark Mode
Light_modeDark_mode

Usage#

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

<io.getstream.chat.android.ui.message.list.header.MessageListHeaderView
android:id="@+id/messageListHeaderView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>

We recommend using the MessageListHeaderViewModel that gets all needed data from the Stream API and then renders it in the view.

The basic setup of the ViewModel and connecting it to the view is done the following way:

// Initialize ViewModel
val viewModel: MessageListHeaderViewModel by viewModels {
MessageListViewModelFactory(cid = "messaging:123")
}

// Bind the View and ViewModel
viewModel.bindView(messageListHeaderView, lifecycleOwner)

By default, the ViewModel will make the View display useful channel information and the "Searching for network" state when needed.

Light ModeDark Mode
Light_modeDark_mode

Handling Actions#

By default, MessageListHeaderView displays all the Views described above, but none of them come with a default click behavior. You can change that by setting the following listeners:

messageListHeaderView.setBackButtonClickListener {
// Handle back button click
}
messageListHeaderView.setAvatarClickListener {
// Handle avatar click
}
messageListHeaderView.setTitleClickListener {
// Handle title click
}
messageListHeaderView.setSubtitleClickListener {
// Handle subtitle click
}

Customization#

Using XML Attributes#

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

<io.getstream.chat.android.ui.message.list.header.MessageListHeaderView
android:id="@+id/messageListHeaderView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:streamUiMessageListHeaderShowBackButton="false"
app:streamUiMessageListHeaderTitleTextColor="#FF0000"
app:streamUiMessageListHeaderDefaultLabelTextStyle="bold"
/>

The example above hides the back button, makes the title text red and subtitle text bold.

BeforeAfter
Light_modeDark_mode

A full list of available XML attributes is available here.

Did you find this page helpful?