Channel Header View

Last Edit: Jun 06 2020

The ChannelHeader 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 ChannelHeader view 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" />
                    

To show the information for the channel you'll want to pass the ChannelViewModel to the ChannelHeaderView.


// create the channel view model
Channel channel = client.channel(channelType, channelID);
ChannelViewModelFactory viewModelFactory = new ChannelViewModelFactory(this.getApplication(), channel);
viewModel = new ViewModelProvider(this, viewModelFactory).get(ChannelViewModel.class);
// set the viewmodel on the ChannelHeaderView
ChannelHeaderView channelHeader = findViewById(R.id.channelHeader);
channelHeader.setViewModel(viewModel, this);
                    

// create the channel view model
val channel = client.channel(channelType, channelID)
val viewModelFactory = ChannelViewModelFactory(application, channel)
val viewModel = ViewModelProvider(this, viewModelFactory).get(ChannelViewModel::class.java)
// connect the viewmodel to the View
val channelHeader = findViewById(R.id.channelHeader)
channelHeader.setViewModel(viewModel, this)
                    

The ChannelViewModel provides the ChannelHeaderView with:

  • Online status (if there is an active internet connection or not)

  • Channel State to show the channel title, and the last active date

  • If we're currently in a thread or not

Listeners

The following listeners can be set

  • setHeaderOptionsClickListener

  • setHeaderAvatarGroupClickListener

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