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 Mode	Dark 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 designed 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)

// Instantiate the ViewModel
ChannelListHeaderViewModel viewModel = new ViewModelProvider(this).get(ChannelListHeaderViewModel.class);

// Bind it with ChannelListHeaderView
ChannelListHeaderViewModelBinding.bind(viewModel, channelListHeaderView, getViewLifecycleOwner());

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.

The ChannelListHeaderViewModel exposes the following properties that you can observe:

• currentUser: LiveData<User?> - The user who is currently logged in.
• connectionState: LiveData<ConnectionState> - The state of the connection (Connected, Connecting, or Offline).

Light Mode	Dark Mode

Handling Actions

The View displays an avatar and action button by default. You can set listeners to handle when users click on these elements:

channelListHeaderView.setOnActionButtonClickListener {
    // Handle action button click
}
channelListHeaderView.setOnUserAvatarClickListener {
    // Handle user avatar click
}
channelListHeaderView.setOnTitleClickListener {
    // Handle title click
}
channelListHeaderView.setOnTitleLongClickListener {
    // Handle title long click
}

channelListHeaderView.setOnActionButtonClickListener(() -> {
    // Handle action button click
});
channelListHeaderView.setOnUserAvatarClickListener(() -> {
    // Handle user avatar click
});
channelListHeaderView.setOnTitleClickListener(() -> {
    // Handle title click
});
channelListHeaderView.setOnTitleLongClickListener(() -> {
    // Handle title long click
});

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.

Before	After

The available XML attributes allow you to customize:

• User Avatar: streamUiShowUserAvatar - Show or hide the user avatar.
• Online Title: streamUiOnlineTitleTextSize, streamUiOnlineTitleTextColor, streamUiOnlineTitleTextFont, streamUiOnlineTitleFontAssets, streamUiOnlineTitleTextStyle - Customize the title text when online.
• Offline Title: streamUiOfflineTitleTextSize, streamUiOfflineTitleTextColor, streamUiOfflineTitleTextFont, streamUiOfflineTitleFontAssets, streamUiOfflineTitleTextStyle - Customize the title text when offline.
• Progress Bar: streamUiShowOfflineProgressBar, streamUiOfflineProgressBarTint - Show or hide the offline progress bar and customize its color.
• Action Button: streamUiShowActionButton, streamUiActionButtonIcon, streamUiActionBackgroundTint - Show or hide the action button and customize its appearance.
• Separator: streamUiChannelListSeparatorBackgroundDrawable - Customize the separator at the bottom of the header.

A full list of available XML attributes is available here.

Customizing the Header Programmatically

The ChannelListHeaderView also provides several methods to customize its appearance programmatically:

• setUser(user: User) - Sets the user whose avatar will be displayed.
• setOnlineTitle(title: String) - Sets the title text when online.
• showOnlineTitle() - Displays the online title.
• showConnectingTitle() - Displays the connecting title.
• showOfflineTitle() - Displays the offline title.