Channel Header View

LAST EDIT Feb 16 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:

1
2
3
4
<com.getstream.sdk.chat.view.ChannelHeaderView 
    android:id="@+id/channelHeader" 
    android:layout_width="match_parent" 
    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:

1
2
3
4
5
ChannelViewModelFactory factory = new ChannelViewModelFactory(channel.getCid()); 
ChannelHeaderViewModel viewModel = new ViewModelProvider(this, factory) 
        .get(ChannelHeaderViewModel.class); 
         
ChannelHeaderViewModelBinding.bind(viewModel, channelHeaderView, lifecycle);
1
2
3
4
5
private val viewModel: ChannelHeaderViewModel by viewModels { 
    ChannelViewModelFactory(channel.cid) 
} 
 
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

ListenersCopied!

The following listeners can be set:

  • setHeaderOptionsClickListener

  • setHeaderAvatarGroupClickListener

  • onBackClick

CustomizationsCopied!

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 attributesCopied!

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

nametypedescriptiondefaultoptional
app:streamChannelHeaderActiveBadgeShowbooleantrue

AvatarCopied!

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 NameCopied!

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

Offline TextCopied!

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

Back ButtonCopied!

nametypedescriptiondefaultoptional
app:streamChannelHeaderBackButtonShowbooleantrue
app:streamChannelHeaderBackButtonBackgroundreference-

OptionsCopied!

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