Channel Header View

Last Edit: Oct 19 2020

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

  • A back navigation button

  • Channel name

  • Last time the channel was active

  • Online indicator about other users

You can add a ChannelHeader view to your layout like this:

    android:layout_height="wrap_content" />

To show the information for the channel you'll want to pass the ChannelViewModel to the ChannelHeaderView.

// create the channel view model
Channel channel =, channelID);
ChannelViewModelFactory viewModelFactory = new ChannelViewModelFactory(this.getApplication(), channel);
viewModel = new ViewModelProvider(this, viewModelFactory).get(ChannelViewModel.class);
// set the viewmodel on the ChannelHeaderView
ChannelHeaderView channelHeader = findViewById(;
channelHeader.setViewModel(viewModel, this);

// create the channel view model
val channel =, channelID)
val viewModelFactory = ChannelViewModelFactory(application, channel)
val viewModel = ViewModelProvider(this, viewModelFactory).get(
// connect the viewmodel to the View
val channelHeader = findViewById(
channelHeader.setViewModel(viewModel, this)

The ChannelViewModel provides the ChannelHeaderView with:

  • Online status (if there is an active internet connection or not)

  • Channel State to show the channel title, and the last active date

  • If we're currently in a thread or not


The following listeners can be set

  • setHeaderOptionsClickListener

  • setHeaderAvatarGroupClickListener

Styling using attributes

You must use the following properties in your XML to change your ChannelHeaderView.

Name Type Description Default Optional
app:streamChannelHeaderActiveBadgeShow boolean true


Name Type Description Default Optional
app:streamAvatarWidth dimension 32dp
app:streamAvatarHeight dimension 32dp
app:streamAvatarBorderWidth dimension 3dp
app:streamAvatarBorderColor color WHITE
app:streamAvatarBackGroundColor color #989898
app:streamAvatarTextSize dimension 14sp
app:streamAvatarTextColor color WHITE
app:streamAvatarTextStyle normal, bold, italic bold
app:streamAvatarTextFont reference -
app:streamAvatarTextFontAssets string -

Channel Name

Name Type Description Default Optional
app:streamChannelWithOutNameTitleText string Channel without name
app:streamChannelHeaderTitleTextSize dimension 16sp
app:streamChannelHeaderTitleTextColor color BLACK
app:streamChannelHeaderTitleTextStyle normal, bold, italic bold
app:streamChannelHeaderTitleTextFont reference -
app:streamChannelHeaderTitleTextFontAssets string -

Offline Text

Name Type Description Default Optional
app:streamChannelHeaderOfflineText string Waiting for network...
app:streamChannelHeaderLastActiveShow boolean true
app:streamChannelHeaderLastActiveTextSize dimension 11sp
app:streamChannelHeaderLastActiveTextColor color stream_gray_dark
app:streamChannelHeaderLastActiveTextStyle normal, bold, italic normal
app:streamChannelHeaderLastActiveTextFont reference -
app:streamChannelHeaderLastActiveTextFontAssets string -

Back Button

Name Type Description Default Optional
app:streamChannelHeaderBackButtonShow boolean true
app:streamChannelHeaderBackButtonBackground reference -


Name Type Description Default Optional
app:streamChannelHeaderOptionsButtonShow boolean false
app:streamChannelHeaderOptionsButtonBackground reference -
app:streamChannelHeaderOptionsButtonTextSize dimension 16sp
app:streamChannelHeaderOptionsButtonWidth dimension 40dp
app:streamChannelHeaderOptionsButtonHeight dimension 40dp