Channel Header View

LAST EDIT Apr 26 2021
This documentation is for the old stream-chat-android UI implementation. Check out ChannelListHeaderView in our new UI components for an updated version.

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:

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

The ChannelHeaderViewModel provides the ChannelHeaderView with:

  • Channel state to show the channel title

  • Channel members to configure header and last active indicator

Listeners

Copied!

The following listeners can be set:

  • setHeaderOptionsClickListener

  • setHeaderAvatarGroupClickListener

  • onBackClick

Customizations

Copied!

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

Copied!

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

nametypedescriptiondefaultoptional
app:streamChannelHeaderActiveBadgeShowbooleantrue

Avatar

Copied!
nametypedescriptiondefaultoptional
app:streamAvatarWidthdimension32dp
app:streamAvatarHeightdimension32dp
app:streamAvatarBorderWidthdimension3dp
app:streamAvatarBorderColorcolorWHITE
app:streamAvatarBackGroundColorcolor#989898
app:streamAvatarTextSizedimension14sp
app:streamAvatarTextColorcolorWHITE
app:streamAvatarTextStylenormal, bold, italicbold
app:streamAvatarTextFontreference-
app:streamAvatarTextFontAssetsstring-

Channel Name

Copied!
nametypedescriptiondefaultoptional
app:streamChannelWithOutNameTitleTextstringChannel without name
app:streamChannelHeaderTitleTextSizedimension16sp
app:streamChannelHeaderTitleTextColorcolorBLACK
app:streamChannelHeaderTitleTextStylenormal, bold, italicbold
app:streamChannelHeaderTitleTextFontreference-
app:streamChannelHeaderTitleTextFontAssetsstring-

Offline Text

Copied!
nametypedescriptiondefaultoptional
app:streamChannelHeaderOfflineTextstringWaiting for network...
app:streamChannelHeaderLastActiveShowbooleantrue
app:streamChannelHeaderLastActiveTextSizedimension11sp
app:streamChannelHeaderLastActiveTextColorcolorstream_gray_dark
app:streamChannelHeaderLastActiveTextStylenormal, bold, italic normal
app:streamChannelHeaderLastActiveTextFontreference-
app:streamChannelHeaderLastActiveTextFontAssetsstring-

Back Button

Copied!
nametypedescriptiondefaultoptional
app:streamChannelHeaderBackButtonShowbooleantrue
app:streamChannelHeaderBackButtonBackgroundreference-

Options

Copied!
nametypedescriptiondefaultoptional
app:streamChannelHeaderOptionsButtonShowbooleanfalse
app:streamChannelHeaderOptionsButtonBackgroundreference-
app:streamChannelHeaderOptionsButtonTextSizedimension16sp
app:streamChannelHeaderOptionsButtonWidthdimension40dp
app:streamChannelHeaderOptionsButtonHeightdimension40dp