Channel Header View

Last Edit: Jan 14 2021

The ChannelHeaderView 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 ChannelHeaderView to your layout like this:

    android:layout_height="wrap_content" />

The view can be bound to the default ChannelHeaderViewModel, which is responsible to keep the view up to date, using ChannelHeaderViewModelBinding:

ChannelViewModelFactory factory = new ChannelViewModelFactory(channel.getCid());
ChannelHeaderViewModel viewModel = new ViewModelProvider(this, factory)
ChannelHeaderViewModelBinding.bind(viewModel, channelHeaderView, lifecycle);

private val viewModel: ChannelHeaderViewModel by viewModels {

viewModel.bindView(channelHeaderView, viewLifecycleOwner)

The ChannelHeaderViewModel provides the ChannelHeaderView with:

  • Channel state to show the channel title

  • Channel members to configure header and last active indicator


The following listeners can be set:

  • setHeaderOptionsClickListener

  • setHeaderAvatarGroupClickListener

  • onBackClick


The channels header view exposes multiple variables and methods which might be helpful if you decide not to use ChannelHeaderViewModel but create your own controller instead:

  • currentChannel

  • setHeaderTitle()

  • setHeaderLastActive()

  • setActiveBadge()

  • configureHeaderAvatar()

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