This is beta documentation for Stream Chat Android SDK v7. For the latest stable version, see the latest version (v6) .

Channel Header

ChannelHeaderView 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 Mode	Dark Mode

Usage

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

<io.getstream.chat.android.ui.feature.messages.header.ChannelHeaderView
    android:id="@+id/channelHeaderView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

We recommend using the ChannelHeaderViewModel 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 as follows:

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

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

// Initialize ViewModel
ViewModelProvider.Factory factory = new ChannelViewModelFactory.Builder()
        .cid("messaging:123")
        .build();
ViewModelProvider provider = new ViewModelProvider(this, factory);
ChannelHeaderViewModel viewModel = provider.get(ChannelHeaderViewModel.class);

// Bind the View and ViewModel
ChannelHeaderViewModelBinding.bind(viewModel, channelHeaderView, getViewLifecycleOwner());

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

Light Mode	Dark Mode

Handling Actions

By default, ChannelHeaderView 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:

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

channelHeaderView.setBackButtonClickListener(() -> {
    // Handle back button click
});
channelHeaderView.setAvatarClickListener(() -> {
    // Handle avatar click
});
channelHeaderView.setTitleClickListener(() -> {
    // Handle title click
});
channelHeaderView.setSubtitleClickListener(() -> {
    // Handle subtitle click
});

Customization

Using XML Attributes

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

<io.getstream.chat.android.ui.feature.messages.header.ChannelHeaderView
    android:id="@+id/channelHeaderView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:streamUiChannelHeaderShowBackButton="false"
    app:streamUiChannelHeaderTitleTextColor="#FF0000"
    app:streamUiChannelHeaderDefaultLabelTextStyle="bold" />

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

Before	After

A full list of available XML attributes is available here.

Channel

MessageListView