Channels View

LAST EDIT Mar 05 2021
This documentation is for the old stream-chat-android UI implementation. Check out ChannelListView in our new UI components for an updated version.

The ChannelsView is responsible for showing a list of channels together with loading and empty states. By default, a single list item shows the channel name (in case of a name isn't specified it will use the names of the channel members), user's read state, last message, and the time of the last message:

You can use the view in your layout as shown below:

1
2
3
4
<com.getstream.sdk.chat.view.channels.ChannelsView 
    android:id="@+id/channelsListView" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" />

The channels view allows you to display different channels list states and handle common users interactions, but it doesn't contain logic for getting channels from Stream API. Android SDK comes with ChannelsViewModel which contains default logic for this view and which can be easily bound using ChannelsViewModelBinding:

1
2
3
4
5
6
7
8
9
10
11
12
FilterObject filter = Filters.and( 
        Filters.eq("type", "messaging"), 
        Filters.in("members", singletonList(user.getId())) 
); 
QuerySort sort = ChannelsViewModel.DEFAULT_SORT; 
int limit = 30; 
 
ChannelsViewModelFactory factory = new ChannelsViewModelFactory(filter, sort, limit); 
ChannelsViewModel viewModel = new ViewModelProvider(this, factory) 
        .get(ChannelsViewModelImpl.class); 
         
ChannelsViewModelBinding.bind(viewModel, channelsView, lifecycle);
1
2
3
4
5
6
7
8
9
10
11
12
private val filter: FilterObject = Filters.and( 
    Filters.eq("type", "messaging"), 
    Filters.`in`("members", listOf(ChatDomain.instance().currentUser.id)) 
) 
private val sort: QuerySort = ChannelsViewModel.DEFAULT_SORT 
private val limit: Int = 30 
 
private val viewModel: ChannelsViewModelImpl by viewModels { 
    ChannelsViewModelFactory(filter, sort, limit) 
} 
 
viewModel.bindView(channelsView, viewLifecycleOwner)

The bind call connects the view model with the view and from that point, different channels view states (Result, Loading, NoChannelsAvailable), as well as EndPageReached event, will be handled automatically.

It's worth mentioning that you don't need to query channels by yourself. The first call will be done during ChannelsViewModel creation and the list will be kept updated automatically based on received events.

Listeners

Copied!

The following listeners can be set on the channels view:

  • setOnChannelClickListener

  • setOnLongClickListener

  • setOnEndReachedListener

Customizations

Copied!

The channels view exposes multiple methods which either allow to change default empty and loading state views, changing view's state and even provide a possibility to handle different type of channel's views:

  • setEmptyStateView

  • setLoadingView

  • showLoadingView

  • hideLoadingView

  • showEmptyStateView

  • hideEmptyStateView

  • setChannels

  • setViewHolderFactory

Changing channel layout

Copied!

If you need to make some slight changes to the channel layout (e.g. different positions) - you can swap the layout for the channel previews. It's worth to notice that this approach only works for simple changes where you don't change the IDs of views or their types. You can find the default layout in stream_item_channel.xml

1
2
3
4
5
<com.getstream.sdk.chat.view.channels.ChannelsView 
    android:id="@+id/channelsListView" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"  
    app:streamChannelPreviewLayout="@layout/stream_item_channel" />

Custom channel layout

Copied!

The easiest to create a custom channel layout is to override ChannelViewHolderFactory which will be responsible for creating ViewHolders. You can set your own view holder factory in the following way:

1
2
MyChannelsViewHolderFactory viewHolderFactory = new MyChannelsViewHolderFactory(); 
channelsView.setViewHolderFactory(viewHolderFactory);
1
2
val viewHolderFactory: MyChannelsViewHolderFactory = MyChannelsViewHolderFactory() 
channelsView.setViewHolderFactory(viewHolderFactory)

Styling using Attributes

Copied!

You can style this custom view using the following attributes:

Avatar

Copied!
nametypedescriptiondefaultoptional
app:streamAvatarWidthdimension40dp
app:streamAvatarHeightdimension40dp
app:streamAvatarBorderWidthdimension3dp
app:streamAvatarBorderColorcolorWHITE
app:streamAvatarBackGroundColorcolorstream_gray_dark
app:streamAvatarTextSizedimension14sp
app:streamAvatarTextColorcolorWHITE
app:streamAvatarTextStylenormal, bold, italicbold
app:streamAvatarTextFontreference-
app:streamAvatarTextFontAssetsstring-

Read State

Copied!
nametypedescriptiondefaultoptional
app:streamShowReadStatebooleantrue
app:streamReadStateAvatarWidthdimension14dp
app:streamReadStateAvatarHeightdimension14dp
app:streamReadStateTextSizedimension8sp
app:streamReadStateTextColorcolorBLACK
app:streamReadStateTextStylenormal, bold, italicbold
app:streamReadStateTextFontreference-
app:streamReadStateTextFontAssetsstring-

Channel

Copied!
nametypedescriptiondefaultoptional
app:streamChannelTitleTextSizedimension15sp
app:streamChannelTitleTextColorcolorBLACK
app:streamChannelTitleUnreadTextColorcolorBLACK
app:streamChannelTitleTextStylenormal, bold, italicbold
app:streamChannelTitleUnreadTextStylenormal, bold, italicbold
app:streamChannelWithOutNameTitleTextstringChannel without name

Last Message

Copied!
nametypedescriptiondefaultoptional
app:streamLastMessageTextSizedimension13sp
app:streamLastMessageTextColorcolorstream_gray_dark
app:streamLastMessageUnreadTextColorcolorBLACK
app:streamLastMessageTextStylenormal, bold, italicnormal
app:streamLastMessageUnreadTextStylenormal, bold, italicbold
app:streamLastMessageTextFontreference-
app:streamLastMessageTextFontAssetsstring-

Last Message Date

Copied!
nametypedescriptiondefaultoptional
app:streamLastMessageDateTextSizedimension11sp
app:streamLastMessageDateTextColorcolorstream_gray_dark
app:streamLastMessageDateUnreadTextColorcolorBLACK
app:streamLastMessageDateTextStylenormal, bold, italicnormal
app:streamLastMessageDateUnreadTextStylenormal, bold, italicbold
app:streamLastMessageDateTextFontreference-
app:streamLastMessageDateTextFontAssetsstring-

Layout

Copied!
nametypedescriptiondefaultoptional
app:streamChannelPreviewLayoutreference_