Channel Header View Confused about "Channel Header View"?
Let us know how we can improve our documentation:
Confused about "Channel Header View"?
Let us know how we can improve our documentation:
- On This Page:
- Listeners
- Customizations
- Styling using attributes
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!Confused about "[object Object]"?
Let us know how we can improve our documentation:
Confused about "[object Object]"?
Let us know how we can improve our documentation:
The following listeners can be set:
setHeaderOptionsClickListener
setHeaderAvatarGroupClickListener
onBackClick
CustomizationsCopied!Confused about "[object Object]"?
Let us know how we can improve our documentation:
Confused about "[object Object]"?
Let us know how we can improve our documentation:
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!Confused about "[object Object]"?
Let us know how we can improve our documentation:
Confused about "[object Object]"?
Let us know how we can improve our documentation:
You must use the following properties in your XML to change your ChannelHeaderView:
name | type | description | default | optional |
---|---|---|---|---|
app:streamChannelHeaderActiveBadgeShow | boolean | true | ✓ |
AvatarCopied!Confused about "Avatar"?
Let us know how we can improve our documentation:
Confused about "Avatar"?
Let us know how we can improve our documentation:
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 NameCopied!Confused about "Channel Name"?
Let us know how we can improve our documentation:
Confused about "Channel Name"?
Let us know how we can improve our documentation:
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 TextCopied!Confused about "Offline Text"?
Let us know how we can improve our documentation:
Confused about "Offline Text"?
Let us know how we can improve our documentation:
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 ButtonCopied!Confused about "Back Button"?
Let us know how we can improve our documentation:
Confused about "Back Button"?
Let us know how we can improve our documentation:
name | type | description | default | optional |
---|---|---|---|---|
app:streamChannelHeaderBackButtonShow | boolean | true | ✓ | |
app:streamChannelHeaderBackButtonBackground | reference | - | ✓ |
OptionsCopied!Confused about "Options"?
Let us know how we can improve our documentation:
Confused about "Options"?
Let us know how we can improve our documentation:
name | type | description | default | optional |
---|---|---|---|---|
app:streamChannelHeaderOptionsButtonShow | boolean | false | ✓ | |
app:streamChannelHeaderOptionsButtonBackground | reference | - | ✓ | |
app:streamChannelHeaderOptionsButtonTextSize | dimension | 16sp | ✓ | |
app:streamChannelHeaderOptionsButtonWidth | dimension | 40dp | ✓ | |
app:streamChannelHeaderOptionsButtonHeight | dimension | 40dp | ✓ |