Our SDKs come with a pre-built UI that you can use to integrate with your application. Following is a list of things that you can customize in the pre-built UI.

Brand Messenger Customization

JSON Settings

Brand Messenger provides easy ways to customize some UI/UX behavior via the brand-messenger-settings.json file.

Follow the below steps to add the brand-messenger-settings.json file:

Copy the brand-messenger-settings.json file below

{
  "totalRegisteredUserToFetch": 100,
  "maxAttachmentAllowed": 10,
  "maxAttachmentSizeAllowed": 30,
  "totalOnlineUsers": 0,
  "defaultGroupType": 2,
  "locationShareViaMap": true,
  "onlineStatusMasterList": false,
  "imageCompression": false,
  "registeredUserContactListCall": false,
  "createAnyContact": false,
  "userProfileFragment": false,
  "restrictedWordRegex": "",
  "launchChatFromProfilePicOrName": false,
  "showAllDeviceContacts": true,
  "logoutPackageName": "",
  "groupDeletePackageName": "",
  "enableImageCompression": false,
  "isContactSearchFromServer": false,
  "disableMentions": true,
  "notificationDisableThreshold": 10,
  "showSenderNameForGroupsInConversationList": "true",
  "editChannelDescriptionAllowed": true,
  "attachmentOptions": {
    ":location": true,
    ":camera": true,
    ":file": true,
    ":audio": true,
    ":video": true,
    ":contact": true
  },
  "filterGallery": {
    "ALL_FILES": true,
    "IMAGE_VIDEO": false,
    "IMAGE_ONLY": false,
    "AUDIO_ONLY": false,
    "VIDEO_ONLY": false
  },
  "dateFormatCustomization": {
    "sameDayTimeTemplate": "",
    "otherDayDateTemplate": "",
    "timeTemplate": "",
    "timeAndDateTemplate": "".
    "dateTemplate": "", // default "MMM dd, yyyy"
    "dayTemplate": "" // default "EEEE"
  },
  "conversationFragmentTransitions": {
    "enterTransition": "",
    "exitTransition": "",
    "popEnterTransition": "",
    "popExitTransition": ""
  },
  "conversationListFragmentTransitions": {
    "enterTransition": "",
    "exitTransition": "",
    "popEnterTransition": "",
    "popExitTransition": ""
  },
  "profileFragmentTransitions": {
    "enterTransition": "",
    "exitTransition": "",
    "popEnterTransition": "",
    "popExitTransition": ""
  },
  "messageInfoFragmentTransitions": {
    "enterTransition": "",
    "exitTransition": "",
    "popEnterTransition": "",
    "popExitTransition": ""
  },
  "groupInfoScreenVisible": true,
  "recordButton": true,
  "messageTemplate": {
    "isEnabled": false,
    "borderColor": "#FF03A9F4",
    "backgroundColor": "#FFFFFF",
    "hideOnSend": false,
    "sendMessageOnClick": true,
    "cornerRadius": 12,
    "textColor": "#FF03A9F4",
    "messageList": {
      "Greetings": "Hey",
      "Help?": "How may I help you?",
      "Email-Id": "May I know your emailId",
      "Company": "May I know your company name?",
      "Platform?": "Is this related to Android, iOS, or web?",
      "Doc?": "Did you follow our doc?"
    },
    "textMessageList": {
      "showOnSenderSide": false,
      "showOnReceiverSide": false,
      "sendMessageOnClick": false,
      "messageList": {
      }
    },
    "imageMessageList": {
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    },
    "videoMessageList": {
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    },
    "audioMessageList": {
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    },
    "locationMessageList": {
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    },
    "contactMessageList": {
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    }
  }
}

Create an assets directory in app > main and paste that brand-messenger-settings.json file in the assets directory.

App Theme

BrandMessenger SDK provides a base theme KBMTheme with color/style/drawable attributes which can be overwritten to customize the look and feel if the application.

The base theme is as follows:

<style name="KBMTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="colorPrimary">@color/brand_messenger_theme_color_primary</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">@color/brand_messenger_theme_color_primary_dark</item>
    <!-- colorAccent is used as the default value for colorControlActivated which is used to tint widgets -->
    <item name="colorAccent">@color/brand_messenger_theme_color_primary</item>
    <item name="windowActionModeOverlay">true</item>

    <!-- Custom -->

    <item name="customMessageBackgroundColor">@color/customMessageBackgroundColor</item>
    <item name="sentMessageBackgroundColor">@color/sentMessageBackgroundColor</item>
    <item name="receivedMessageBackgroundColor">@color/receivedMessageBackgroundColor</item>
    <item name="sendButtonBackgroundColor">@color/sendButtonBackgroundColor</item>
    <item name="chatBackgroundColor">@color/chatBackgroundColor</item>
    <item name="editTextBackgroundColor">@color/editTextBackgroundColor</item>
    <item name="editTextLayoutBackgroundColor">@color/editTextLayoutBackgroundColor</item>
    <item name="channelCustomMessageBgColor">@color/channelCustomMessageBgColor</item>
    <item name="sentContactMessageTextColor">@color/sendButtonBackgroundColor</item>
    <item name="receivedContactMessageTextColor">@color/receivedContactMessageTextColor</item>
    <item name="sentMessageTextColor">@color/sentMessageTextColor</item>
    <item name="receivedMessageTextColor">@color/receivedMessageTextColor</item>
    <item name="messageEditTextTextColor">@color/messageEditTextTextColor</item>
    <item name="sentMessageLinkTextColor">@color/sentMessageLinkTextColor</item>
    <item name="receivedMessageLinkTextColor">@color/receivedMessageLinkTextColor</item>
    <item name="messageEditTextHintTextColor">@color/messageEditTextHintTextColor</item>
    <item name="typingTextColor">@color/typingTextColor</item>
    <item name="noConversationLabelTextColor">@color/noConversationLabelTextColor</item>
    <item name="conversationDateTextColor">@color/conversationDateTextColor</item>
    <item name="conversationDayTextColor">@color/conversationDayTextColor</item>
    <item name="channelCustomMessageTextColor">@color/channelCustomMessageTextColor</item>
    <item name="sentMessageBorderColor">@color/sentMessageBorderColor</item>
    <item name="receivedMessageBorderColor">@color/receivedMessageBorderColor</item>
    <item name="channelCustomMessageBorderColor">@color/channelCustomMessageBorderColor</item>
    <item name="collapsingToolbarLayoutColor">@color/collapsingToolbarLayoutColor</item>
    <item name="groupParticipantsTextColor">@color/groupParticipantsTextColor</item>
    <item name="groupDeleteButtonBackgroundColor">@color/groupDeleteButtonBackgroundColor</item>
    <item name="groupExitButtonBackgroundColor">@color/groupExitButtonBackgroundColor</item>
    <item name="adminTextColor">@color/adminTextColor</item>
    <item name="adminBackgroundColor">@color/adminBackgroundColor</item>
    <item name="adminBorderColor">@color/adminBorderColor</item>
    <item name="userNotAbleToChatTextColor">@color/userNotAbleToChatTextColor</item>
    <item name="themeColorPrimary">@color/brand_messenger_theme_color_primary</item>
    <item name="themeColorPrimaryDark">@color/brand_messenger_theme_color_primary_dark</item>
    <item name="replyMessageLayoutSentMessageBackground">@color/replyMessageLayoutSentMessageBackground</item>
    <item name="replyMessageLayoutReceivedMessageBackground">@color/replyMessageLayoutReceivedMessageBackground</item>
    <item name="messageSearchTextColor">@color/messageSearchTextColor</item>
    <item name="conversationMentionSpanColor">@color/conversationMentionSpanColor</item>
    <item name="headerWelcomeMessageTypeFacePath">@style/KBM_WelcomeMessageHeaderStyle</item>
    <item name="headerSubWelcomeMessageTypeFacePath">@style/KBM_SubWelcomeMessageHeaderStyle</item>
    <item name="attachmentIconsBackgroundColor">@color/attachmentIconsBackgroundColor</item>
    <item name="kbmUiConversationActionBarStyle">@style/KBMUi.Style.Conversation.ActionBar</item>
    <item name="kbmUiConversationActionBarTitleTextAppearance">@style/ToolbarTitle</item>
    <item name="kbmUiConversationActionBarSubtitleTextAppearance">@style/ToolbarSubtitle</item>"
    <item name="kbmUiMessageInputText">@string/com.kbm.enter_message_hint</item>
    <item name="kbmUiMessageInputOuterBackground">@color/white</item>
    <item name="kbmUiMessageInputInnerBackground">@color/brand_messenger_transparent_color</item>
    <item name="kbmUiConversationScreenBackground">@color/whitesmoke</item>
    <item name="kbmUIConversationSentMessageStyle">@style/KBMUi_Style_Conversation_SentMessage_ContentContainer</item>
    <item name="kbmUIConversationReceivedMessageStyle">@style/KBMUi_Style_Conversation_ReceivedMessage_ContentContainer</item>
    <item name="kbmUiConversationSentMessageTextStyle">@style/KBMUi_Style_Conversation_SentMessage_Text</item>
    <item name="kbmUiConversationReceivedMessageTextStyle">@style/KBMUi_Style_Conversation_ReceivedMessage_Text</item>
    <item name="kbmUiConversationSentMessageTimeAndStatusIconStyle">@style/KBMUi_Style_Conversation_SentMessage_TimeAndStatusTextView</item>
    <item name="kbmUiConversationReceivedMessageTimeStyle">@style/KBMUi_Style_Conversation_ReceivedMessage_TimeTextView</item>
    <item name="kbmUiConversationListScreenBackground">@color/white</item>
    <item name="kbmUIConversationRichButtonDisabledBackground">@drawable/kbm_count_button_shape_disabled</item>
    <item name="kbmUIConversationRichButtonDisabledTextColor">@color/brand_messenger_gray_color</item>
    <item name="kbmUiConversationSentMessageLinkColor">@color/white</item>
    <item name="kbmUiConversationReceivedMessageLinkColor">@color/white</item>
    <item name="kbmUiConversationAuthorNameColor">@color/BrandMessenger_author_name</item>
</style>

Some commonly customized attributes

Properties	Sample Value	Description
receivedMessageTextColor	Color hex (#000000)	Received message text color.
receivedMessageBackgroundColor	Color hex (#FFFFFFFF)	Received message chat bubble color.
sentMessageBackgroundColor	Color hex (#FF03A9F4)	Sent message chat bubble color.
sentMessageTextColor	Color hex (#FFFFFFFF)	Sent message text color.
sendButtonBackgroundColor	Color hex (#FF03A9F4)	Send button background color.

Properties	Sample Value	Description
receivedMessageBorderColor	Color hex (#FFFFFFFF )	Received message chat bubble border color.
messageEditTextTextColor	Color hex (#000000)	Edit text text color.
messageEditTextHintTextColor	Color hex (#4d4d4d)	Edit text hint text color.
sentMessageBorderColor	Color hex (#FF03A9F4)	Sent Message chat bubble border color.
attachmentIconsBackgroundColor	Color hex (#FF03A9F4)	Attachment icons background color.

Properties	Sample Value	Description
receivedMessageLinkTextColor	Color hex (#FFFFFFFF)	Received message hyper link text color.
conversationDateTextColor	Color hex (#333333)	Message date text color.
conversationDayTextColor	Color hex (#333333)	Message day text color.
sentMessageLinkTextColor	Color hex (#5fba7d)	Sent message hyper link text color.

Booleans

Main customizable boolean values are set in bool.xml file. Each boolean value names can be overwritten to switch values. The default values are as follows:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <bool name="use_activity">true</bool>
    <bool name="use_provider">false</bool>

    <!--custom values-->
    <bool name="startNewFloatingButton">false</bool>
    <bool name="startNewButton">true</bool>
    <bool name="priceWidget">false</bool>
    <bool name="startNewGroup">true</bool>
    <bool name="inviteFriendsInContactActivity">false</bool>
    <bool name="profileLogoutButton">false</bool>
    <bool name="messageSearchOption">false</bool>
    <bool name="conversationContactImageVisibility">true</bool>
    <bool name="hideGroupAddMembersButton">false</bool>
    <bool name="hideGroupNameUpdateButton">false</bool>
    <bool name="hideGroupExitButton">false</bool>
    <bool name="hideGroupRemoveMemberOption">false</bool>
    <bool name="profileOption">false</bool>
    <bool name="broadcastOption">false</bool>
    <bool name="hideAttachmentButton">false</bool>
    <bool name="groupUsersOnlineStatus">false</bool>
    <bool name="refreshOption">true</bool>
    <bool name="deleteOption">false</bool>
    <bool name="blockOption">false</bool>
    <bool name="muteOption">false</bool>
    <bool name="logoutOption">false</bool>
    <bool name="muteUserChatOption">false</bool>
    <bool name="replyOption">false</bool>
    <bool name="forwardOption">false</bool>
    <bool name="recordButton">false</bool>
    <bool name="poweredByBrandMessenger">false</bool>
    <bool name="hideGroupDeleteButton">false</bool>
    <bool name="hideGroupSubtitle">false</bool>
    <bool name="showImageOnToolbar">false</bool>
    <bool name="enableMessageReport">false</bool>
    <bool name="deleteMessageOption">false</bool>
    <bool name="deleteForAllMessageOption">false</bool>
</resources>

Strings

Main customizable string values can be overwritten in strings.xml file. The defaults are as follows:

<string name="com.kbm.app_name">Brand Messenger</string>
<string name="com.kbm.conversations">Conversations</string>
<string name="com.kbm.channel_create_title">New group</string>
<string name="com.kbm.channel_members_title">Add members</string>
<string name="com.kbm.select_at_least">At least 1 contact must be selected</string>
<string name="com.kbm.group_name_hint">Name of the group</string>
<string name="com.kbm.empty_conversations">No conversations!</string>
<string name="com.kbm.enter_message_hint">Write a message…</string>
<string name="com.kbm.send_text">SEND</string>
<string name="com.kbm.cancel_text">CANCEL</string>
<string name="com.kbm.ok_text">OK</string>
<string name="com.kbm.start_text">START</string>
<string name="com.kbm.no_conversation">You have no conversations</string>
<string name="com.kbm.search_not_found_for_messages">No conversation found</string>
<string name="com.kbm.info_broadcast_message">Messages will be broadcast to each recipient individually</string>
<string name="com.kbm.shareOptions">Share</string>
<string name="com.kbm.action_settings">Settings</string>
<string name="com.kbm.user_block">Block</string>
<string name="com.kbm.user_un_block">Unblock</string>
<string name="com.kbm.my_profile_option_info">Profile</string>
<string name="com.kbm.location_services_disabled_message">Sending location requires access to your location. Turn on location access.</string>
<string name="com.kbm.location_services_disabled_title">Location services disabled</string>
<string name="com.kbm.location_service_settings">Settings</string>
<string name="com.kbm.location_sending_cancelled">Location sending canceled</string>
<string name="com.kbm.unable_to_fetch_location">Unable to fetch location</string>
<string name="com.kbm.waiting_for_current_location">Waiting for current location</string>
<string name="com.kbm.select_file">Select a file</string>
<string name="com.kbm.select_photo">Select a photo</string>
<string name="com.kbm.attachment_retry">Retry</string>
<string name="com.kbm.delete_conversation">Delete conversation</string>
<string name="com.kbm.sync_messages_from_server">Syncing with the server…</string>
<string name="com.kbm.incoming_call">Received call</string>
<string name="com.kbm.outgoing_call">Dialed call</string>
<string name="com.kbm.info_app_not_found_to_open_file">No application found to open this file</string>
<string name="com.kbm.unable_to_play_requested_audio_file">No application found to open this file</string>
<string name="com.kbm.file_not_selected">Did you miss selecting the file?</string>
<string name="com.kbm.info_attachment_max_allowed_file_size">Can\'t send maximum uploading file size limit exceeded!</string>
<string name="com.kbm.info_file_attachment_error">Can\'t send! Some unexpected error occurred while reading file</string>
<string name="com.kbm.select_file_count_limit">Can\'t select more than 1 file</string>
<string name="com.kbm.info_file_attachment_mime_type_not_supported">Can\'t send this type of files!</string>
<string name="com.kbm.ScheduleText">Schedule</string>
<string name="com.kbm.messageOptions">Message options</string>
<string name="com.kbm.conversation">Conversation</string>
<string name="com.kbm.conversation_options">Options</string>
<string name="com.kbm.enter_support_query_hint">enter your queries, bug reporting or feedback here</string>
<string name="com.kbm.info_message_scheduled">Message is successfully scheduled</string>
<string name="com.kbm.sync_older_messages">Do you want to sync older messages?</string>
<string name="com.kbm.dialog_delete_conversation_title">Delete conversation</string>
<string name="com.kbm.dialog_delete_conversation_confir">Delete all messages of [name]?</string>
<string name="com.kbm.negativeButtonText">Clear</string>
<string name="com.kbm.scheduleDialogHeader">Schedule Message</string>
<string name="com.kbm.scheduledDateText">Scheduled date:</string>
<string name="com.kbm.scheduledTimeText">Scheduled time:</string>
<string name="com.kbm.defaultDate">dd-mm-yyyy</string>
<string name="com.kbm.defaultTime">HH:MM:SS</string>
<string name="com.kbm.selectionRequestText">Select date and time to schedule your message.</string>
<string name="com.kbm.wearable_action_title">Reply</string>
<string name="com.kbm.wearable_action_label">Reply to</string>
<string name="com.kbm.you_string">You</string>
<string name="com.kbm.view_option_string">View</string>
<string name="com.kbm.message_option_string">Message</string>
<string name="com.kbm.account_closed">Please contact support to activate chat in your app</string>
<string name="com.kbm.free_version_not_allowed_on_release_build">Please contact support to activate chat in your app</string>
<string name="com.kbm.quick_conversation_loading">loading conversation…</string>
<string name="com.kbm.alert_for_empty_message">Do you want to send a message without text?</string>
<string name="com.kbm.yes_alert">Yes</string>
<string name="com.kbm.subtitle_last_seen_at_time">Last seen</string>
<string name="com.kbm.is_typing">is typing…</string>
<string name="com.kbm.user_online">Online</string>
<string name="com.kbm.removing_channel_user">Removing…</string>
<string name="com.kbm.adding_channel_user">Adding…</string>
<string name="com.kbm.deleting_channel_user">Deleting…</string>
<string name="com.kbm.channel_member_exit">Exiting…</string>
<string name="com.kbm.channel_update">Updating group info…</string>
<string name="com.kbm.dialog_remove_group_user">Remove [name] from [group]?</string>
<string name="com.kbm.dialog_add_group_user">Add [name] to [group]?</string>
<string name="com.kbm.group_name_info">[group]</string>
<string name="com.kbm.groupType_info">[groupType]</string>
<string name="com.kbm.group_string">group</string>
<string name="com.kbm.broadcast_string">broadcast</string>
<string name="com.kbm.new_broadcast_name_info">New broadcast</string>
<string name="com.kbm.mute_Group">Mute</string>
<string name="com.kbm.un_mute_Group">Unmute</string>
<string name="com.kbm.user_name_info">[name]</string>
<string name="com.kbm.channel_member_title">Select contact</string>
<string name="com.kbm.channel_exit_button">EXIT GROUP</string>
<string name="com.kbm.channel_delete_group_button">DELETE GROUP</string>
<string name="com.kbm.broadcast_exit_button">EXIT BROADCAST</string>
<string name="com.kbm.broadcast_delete_button">DELETE BROADCAST</string>
<string name="com.kbm.channel_created_by">Created by</string>
<string name="com.kbm.remove_member">Remove</string>
<string name="com.kbm.add">Add</string>
<string name="com.kbm.group_creating_info">Creating group, please wait…</string>
<string name="com.kbm.broadcast_creating_info">Creating broadcast, please wait…</string>
<string name="com.kbm.channel_exit">Exit</string>
<string name="com.kbm.channel_deleting">Delete</string>
<string name="com.kbm.leave_channel">Are you sure you want to exit from this [groupType]?</string>
<string name="com.kbm.exit_channel_message_info">Are you sure you want to exit [group] [groupType]?</string>
<string name="com.kbm.delete_channel_messages_and_channel_info">Are you sure you want to delete [group] [groupType]?</string>
<string name="com.kbm.channel_name_empty">Group name can not be empty</string>
<string name="com.kbm.channel_description_will_be_removed">Group description has been removed</string>
<string name="com.kbm.channel_add_alert">Unable to add participant in group because you are not a participant</string>
<string name="com.kbm.channel_edit_alert">Unable to change the group name because you are not a participant</string>
<string name="com.kbm.channel_edit_description_alert">Unable to change the group description because you are not a participant</string>
<string name="com.kbm.editing_channel_description_is_not_allowed">Editing channel description is not allowed</string>
<string name="com.kbm.admin_text">Group admin</string>
<string name="com.kbm.user_not_in_this_group_text">You are no longer a participant of this group</string>
<string name="com.kbm.group_has_been_deleted_text">This group has been deleted</string>
<string name="com.kbm.you_have_disabled_chat">You have disabled chat</string>
<string name="com.kbm.user_has_disabled_his_chat">User has disabled his/her chat</string>
<string name="com.kbm.update_channel_title_name">Enter group name</string>
<string name="com.kbm.update_channel_title_description">Enter group description</string>
<string name="com.kbm.new_channel_name_hint">Group name…</string>
<string name="com.kbm.new_channel_description_hint">Group description…</string>
<string name="com.kbm.user_block_info">Block [name]? A blocked user will no longer be able to send you messages</string>
<string name="com.kbm.user_un_block_info">Unblock [name] to send a message</string>
<string name="com.kbm.please_wait_info">Please wait a moment…</string>
<string name="com.kbm.brand_messenger_userId_error_info_in_logs">UserId can not be null or empty and channel key should not be null</string>
<string name="com.kbm.brand_messenger_channel_error_info_in_logs">Please check group name is null or empty or it has at least one member to be added in group</string>
<string name="com.kbm.brand_messenger_add_user_to_multiple_channel_error_info_in_logs">UserId can not be null or empty and channel key list should not be null</string>
<string name="com.kbm.user_logout_info">Logout successful</string>
<string name="com.kbm.unable_share_message">Unable to share you are not a participant of this group</string>
<string name="com.kbm.user_is_blocked">Unable to send user is blocked</string>
<string name="com.kbm.when_on_wifi">When on Wi-Fi</string>
<string name="com.kbm.when_on_cellular_network">When on cellular network</string>
<string name="com.kbm.media_auto_download">Media-auto download</string>
<string name="com.kbm.brand_messenger_network_usage">Network usage</string>
<string name="com.kbm.enable_vibration_notification">Enable vibration on notification</string>
<string name="com.kbm.user_has_been_deleted_text">User has been deleted</string>
<string name="com.kbm.make_admin_text_info">Make group admin</string>
<string name="com.kbm.attachment_string">Attachment</string>
<string name="com.kbm.photo_string">Photo</string>
<string name="com.kbm.contact_string">Contact</string>
<string name="com.kbm.video_string">Video</string>
<string name="com.kbm.audio_string">Audio</string>
<string name="com.kbm.location_string">Location</string>
<string name="com.kbm.restricted_words_are_not_allowed">Restricted words are not allowed</string>
<string name="com.kbm.release_log_warning_message">This is a release build and logging is enabled. Please disable logging before you upload your app on play store</string>
<string name="com.kbm.warning">WARNING!!!</string>
<string name="com.kbm.ok_alert">OK</string>
<string name="com.kbm.profile_name"/>
<string name="com.kbm.audioPermissionNotFoundMsg"/>
<string name="com.kbm.noConversationLabel">You have no conversations</string>
<string name="com.kbm.noSearchFoundForChatMessages">No conversation found</string>
<string name="com.kbm.restrictedWordMessage">Restricted words are not allowed</string>
<string name="com.kbm.userDeactivatedText">You have been deactivated</string>
<string name="com.kbm.send_button_text">Send</string>

<string name="com.kbm.JUST_NOW">Just now</string>
<string name="com.kbm.YESTERDAY">Yesterday</string>

<plurals name="com.kbm.HOURS">
    <item quantity="one">%d hr</item>
    <item quantity="other">%d hrs</item>
</plurals>

<plurals name="com.kbm.MINUTES">
    <item quantity="one">%d min</item>
    <item quantity="other">%d mins</item>
</plurals>

<plurals name="com.kbm.MINUTES_AGO">
    <item quantity="one">%d min ago</item>
    <item quantity="other">%d mins ago</item>
</plurals>

<plurals name="com.kbm.HOURS_AGO">
    <item quantity="one">%d hr ago</item>
    <item quantity="other">%d hrs ago</item>
</plurals>

<string name="com.kbm.info_message_sync">Syncing messages with the server, it might take few minutes!</string>

Quick References

Message Customization

Message bubble padding

Padding around sent and received message bubbles can be set by overwriting following dimension values.

<dimen name="BrandMessenger_received_msg_start_padding">3dp</dimen>
<dimen name="BrandMessenger_received_msg_end_padding">3dp</dimen>
<dimen name="BrandMessenger_received_msg_top_padding">3dp</dimen>
<dimen name="BrandMessenger_received_msg_bottom_padding">3dp</dimen>
<dimen name="BrandMessenger_sent_msg_start_padding">4dp</dimen>
<dimen name="BrandMessenger_sent_msg_end_padding">4dp</dimen>
<dimen name="BrandMessenger_sent_msg_top_padding">4dp</dimen>
<dimen name="BrandMessenger_sent_msg_bottom_padding">4dp</dimen>

Message Bubble Corner Radius

Extend KBMTheme and customize kbmUIConversationSentMessageStyle and kbmUIConversationReceivedMessageStyle.

<style name="KBM2Theme" parent="KBMTheme">
    <item name="kbmUIConversationSentMessageStyle">@style/sentMessageStyle</item>
</style>

<style name="sentMessageStyle">
    <item name="android:background">@drawable/drawableWithCustomizedCornerRadius</item>
</style>

<style name="KBM2Theme" parent="KBMTheme">
    <item name="kbmUIConversationReceivedMessageStyle">@style/receivedMessageStyle</item>
</style>

<style name="receivedMessageStyle">
    <item name="android:background">@drawable/drawableWithCustomizedCornerRadius</item>
</style>

Message Text Styling

Sent and received message text styles can be customized by overwriting KBMUi_Style_Conversation_SentMessage_Text and KBMUi_Style_Conversation_ReceivedMessage_Text styles.

<style name="KBMUi_Style_Conversation_SentMessage_Text">
    <item name="android:drawablePadding">5dp</item>
    <item name="android:paddingLeft">8dp</item>
    <item name="android:paddingRight">8dp</item>
    <item name="android:textAlignment">gravity</item>
    <item name="android:textColor">@color/sent_message_text_color</item>
    <item name="android:textSize">16sp</item>
</style>

<style name="KBMUi_Style_Conversation_ReceivedMessage_Text">
    <item name="android:drawablePadding">5dp</item>
    <item name="android:paddingLeft">8dp</item>
    <item name="android:paddingRight">8dp</item>
    <item name="android:textAlignment">gravity</item>
    <item name="android:textColor">@color/message_text_color</item>
    <item name="android:textSize">16sp</item>
</style>

Message Button layouts

Quick reply buttons padding and container layout can be customized by overwriting kbmUiConversationFlowLayoutStyle, kbmUiFlowLayoutItemHorizontalSpacingDp and kbmUiFlowLayoutItemVerticalSpacingDp in app theme.

<style name="KBMThemeOverride" parent="@style/KBMTheme" >
    <item name="kbmUiConversationFlowLayoutStyle">@style/customLayout</item>
    <item name="kbmUiFlowLayoutItemHorizontalSpacingDp">40</item>
    <item name="kbmUiFlowLayoutItemVerticalSpacingDp">40</item>
</style>

<style name="customLayout">
    <item name="android:padding">10dp</item>
</style>

Rich Card message customization

Rich messages in the Card template can be customized in various ways overwriting items in app theme.

<style name="KBMThemeOverride" parent="@style/KBMTheme" >
    <item name="kbmUiConversationRichCardContainerStyle">@style/rich_card_container</item>
    <item name="kbmUiConversationRichCardSubtitleHeaderStyle">@style/rich_card_header</item>
    <item name="kbmUiConversationRichCardButtonStyle">@style/rich_card_button_style</item>
    <item name="kbmUIConversationRichCardDisabledButtonColor">#4D4D4D</item>
</style>

<style name="rich_card_container" parent="KBMUi_Style_Conversation_RichCard_Container">
    <item name="android:background">#FFFFFF</item>
    <item name="android:elevation">0dp</item>
</style>

<style name="rich_card_header" parent="KBMUi_Style_Conversation_RichCard_Subtitle_HeaderTextView">
    <item name="android:layout_marginTop">10dp</item>
    <item name="android:layout_marginBottom">10dp</item>
    <item name="android:paddingBottom">0dp</item>
</style>

<style name="rich_card_button_style">
    <item name="android:fontFamily">sans-serif-medium</item>
    <item name="android:gravity">center</item>
    <item name="android:background">@drawable/kbm_rich_card_button_bg</item>
    <item name="android:letterSpacing">0.05</item>
    <item name="android:padding">5dp</item>
    <item name="android:layout_marginLeft">5dp</item>
    <item name="android:layout_marginRight">5dp</item>
    <item name="android:textAlignment">center</item>
    <item name="android:textColor">#5c5aa7</item>
    <item name="android:textSize">12sp</item>
    <item name="android:textStyle">normal</item>
</style>

Adding custom drawables to card Link buttons

richCardDrawable drawable resources can be overwritten to add custom icons to all rich card-message link buttons.

<!-- Compound drawable to be set after the text-view button in case of a rich button. Keep @null to disable. -->
<drawable name="richCardDrawable">@null</drawable>

Alternatively, KBMRichButtonStyleDelegate can be implemented to give the app the ability to inspect and apply different style and icon to each individual button.
Eg:

BrandMessengerManager.setRichMessageButtonStyleDelegate(new KBMRichButtonStyleDelegate() {
    @Override
    public int getRichButtonStyle(KBMRichMessageModel.KBMButtonModel buttonModel, int templateId) {
        if (templateId == 10) {
            return R.style.card_button;
        }
        return R.style.normal_button;
    }

    @Override
    public int getRichButtonIcon(KBMRichMessageModel.KBMButtonModel buttonModel, int templateId) {
        return R.drawable.kbm_emoticons_icon;
    }
});

The customer can decide which buttons should show a custom style/icon depending on the template id and/or KBMButtonModel included as parameters in getRichButtonStyle and getRichButtonIcon methods.
Here are examples of normal_button and card_button from above:

<style name="normal_button" parent="Theme.AppCompat.DayNight">
    <item name="kbmUIConversationRichButtonStyle">@style/my_style</item>
</style>

<style name="card_button" parent="Theme.AppCompat.DayNight">
    <item name="kbmUiConversationRichCardButtonStyle">@style/card_style</item>
</style>

<style name="my_style">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:background">@drawable/kbm_count_button_shape</item>
    <item name="android:textColor">@color/holo_blue</item>
    <item name="android:textSize">15sp</item>
    <item name="android:layout_marginEnd">6dp</item>
    <item name="android:layout_marginRight">6dp</item>
    <item name="android:layout_marginLeft">3dp</item>
    <item name="android:layout_marginStart">3dp</item>
    <item name="android:layout_marginBottom">9dp</item>
    <item name="android:paddingBottom">8dp</item>
    <item name="android:paddingLeft">12dp</item>
    <item name="android:paddingStart">12dp</item>
    <item name="android:paddingRight">12dp</item>
    <item name="android:paddingEnd">12dp</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:ellipsize">end</item>
    <item name="android:maxLines">1</item>
</style>

<style name="card_style">
    <item name="android:fontFamily">sans-serif-medium</item>
    <item name="android:gravity">center</item>
    <item name="android:background">@drawable/kbm_rich_card_button_bg</item>
    <item name="android:letterSpacing">0.05</item>
    <item name="android:padding">5dp</item>
    <item name="android:layout_marginLeft">5dp</item>
    <item name="android:layout_marginRight">5dp</item>
    <item name="android:textAlignment">center</item>
    <item name="android:textSize">12sp</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textColor">@color/holo_blue</item>
</style>

kbmUIConversationRichButtonStyle and kbmUiConversationRichCardButtonStyle attrs are used with the respective style to implement button style. Make sure that your styles (normal_button and card_button) implement base app theme's parent (Theme.AppCompat.DayNight in this case).
If you decide to go with the default style and/or icon, return 0 in the above methods.

Spacing Card Message Buttons

kbmUiCardRecyclerViewFirstButtonTopMarginDp, kbmUiCardRecyclerViewButtonSpacingDp and kbmUiCardRecyclerViewLastButtonBottomMarginDp integer attributes can be set in custom app theme to adjust the spacing at above, between and below Card Message buttons.

<style name="KBMThemeOverride" parent="@style/KBMTheme" >
  <item name="kbmUiCardRecyclerViewFirstButtonTopMarginDp">5</item>
  <item name="kbmUiCardRecyclerViewButtonSpacingDp">5</item>
  <item name="kbmUiCardRecyclerViewLastButtonBottomMarginDp">5</item>
</style>

Message Templates:

Brand Messenger provides built-in, easily-customizable message templates. The structure, as well as message list, can be set from the brand-messenger-settings.json file, itself.

Here is a look at that structure:

"messageTemplate": {
    "isEnabled": false,  //make this true to enable the templates
    "borderColor": "#ffffff",  //border color for the templates
    "backgroundColor": "#FF03A9F4", //background color for the templates
    "hideOnSend": false, //this will hide the templates when clicked for a single message
    "sendMessageOnClick": true,//will send a message with the value
    "cornerRadius": 20, //corner radius, increase this for more rounded 
    "textColor": "#ffffff",//text color within the template
    "messageList": {  //this is the message list with key value, the key will be displayed and the value will be sent as a message
      "Greetings": "Hey",
      "Help?": "How may I help you?",
      "Email-Id": "May I know your emailId",
      "Company": "May I know your company name?",
      "Platform?": "Is this related to Android, iOS, or web?",
      "Doc?": "Did you follow our doc?"
    },
    "textMessageList": {//this will be shown for the last message, if it is text message
      "showOnSenderSide": false, //if true, will be shown if last message is sent message
      "showOnReceiverSide": false, //if true, will be shown if last message is received message
      "sendMessageOnClick": false, //if true then message will be sent on click
      "messageList": { //put your messages here to be shown for the last message.
      }
    },
    "imageMessageList": {//this will be shown for the last message, if it is image message
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    },
    "videoMessageList": {//this will be shown for the last message, if it is video message
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    },
    "audioMessageList": {//this will be shown for the last message, if it is audio message
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    },
    "locationMessageList": {//this will be shown for the last message, if it is location message
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    },
    "contactMessageList": {//this will be shown for the last message, if it is contact message
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    }
  }

Getting the message template click event outside of the SDK

If you want to receive the click event outside of the SDK for your use, you can listen for the broadcast action com.brandmessenger.core.ui.TemplateMessage and get the message by using this code:

String message = intent.getStringExtra("templateMessage",null);

val message: String = intent.getStringExtra("templateMessage", null)

📘
Make sure you register the broadcast receiver in your AndroidManifest.xml file or your Application class or else you won't receive the action if the chat was launched by notification.

Dynamic message templates

You can also set the template messages dynamically based on a particular user. You need to set the messages in BrandMessengerClient in Brand Messenger's login success.

Map<String, String> messageTemplates = new HashMap<>();
messageTemplates.put("Greetings", "Hey there!");

messageTemplates.put("Share my userId", "Hey there my userId is : " + registrationResponse.getUserId());

if (!TextUtils.isEmpty(registrationResponse.getContactNumber())) {
    messageTemplates.put("Share my phone no.", "Hey there my contact number is : " + registrationResponse.getContactNumber());
}

if (!TextUtils.isEmpty(registrationResponse.getDisplayName())) {
    messageTemplates.put("Share my display name", "Hey there my Display name is : " + registrationResponse.getDisplayName());
}
BrandMessengerClient.getInstance(context).setMessageTemplates(messageTemplates);

if (registrationResponse != null) {
    val messageTemplates: MutableMap<String, String> = HashMap()
    messageTemplates["Greetings"] = "Hey there!"
    messageTemplates["Share my userId"] = "Hey there my userId is : " + registrationResponse.userId

    if (!TextUtils.isEmpty(registrationResponse.contactNumber)) {
        messageTemplates["Share my phone no."] = "Hey there my contact number is : " + registrationResponse.contactNumber
    }

    if (!TextUtils.isEmpty(registrationResponse.getDisplayName())) {
        messageTemplates["Share my display name"] = "Hey there my Display name is : " + registrationResponse.displayName
    }

    BrandMessengerClient.getInstance(context).messageTemplates = messageTemplates
}

If you set a message with same key as already defined in the brand-messenger-settings.json file, then the dynamic one would replace the static one.

For example, the Greetings key is already defined in the brand-messenger-settings.json file with value Hey, but now that the same key is being set dynamically, the dynamic value would be used. In this case, if you click on Greetings, then Hey there!, the message would be sent instead of Hey.

System Messages

Scrolling System Message

The system message at the top of conversation-activity can be customized to include text such as privacy-policy and terms and conditions. This view scrolls with the conversation and may not always be visible on screen.
System message is comprised of two text boxes, add the following into strings.xml resource file. Hyperlink tags will click through to open an external browser.

<string name="com.kbm.startOfConversation">This is start of conversation text. &lt;a href=\"https://www.google.com\"&gt;Link to url&lt;/a&gt;</string>
<string name="com.kbm.welcome">This is second paragraph. &lt;a href=\"https://www.google.com\"&gt;Link to url&lt;/a&gt;</string>

The system message can be styled by creating to overwrite the style named KBM_WelcomeMessageHeaderStyle

<style name="KBM_WelcomeMessageHeaderStyle">
    <item name="android:fontFamily">@font/fontawesome_webfont</item>
    <item name="fontFamily">@font/fontawesome_webfont</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textColor">@color/BrandMessenger_header</item>
    <item name="android:textSize">@dimen/BrandMessenger_header</item>
    <item name="android:lineSpacingMultiplier">@dimen/BrandMessenger_lineSpacingMultiplier</item>
    <item name="colorAccent">#000000</item>
    <item name="background">@color/BrandMessenger_header_background</item>
</style>

Icons

An icon can be placed at the end of each system message header and sub-header, by creating kbm_header_drawable.xml and kbm_sub_header_drawable.xml drawable files respectively.
On-click destinations for these icons can be set by adding header_url and sub_header_url string values into strings.xml

Pinned System Message

The pinned system message at the top of conversation-activity can be customized to include text such as privacy-policy and terms and conditions. This view is pinned and does not scroll with the conversation. It is always visible on screen.
System message is comprised of one text box, add the following into strings.xml resource file. Hyperlink tags will click through to open an external browser.

<string name="com.kbm.pinned_message_text">Your message, and a link &lt;a href=\"https://www.khoros.com\"&gt;Link to Khoros&lt;/a&gt;</string>

The system message can be styled by creating to overwrite the style named KBM_PinnedHeaderStyle

<style name="KBM_PinnedHeaderStyle">
    <item name="android:fontFamily">@font/fontawesome_webfont</item>
    <item name="fontFamily">@font/fontawesome_webfont</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textColor">@color/BrandMessenger_pinned_header_text</item>
    <item name="android:textSize">@dimen/BrandMessenger_pinned_header</item>
    <item name="android:background">@color/BrandMessenger_pinned_header_bg</item>
    <item name="colorAccent">#000000</item>
    <item name="android:layout_marginTop">0dp</item>
    <item name="android:layout_marginBottom">0dp</item>
    <item name="android:lineHeight">20dp</item>
    <item name="lineHeight">20dp</item>
</style>

Icons

An icon can be placed at the end of the pinned system message by creating pinned_message_drawable.xml drawable.
On-click destination for this icon can be set by adding pinned_url string value into strings.xml

Notifications

Add the settings below in onSuccess callback of Brand Messenger login

Enabling badge circle dot in a device with Android O (8.0) or greater

Add these settings to enable the notification badge in Android:

BrandMessengerClient.getInstance(context).enableShowUnreadCountBadge();

BrandMessengerClient.getInstance(context).enableShowUnreadCountBadge();

Show App icon in the notification

Add the settings below in the Brand Messenger login code of the onSuccess callback of login:

BrandMessengerClient.getInstance(context).showAppIconInNotification(true);

BrandMessengerClient.getInstance(context).showAppIconInNotification(true);

Enable/disable notifications

You can enable/disable the notifications by calling these methods:

BrandMessengerClient.getInstance(context).disableNotification();
BrandMessengerClient.getInstance(context).enableNotification();

BrandMessengerClient.getInstance(context).disableNotification();
BrandMessengerClient.getInstance(context).enableNotification();

To check if the notification is disabled, use this example:

if (BrandMessengerClient.getInstance(context).isNotificationDisabled()) {
  // Notification is disabled
} else {
  // Notification is not disable
}

if (BrandMessengerClient.getInstance(context).isNotificationDisabled) {
      // Notification is disabled
   } else {
      // Notification is not disable
   }

The small icon, large icon, and the "You have a new message." text on the notification banner can be customized.

Small Icon

Add the following into application's AndroidManifest.xml to use custom resources.

<meta-data android:name="com.brandmessenger.core.ui.notification.smallIcon"
            android:resource="<custom drawable. eg: @drawable/icon>" />
<meta-data android:name="com.brandmessenger.core.ui.notification.color"
    android:resource="<custom color. eg: @android:color/red>" />

Large Icon

The large icon uses the following sequence of rules.

If BrandMessengerClient.getInstance(context).showAppIconInNotification(true); is set to true, application icon will be used for large icon. Else
If agent's contact details has avatar image url, that will be used. Else
A default notification contact image will be used. This image can be customized by adding BrandMessengerClient.getInstance(this).setDefaultContactImage("<png filename>");. Use blank string to not display large icon.

Generic Text

For applications using generic push notification texts, the generic text can be customized by setting GenericNotificationInfo in BrandMessengerClient.

NotificationService.NotificationInfo info = new NotificationService.NotificationInfo();
info.title = "Khoros Notification";
info.genericContentText = "You have a message";
info.genericContentTextPlural = "You have many messages";
BrandMessengerClient.getInstance(this).setGenericNotificationInfo(info);

It can also be set by adding the following into application's strings.xml.

<string name="generic_device_notification_title">Chat</string>
<string name="generic_device_notification_message">You have a new message.</string>
<string name="generic_device_notification_message_plural">You have new messages.</string>

Conversation Screen Customisation

Toolbar Customisation

Color

To customise the ActionBar/ToolBar color of conversation screen of the theme:

Add this line in your <resources> tag in the colors.xml file:

xmlns:tools="http://schemas.android.com/tools"

Add the colors in your colors.xml file and use your own color values in them:

<resources xmlns:tools="http://schemas.android.com/tools">

    <color name="brand_messenger_theme_color_primary" tools:override="true">#ff0000</color>
    <color name="brand_messenger_theme_color_primary_dark" tools:override="true">#ff0000</color>

</resources>

Styling

The conversation screen toolbar's styling can be customized through extending KBMTheme and overwriting kbmUiConversationActionBarStyle and kbmUiConversationActionBarTitleTextAppearance, and applying the theme to ConversationActivity in AndroidManifest.xml.

<style name="CustomTheme" parent="KBMTheme">
    <item name="kbmUiConversationActionBarStyle">@style/ConversationToolbarStyle</item>
    <item name="kbmUiConversationActionBarTitleTextAppearance">@style/ConversationToolbarTitle</item>
</style>

<style name="ConversationToolbarStyle">
    <item name="android:background">@color/white</item>
</style>

<style name="ConversationToolbarTitle" parent="ToolbarTitle">
    <item name="android:textColor">@color/black</item>
</style>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- view background color -->
    <solid android:color="@color/brand_messenger_theme_color_primary" />

    <!-- Here is the corner radius -->
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp" />
</shape>

<activity android:name="com.brandmessenger.core.ui.conversation.activity.ConversationActivity"
    android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
    android:label="@string/app_name"
    android:parentActivityName=".MainActivity"
    android:theme="@style/CustomTheme"
    android:launchMode="singleTask"
    android:exported="false"
    tools:node="replace">
    <!-- Parent activity meta-data to support API level 7+ -->
    <meta-data
        android:name="android.support.PARENT_ACTIVITY"
        android:value=".MainActivity" />
</activity>

Default Avatar

To customize the default avatar for agent when agent profile does not have a thumbnail url, add contact_avatar.xml drawable into drawable resources.

Write-a-message hint text customization

Customize by extending KBMTheme and adding the following item: kbmUiMessageInputText (string).

Conversation screen background color

Customise by extending KBMTheme and adding the following item: kbmUiConversationScreenBackground

Conversation List screen background color

Customise by extending KBMTheme and adding the following item: kbmUiConversationListScreenBackground

Message Input Area background color

Customise the inner and outer back views' background colors by extending KBMTheme and adding the following item: kbmUiMessageInputOuterBackground, kbmUiMessageInputInnerBackground

<style name="CustomTheme" parent="@style/KBMTheme">
    <item name="kbmUiMessageInputText">@string/enter_message_hint</item>
    <item name="kbmUiConversationScreenBackground">@color/brand_messenger_gray_color</item>
    <item name="kbmUiConversationListScreenBackground">@color/brand_messenger_gray_color</item>
    <item name="kbmUiMessageInputOuterBackground">#FF0000</item>
    <item name="kbmUiMessageInputInnerBackground">#00FF00</item>
</style>

Chat Bubble Corner Radius

Extend KBMTheme and customize kbmUIConversationSentMessageStyle and kbmUIConversationReceivedMessageStyle

Conversation Date Separator style

The Date separator is in the format for " ". Default style has bold Day and regular Date.
The Date text can be styled by overwriting KBMUIConversationDateTextStyle

<style name="KBMUIConversationDateTextStyle">
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">40sp</item>
</style>

Send button

The 'Send' text button can be styled by overwriting KBMUiStyleConversationSendButton

<style name="KBMUiStyleConversationSendButton">
    <item name="android:layout_width">50dp</item>
    <item name="android:layout_height">48dp</item>
    <item name="android:text">Send</item>
    <item name="android:textStyle">bold</item>
</style>

Typing indicator

The typing indicator animation can be customized by overwriting app theme.

Use kbmUIConversationTypingIndicatorImageStyle, kbmUIConversationTypingIndicatorTextStyle, kbmUiConversationTypingIndicatorDrawableWidth and kbmUiConversationTypingIndicatorDrawableHeight to customize the style.

An optional string before the animation images can be added by turning off kbmUiConversationTypingIndicatorHideTypingIndicatorText and setting kbmUIConversationTypingIndicatorTextStyle in theme.

kbmUiConversationTypingIndicatorHideTypingIndicatorImage and kbmUiConversationTypingIndicatorHideTypingIndicatorText can be used to disable using typing indicators.

<style name="KBMThemeOverride" parent="@style/KBMTheme" >
    <item name="kbmUIConversationTypingIndicatorImageStyle">@style/KBMUi_Style_Conversation_TypingIndicator_ImageView</item>
    <item name="kbmUIConversationTypingIndicatorTextStyle">@style/KBMUi_Style_Conversation_TypingIndicator_TextView</item>
    <item name="kbmUiConversationTypingIndicatorDrawableWidth">55dp</item>
    <item name="kbmUiConversationTypingIndicatorDrawableHeight">13dp</item>
</style>

<style name="KBMUi_Style_Conversation_TypingIndicator_TextView">
    <item name="android:text">@string/com.kbm.is_typing</item>
</style>

<style name="KBMUi_Style_Conversation_TypingIndicator_ImageView">
    <item name="android:background">@drawable/kbm_typing_indicator_animated</item>
</style>

Example kbm_typing_indicator_animated drawable containing the animation-list

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/kbm_typing_indicator1" android:duration="200" />
    <item android:drawable="@drawable/kbm_typing_indicator2" android:duration="200" />
    <item android:drawable="@drawable/kbm_typing_indicator3" android:duration="200" />
</animation-list>

bool flags to be added to bool.xml

<bool name="kbmUiConversationTypingIndicatorHideTypingIndicatorText">false</bool>
<bool name="kbmUiConversationTypingIndicatorHideTypingIndicatorImage">false</bool>

Typing Indicator Background

The background of typing indicator can be customized by overwriting app theme's kbmUIConversationTypingIndicatorContainerStyle.

<style name="KBMThemeOverride" parent="@style/KBMTheme">
  <item name="kbmUIConversationTypingIndicatorContainerStyle">@style/TypingIndicatorBackground</item>
</style>

<style name="TypingIndicatorBackground">
  <item name="android:paddingLeft">15dp</item>
  <item name="android:paddingTop">5dp</item>
  <item name="android:paddingBottom">5dp</item>
  <item name="android:paddingRight">5dp</item>
</style>