Card view for Android

The card view feature is a UI component designed to enhance chat interfaces by organizing messages into cards. In UI design, a 'card' is a rectangular box that contains and displays a piece of related information cohesively, like a single chat message or a group of messages. This layout not only makes information presentation cleaner and more structured but also allows for greater user engagement and improved aesthetics. The cards are customizable, supporting integration of images, text, and interactive elements, and can be easily adapted to match your brand's style. This page guides you to implement a custom card view UI in your Android app using the Sendbird UIKit for Chat.

The minimum requirements for Android are:

• Sendbird Chat SDK 4.13.0
• Sendbird Chat UIKit 3.9.0

You can implement the card view UI to your app by following the steps below.

You can create a custom adapter class named CardViewAdapter by extending MessageListAdapter.

class CardViewAdapter(
    channel: GroupChannel,
    uiParams: MessageListUIParams
) : MessageListAdapter(channel, uiParams) {
  ...
}

You can override getItemViewType to return a custom view type for messages that are card views. Override onCreateViewHolder to create a CardViewHolder for the card view type.

class CardViewAdapter(
    channel: GroupChannel,
    uiParams: MessageListUIParams
) : MessageListAdapter(channel, uiParams) {
    override fun getItemViewType(position: Int): Int {
        return if (getItem(position).isCardView()) return CARD_VIEW_TYPE
        else super.getItemViewType(position)
    }
    
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MessageViewHolder {
        if (viewType == CARD_VIEW_TYPE) {
            val inflater = LayoutInflater.from(parent.context)
            return CardViewHolder(
                CardViewMessageBinding.inflate(inflater, parent, false)
            )
        }
        return super.onCreateViewHolder(parent, viewType)
    }
    
    private class CardViewHolder(
        val binding: CardViewMessageBinding
    ) : MessageViewHolder(binding.root) {
      ...
    }    

    companion object {
        const val CARD_VIEW_TYPE = 1000
    }
}

You can check if a message is a card view by following the code below. Utilize BaseMessage.extendedMessage["custom_view"] to draw the UI with data.

private fun BaseMessage.isCardView(): Boolean {
    return extendedMessage.containsKey("custom_view")
}

Implement MessageListAdapterProvider to return the custom MessageListAdapter which is the CardViewAdapter.

AdapterProviders.messageList = MessageListAdapterProvider { channel, uiParams ->
    CardViewAdapter(channel, uiParams)
}