Channel Header View

Last Edit: Oct 28 2020

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:


<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:


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

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

Listeners

The following listeners can be set:

  • setHeaderOptionsClickListener

  • setHeaderAvatarGroupClickListener

  • onBackClick

Customizations

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

Avatar

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 -

Options

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