Skip to main content
Version: v6

Building a Channel List Screen

The ChannelListHeaderView and ChannelListView components work best together to display a list of channels.

This is what a screen made up of these two components looks like:

Light ModeDark Mode
Light modeDark mode
note

You can find the full code from this guide on GitHub. To check the final result, clone the repository, select the stream-chat-android-ui-guides module on your Android Studio like the image below, and run the module. UI Guides Module on Android Studio

To add these Views to your app, first create them in an XML layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<io.getstream.chat.android.ui.feature.channels.header.ChannelListHeaderView
android:id="@+id/channelListHeaderView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<io.getstream.chat.android.ui.feature.channels.list.ChannelListView
android:id="@+id/channelListView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/channelListHeaderView" />

</androidx.constraintlayout.widget.ConstraintLayout>

The Android SDK comes with ViewModels for its components which are responsible for providing all necessary data.

note

You can read about UserRepository which is used in the example below in the Client Overview section.

You can create these ViewModels the following way, providing any necessary parameters using a ViewModel factory:

val channelListHeaderViewModel: ChannelListHeaderViewModel by viewModels()

val channelListFactory: ChannelListViewModelFactory = ChannelListViewModelFactory(
filter = Filters.and(
Filters.eq("type", "messaging"),
Filters.`in`("members", listOf(userRepository.getCurrentUser()!!.id)),
),
sort = QuerySortByField.descByName("last_updated"),
limit = 30,
)
val channelListViewModel: ChannelListViewModel by viewModels { channelListFactory }

Then, use bindView to connect the ViewModel and the View, populating the View with data and handling its input events.

channelListHeaderViewModel.bindView(channelListHeaderView, viewLifecycleOwner)
channelListViewModel.bindView(channelListView, viewLifecycleOwner)
note

bindView sets listeners on the view and the ViewModel. Any additional listeners should be set after calling bindView.

From that point, ChannelListHeaderView will be able to display the current user avatar as well as online status, while ChannelListView will display the list of channels. Displaying empty and loading states, as well as pagination will be handled automatically.

ChannelListViewModelFactory allows customizing filter and sort options. See Querying Channels for more info.

Did you find this page helpful?