Channels View
Confused about "Channels View"?
Let us know how we can improve our documentation:
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:
.jpeg?auto=compress,auto&fit=clip&h=600&w=800)
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!Confused about "[object Object]"?
Let us know how we can improve our documentation:
The following listeners can be set on the channels view:
setOnChannelClickListener
setOnLongClickListener
setOnEndReachedListener
Customizations
Copied!Confused about "[object Object]"?
Let us know how we can improve our documentation:
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!Confused about "[object Object]"?
Let us know how we can improve our documentation:
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!Confused about "[object Object]"?
Let us know how we can improve our documentation:
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!Confused about "[object Object]"?
Let us know how we can improve our documentation:
You can style this custom view using the following attributes:
Avatar
Copied!Confused about "Avatar"?
Let us know how we can improve our documentation:
name | type | description | default | optional |
---|---|---|---|---|
app:streamAvatarWidth | dimension | 40dp | ✓ | |
app:streamAvatarHeight | dimension | 40dp | ✓ | |
app:streamAvatarBorderWidth | dimension | 3dp | ✓ | |
app:streamAvatarBorderColor | color | WHITE | ✓ | |
app:streamAvatarBackGroundColor | color | stream_gray_dark | ✓ | |
app:streamAvatarTextSize | dimension | 14sp | ✓ | |
app:streamAvatarTextColor | color | WHITE | ✓ | |
app:streamAvatarTextStyle | normal, bold, italic | bold | ✓ | |
app:streamAvatarTextFont | reference | - | ✓ | |
app:streamAvatarTextFontAssets | string | - | ✓ |
Read State
Copied!Confused about "[object Object], ,[object Object]"?
Let us know how we can improve our documentation:
name | type | description | default | optional |
---|---|---|---|---|
app:streamShowReadState | boolean | true | ✓ | |
app:streamReadStateAvatarWidth | dimension | 14dp | ✓ | |
app:streamReadStateAvatarHeight | dimension | 14dp | ✓ | |
app:streamReadStateTextSize | dimension | 8sp | ✓ | |
app:streamReadStateTextColor | color | BLACK | ✓ | |
app:streamReadStateTextStyle | normal, bold, italic | bold | ✓ | |
app:streamReadStateTextFont | reference | - | ✓ | |
app:streamReadStateTextFontAssets | string | - | ✓ |
Channel
Copied!Confused about "Channel"?
Let us know how we can improve our documentation:
name | type | description | default | optional |
---|---|---|---|---|
app:streamChannelTitleTextSize | dimension | 15sp | ✓ | |
app:streamChannelTitleTextColor | color | BLACK | ✓ | |
app:streamChannelTitleUnreadTextColor | color | BLACK | ✓ | |
app:streamChannelTitleTextStyle | normal, bold, italic | bold | ✓ | |
app:streamChannelTitleUnreadTextStyle | normal, bold, italic | bold | ✓ | |
app:streamChannelWithOutNameTitleText | string | Channel without name | ✓ |
Last Message
Copied!Confused about "[object Object],Message"?
Let us know how we can improve our documentation:
name | type | description | default | optional |
---|---|---|---|---|
app:streamLastMessageTextSize | dimension | 13sp | ✓ | |
app:streamLastMessageTextColor | color | stream_gray_dark | ✓ | |
app:streamLastMessageUnreadTextColor | color | BLACK | ✓ | |
app:streamLastMessageTextStyle | normal, bold, italic | normal | ✓ | |
app:streamLastMessageUnreadTextStyle | normal, bold, italic | bold | ✓ | |
app:streamLastMessageTextFont | reference | - | ✓ | |
app:streamLastMessageTextFontAssets | string | - | ✓ |
Last Message Date
Copied!Confused about "[object Object], ,[object Object]"?
Let us know how we can improve our documentation:
name | type | description | default | optional |
---|---|---|---|---|
app:streamLastMessageDateTextSize | dimension | 11sp | ✓ | |
app:streamLastMessageDateTextColor | color | stream_gray_dark | ✓ | |
app:streamLastMessageDateUnreadTextColor | color | BLACK | ✓ | |
app:streamLastMessageDateTextStyle | normal, bold, italic | normal | ✓ | |
app:streamLastMessageDateUnreadTextStyle | normal, bold, italic | bold | ✓ | |
app:streamLastMessageDateTextFont | reference | - | ✓ | |
app:streamLastMessageDateTextFontAssets | string | - | ✓ |
Layout
Copied!Confused about "Layout"?
Let us know how we can improve our documentation:
name | type | description | default | optional |
---|---|---|---|---|
app:streamChannelPreviewLayout | reference | _ | ✓ |