Channels View

Last Edit: Nov 27 2020

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:


<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:


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);
                    

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

The following listeners can be set on the channels view:

  • setOnChannelClickListener

  • setOnLongClickListener

  • setOnEndReachedListener

Customizations

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

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


<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

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:


MyChannelsViewHolderFactory viewHolderFactory = new MyChannelsViewHolderFactory();
channelsView.setViewHolderFactory(viewHolderFactory);
                    

val viewHolderFactory: MyChannelsViewHolderFactory = MyChannelsViewHolderFactory()
channelsView.setViewHolderFactory(viewHolderFactory)
                    

Styling using Attributes

You can style this custom view using the following attributes:

Avatar

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

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

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

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

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

Name Type Description Default Optional
app:streamChannelPreviewLayout reference _