Customize user information

You can customize the user information and the UI in the user list screen. This page guides you on how to customize each data type of user information within the UI, particularly in the following cases:

The user list UI when creating a channel.
The user list UI when inviting users to channels.

User attributes

The users of the UIKit inherits from the UserInfo interface. The following table lists the properties of UserInfo.

Properties	Type	Description
userId	String	The unique ID of the user.
nickname	String?	The user's nickname. (Default: `null`)
profileUrl	String?	The URL of the user's profile image. (Default: `null`)

Utilize the CreateChannelUserListAdapter

By default, the UIKit provides a selectable UI when creating a channel or inviting a user. The CreateChannelUserListAdapter offers an interface to specify the state of the user item before the initial screen setup.

Kotlin

class CustomCreateUserListSample : CreateChannelUserListAdapter() {
    override fun isDisabled(item: UserInfo): Boolean {
        return item.userId == "deactivated user id"
    }

    override fun isSelected(item: UserInfo): Boolean {
        return item.userId == "already selected user id"
    }
}

List of methods

Methods	Params	Description
setDisabledUserIdList	List<String>	Statically sets a list of user IDs that cannot be selected. Note that it must be set before `setAdapter` is called.
isDisabled	UserInfo	Determines dynamically if the user should be not selectable from the list when rendering user information.
isSelected	UserInfo	Determines is the user is currently in a selected state.

Create a new user list item

You can create a new user list item UI by providing a separate ViewHolder that inherits from the BaseViewHolder. To learn about how to apply custom adapters, see this page.

Kotlin

class CustomCreateChannelUserListAdapter : CreateChannelUserListAdapter() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BaseViewHolder<UserInfo> {
        return SelectUserViewHolder(ViewSelectUserBinding.inflate(LayoutInflater.from(parent.context), parent, false))
    }

    inner class SelectUserViewHolder(internal val binding: ViewSelectUserBinding) : BaseViewHolder<UserInfo>(binding.root) {
        init {
            // recommand register events
            // binding.root.setOnClickListener {}
        }

        override fun bind(item: UserInfo) {
            // draw your custom user view here
        }
    }
}

For an in-depth practical demonstration, see our sample code.

On this page

User attributes Utilize the CreateChannelUserListAdapter Create a new user list item

Sample app