Skip to main content
Version: v2

Customize UI Kit

Image

This guide helps you to customize, modify, and enable/disable features present in UIKit.

Note

CometChat SDK & UI Kit both need to be configured before starting the customization in UI Kit.


To Modify and customize UI Kit, you need to refer to the UIKitSettings class present in the UI Kit Library. You will be easily able to modify the color, enable/disable some of the features which you won't require in your app.

Important
  • UI Kit Settings must be called before launching any UI Screen or UI Unified. By default, all settings will be enabled.

  • For advanced level customization, you can modify the source code of the library as per your requirement.

Color Settings

DescriptionCode SnippetSettings
Modify primary colourUIKitSettings.color = #F3F3F3Requires Hex value of color as String
Ex: "#F3F3F3"

Tab bar settings

DescriptionCode SnippetSettings
Hide/Show recents chats tabUIKitSettings.conversations = trueYou can show it using true or hide it using false.
Hide/Show calls tabUIKitSettings.calls = trueYou can show it using true or hide it using false.
Hide/Show users tabUIKitSettings.users = trueYou can show it using true or hide it using false.
Hide/Show groups tabUIKitSettings.groups = trueYou can show it using true or hide it using false.
Hide/Show user information tabUIKitSettings.userSettings = trueYou can show it using true or hide it using false.

Recent Chat settings

DescriptionCode SnippetSettings
Show unread countUIKitSettings.unreadCount = trueYou can show it using true or hide it using false.
Show search bar in chatsUIKitSettings.searchChats = trueYou can show it using true or hide it using false.
Show all users/groups or bothUIKitSettings.chatListMode = true'You can show all users and groups using true or hide users and group using false.

Call settings

DescriptionCode SnippetSettings
Enable audio call for userUIKitSettings.userAudioCall = trueYou can show it using true or hide it using false.
Enable audio call for groupUIKitSettings.groupAudioCall = trueYou can show it using true or hide it using false.
Enable video call for userUIKitSettings.userVideoCall = trueYou can show it using true or hide it using false.
Enable video call for groupUIKitSettings.groupVideoCall = trueYou can show it using true or hide it using false.
Enable sound for callsUIKitSettings.enableSoundForCalls = trueYou can show it using true or hide it using false.

User settings

DescriptionCode SnippetSettings
Show all users/friendsUIKitSettings.userInMode = trueYou can show it using true or hide it using false.
Show user presenceUIKitSettings.showUserPresence = trueYou can show it using true or hide it using false.
Show block userUIKitSettings.blockUser = trueYou can show it using true or hide it using false.
Show search userUIKitSettings.searchUsers = trueYou can show it using true or hide it using false.
Show view profileUIKitSettings.viewProfile = trueYou can show it using true or hide it using false.

Group settings

DescriptionCode SnippetSettings
Show create groupUIKitSettings.groupCreation = trueYou can show it using true or hide it using false.
Show join or leave groupUIKitSettings.joinOrLeaveGroup = trueYou can show it using true or hide it using false.
Show delete groupUIKitSettings.allowDeleteGroup = trueYou can show it using true or hide it using false.
Show group membersUIKitSettings.viewGroupMembers = trueYou can show it using true or hide it using false.
Show add memberUIKitSettings.allowAddMembers = trueYou can show it using true or hide it using false.
Allow moderator to delete messages of participantsUIKitSettings.allowModeratorToDeleteMemberMessages = trueYou can show it using true or hide it using false.
Allow user to kick membersUIKitSettings.kickMember = trueYou can show it using true or hide it using false.
Allow user to ban membersUIKitSettings.banMember = trueYou can show it using true or hide it using false.
Allow user to promote or demote membersUIKitSettings.allowPromoteDemoteMembers = trueYou can show it using true or hide it using false.
Show public group option for creating groups.UIKitSettings.publicGroup = trueYou can show it using true or hide it using false.
Show private group option for creating groups.UIKitSettings.privateGroup = trueYou can show it using true or hide it using false.
Show password protected group option for creating groups.UIKitSettings.passwordGroup = trueYou can show it using true or hide it using false.
Show search groupsUIKitSettings.searchGroups = trueYou can show it using true or hide it using false.
Enable message in private from GroupsUIKitSettings.messageInPrivate = trueYou can show it using true or hide it using false.
Enable message receipt information from GroupsUIKitSettings.messageInformation = trueYou can show it using true or hide it using false.

Message settings

DescriptionCode SnippetSettings
Show message composer for one-on-one chatUIKitSettings.sendMessageInOneOnOne = trueYou can show it using true or hide it using false.
Show message composer for group chatUIKitSettings.sendMessageInGroup = trueYou can show it using true or hide it using false.
Show send text messageUIKitSettings.sendTextMessage = trueYou can show it using true or hide it using false.
Show send photos & videosUIKitSettings.sendPhotoVideos = trueYou can show it using true or hide it using false.
Show send files & documentsUIKitSettings.sendFiles = trueYou can show it using true or hide it using false.
Show send voice notesUIKitSettings.sendVoiceNotes = trueYou can show it using true or hide it using false.
Show send emojis from keyboardUIKitSettings.sendEmojis = trueYou can show it using true or hide it using false.
Show send emojis in Larger SizeUIKitSettings.sendEmojisInLargerSize = trueYou can show it using true or hide it using false.
Show send stickersUIKitSettings.sendStickers = trueYou can show it using true or hide it using false.
Send typing indicatorUIKitSettings.sendTypingIndicator = trueYou can show it using true or hide it using false.
Send message reactionUIKitSettings.sendMessageReaction = trueYou can show it using true or hide it using false.
Send live reactionUIKitSettings.sendLiveReaction = trueYou can show it using true or hide it using false.
Ability to edit the messageUIKitSettings.editMessage = trueYou can show it using true or hide it using false.
Ability to delete the messageUIKitSettings.deleteMessage = trueYou can show it using true or hide it using false.
Ability to share, copy & forward the messageUIKitSettings.shareCopyForwardMessage = trueYou can show it using true or hide it using false.
Ability to reply on messageUIKitSettings.replyToMessage = trueYou can show it using true or hide it using false.
Ability to start new thread for messageUIKitSettings.threadedChats = trueYou can show it using true or hide it using false.
Ability to share live reactionUIKitSettings.shareLiveReaction = trueYou can show it using true or hide it using false.
Ability to share your locationUIKitSettings.shareLocation = trueYou can show it using true or hide it using false.
Show shared mediaUIKitSettings.viewShareMedia = trueYou can show it using true or hide it using false.
Show read/delivery receipts for MessagesUIKitSettings.showReadDeliveryReceipts = trueYou can show it using true or hide it using false.
Ability to create poll (Poll Extension must be enabled from Dashboard)UIKitSettings.polls = trueYou can show it using true or hide it using false.
Enable sound for MessagesUIKitSettings.enableSoundForMessages = trueYou can show it using true or hide it using false.
Enable Message ReactionsUIKitSettings.messageReaction = trueYou can show it using true or hide it using false.
Enable Collaborative DocumentUIKitSettings.collaborativeDocument = trueYou can show it using true or hide it using false.
Enable Collaborative WhiteboardUIKitSettings.collaborativeWhiteboard = trueYou can show it using true or hide it using false.
Enable Message TranslationUIKitSettings.messageTranslation = trueYou can show it using true or hide it using false.
Hide/show delete messagesUIKitSettings.hideDeletedMessages = trueYou can show it using true or hide it using false.
Enable Message HistoryUIKitSettings.messageHistory = trueYou can show it using true or hide it using false.
Show smart replies
(Smart Replies Extension must be enabled from Dashboard)
UIKitSettings.smartReplies = trueYou can show it using true or hide it using false.