# Channel Header
The `ChannelHeader` component is a clean, stateless component which doesn't require a `ViewModel`. It allows you to customize the data, design style, action
handlers and override the internal composable slots.
Out of the box it sets the following:
- **Back button:** A button to use for navigating back.
- **Header content:** Displays information such as the name of the current channel, number of participants, connection and typing status and message mode.
- **Channel avatar:** The image set for the current channel or stacked member avatars if no image is set.
Let's see how to use it in your UI.
## Usage
To use the component, simply combine it with the rest of your UI, for example in `setContent`, in you `Activity` or `Fragment`:
```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Load the data for the header here
setContent {
ChatTheme {
Column(Modifier.fillMaxSize()) {
ChannelHeader(
modifier = Modifier.wrapContentHeight(),
channel = channel,
currentUser = currentUser,
connectionState = connectionState,
messageMode = messageMode,
onBackPressed = { },
onHeaderTitleClick = { },
onChannelAvatarClick = { },
)
// Rest of your UI
}
}
}
}
```
This component is stateless and doesn't have its own `ViewModel`. You need to provide the data to the header, otherwise it doesn't know what to render.
We recommend using either our `ChannelState` directly or the `MessageListViewModel` for the required state. For greater ease of use you can use it with the rest of our components.
With the correct data the snippet above generates the following UI:
Now let's see how to handle the header actions.
## Handling Actions
The `ChannelHeader` exposes these actions, as per the signature:
```kotlin
@Composable
fun ChannelHeader(
..., // State
onBackPressed: () -> Unit = {},
onHeaderTitleClick: ((Channel) -> Unit)? = null,
onChannelAvatarClick: ((Channel) -> Unit)? = null,
)
```
- `onBackPressed`: Handler used when the user clicks on the back button.
- `onHeaderTitleClick`: Handler used when the user clicks on the channel title. If `null`, the title area won't be clickable.
- `onChannelAvatarClick`: Handler used when the user clicks on the channel avatar. If `null`, the avatar won't be clickable.
The `leadingContent` uses `onBackPressed` as its default action, while the `centerContent` uses `onHeaderTitleClick` and the `trailingContent` uses `onChannelAvatarClick`. If you want to keep the same UI but change the behavior, you can override `onBackPressed`, `onHeaderTitleClick` or `onChannelAvatarClick`.
Otherwise, skip over to [Customization](#customization) to learn how to customize the UI.
To customize these actions, simply use the `ChannelHeader` with the rest of your UI components, like within `setContent`, and pass in the required actions:
```kotlin
ChannelHeader(
..., // State
onBackPressed = { finish() },
onHeaderTitleClick = {
// Handle clicks on the header title
},
onChannelAvatarClick = {
// Handle clicks on the channel avatar
},
... // Content
)
```
This way it's easy to combine the actions from this component with your custom UI and logic.
## Customization
As the component is fully state-dependent, you can customize the data it shows, as per the signature:
```kotlin
@Composable
fun ChannelHeader(
channel: Channel,
currentUser: User?,
connectionState: ConnectionState,
modifier: Modifier = Modifier,
typingUsers: List = emptyList(),
messageMode: MessageMode = MessageMode.Normal,
..., // Handlers
... // Content
)
```
- `channel`: The information about the current channel, used to show the member count, name and avatar data.
- `currentUser`: Currently logged in user, used to differentiate it from other users, when loading the channel image.
- `connectionState`: Used to switch between the member count text and the network status information.
- `modifier`: Modifier for the root component. You can use it to add padding or change the dimensions and such.
- `typingUsers`: List of typing users you can use to show a typing indicator by also overriding `ChannelHeaderCenterContent` in `ChatComponentFactory`.
- `messageMode`: Used to determine the header title. If we're in a thread, we show a title saying who the owner of the parent message is.
These will change what data is displayed in the header.
You can also customize the content of the header, using the following slot parameters:
```kotlin
@Composable
fun ChannelHeader(
..., // State and handlers
leadingContent: @Composable RowScope.() -> Unit = { /* Back button */ },
centerContent: @Composable RowScope.() -> Unit = { /* Channel info */ },
trailingContent: @Composable RowScope.() -> Unit = { /* Channel avatar */ },
)
```
- `leadingContent`: Represents the content at the beginning of the header. By default shows a back button that you can override or customize the behavior of by overriding `onBackPressed`.
- `centerContent`: Represents the core and center part of the header. By default shows information about the channel that you can override or customize the behavior of by overriding `onHeaderTitleClick`.
- `trailingContent`: Represents the content at the end of the header. By default shows the channel avatar that you can override or customize the behavior of by overriding `onChannelAvatarClick`.
**Here's an example of customizing the UI:**
First, create a button with a drawable of your choosing:
```kotlin
@Composable
fun InfoButton() {
IconButton(
onClick = {
// Handle on click
}
) {
Icon(
modifier = Modifier.height(40.dp),
painter = painterResource(id = R.drawable.ic_info),
contentDescription = "info button",
tint = Color.Black
)
}
}
```
Then place that button into the `trailingContent` slot while placing our own `ChannelAvatar` component into the `leadingContent` slot:
```kotlin
ChannelHeader(
... // State
leadingContent = {
ChannelAvatar(
modifier = Modifier.size(40.dp),
channel = channel,
currentUser = currentUser,
)
},
trailingContent = { InfoButton() }
)
```
The resulting UI looks like this:
For a more in-depth customization check out [this](/chat/docs/sdk/android/compose-cookbook/custom-channel-header/) Cookbook page.
---
This page was last updated at 2026-04-17T17:33:32.289Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/android/compose/message-components/channel-header/](https://getstream.io/chat/docs/sdk/android/compose/message-components/channel-header/).