Android Customization (APAC)

Customize the pre-built UI in Android

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 the message text color, message bubble background color, attachment background color, and attachment options.

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

  1. Copy the brand-messenger-settings.json file below
{
  "customMessageBackgroundColor": "#FF03A9F4",
  "sentMessageBackgroundColor": "#FF03A9F4",
  "receivedMessageBackgroundColor": "#FFFFFFFF",
  "sendButtonBackgroundColor": "#FF03A9F4",
  "attachmentIconsBackgroundColor": "#FF03A9F4",
  "channelCustomMessageBgColor": "#cccccc",
  "sentContactMessageTextColor:": "#5fba7d",
  "receivedContactMessageTextColor": "#5fba7d",
  "sentMessageTextColor": "#FFFFFFFF",
  "receivedMessageTextColor": "#000000",
  "messageEditTextTextColor": "#000000",
  "sentMessageLinkTextColor": "#FFFFFFFF",
  "receivedMessageLinkTextColor": "#5fba7d",
  "messageEditTextHintTextColor": "#bdbdbd",
  "noConversationLabelTextColor": "#000000",
  "conversationDateTextColor": "#333333",
  "conversationDayTextColor": "#333333",
  "messageTimeTextColor": "#838b83",
  "channelCustomMessageTextColor": "#666666",
  "sentMessageBorderColor": "#FF03A9F4",
  "receivedMessageBorderColor": "#FFFFFFFF",
  "channelCustomMessageBorderColor": "#cccccc",
  "collapsingToolbarLayoutColor": "#FF03A9F4",
  "groupParticipantsTextColor": "#FF03A9F4",
  "groupDeleteButtonBackgroundColor": "#FF03A9F4",
  "groupExitButtonBackgroundColor": "#FF03A9F4",
  "adminTextColor": "#FF03A9F4",
  "messageSearchOption": false,
  "attachCameraIconName": "brand_messenger_ic_action_camera_new",
  "adminBackgroundColor": "#FFFFFFFF",
  "adminBorderColor": "#FF03A9F4",
  "userNotAbleToChatTextColor": "#000000",
  "audioPermissionNotFoundMsg": "",
  "noConversationLabel": "You have no conversations",
  "noSearchFoundForChatMessages": "No conversation found",
  "userDeactivatedText": "You have been deactivated",
  "disableGlobalStoragePermission": true,
  "enableMessageFastScroll": false,
  "totalRegisteredUserToFetch": 100,
  "maxAttachmentAllowed": 10,
  "maxAttachmentSizeAllowed": 30,
  "totalOnlineUsers": 0,
  "defaultGroupType": 2,
  "conversationContactImageVisibility": false,
  "locationShareViaMap": true,
  "startNewFloatingButton": false,
  "startNewButton": true,
  "onlineStatusMasterList": false,
  "startNewGroup": true,
  "imageCompression": false,
  "inviteFriendsInContactActivity": false,
  "registeredUserContactListCall": false,
  "createAnyContact": false,
  "showActionDialWithOutCalling": false,
  "profileLogoutButton": false,
  "userProfileFragment": false,
  "hideGroupAddMembersButton": false,
  "hideGroupNameUpdateButton": false,
  "hideGroupExitButton": false,
  "hideGroupRemoveMemberOption": false,
  "profileOption": true,
  "broadcastOption": true,
  "restrictedWordMessage": " Please don't use restricted word",
  "restrictedWordRegex": "",
  "hideAttachmentButton": false,
  "groupUsersOnlineStatus": false,
  "launchChatFromProfilePicOrName": false,
  "refreshOption": true,
  "deleteOption": true,
  "deleteMessageOption": true,
  "blockOption": true,
  "muteOption": true,
  "muteUserChatOption": true,
  "replyOption": true,
  "logoutOption": false,
  "showAllDeviceContacts": true,
  "poweredByBrandMessenger": false,
  "logoutPackageName": "",
  "groupDeletePackageName": "",
  "enableImageCompression": false,
  "isContactSearchFromServer": false,
  "messageSearchTextColor": "#ff0000",
  "conversationMentionSpanColor": "",
  "disableMentions": true,
  "notificationDisableThreshold": 10,
  "hideGroupDeleteButton": false,
  "showImageOnToolbar": false,
  "enableMessageReport": true,
  "hideGroupsSectionTab": false,
  "showSenderNameForGroupsInConversationList": "true",
  "editChannelDescriptionAllowed": true,
  "attachmentOptions": {
    ":location": true,
    ":camera": true,
    ":file": true,
    ":audio": true,
    ":video": 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": ""
  },
  "hideGroupSubtitle": false,
  "editTextHintText:": "Write a Message..",
  "replyMessageLayoutSentMessageBackground": "#C0C0C0",
  "replyMessageLayoutReceivedMessageBackground": "#F5F5F5",
  "groupInfoScreenVisible": true,
  "forwardOption": true,
  "recordButton": true,
  "deleteForAllMessageOption": 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": {
      }
    }
  }
}
  1. Create an assets directory in app > main and paste that brand-messenger-settings.json file in the assets directory.

Brand Messenger settings JSON properties detail

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.

sentMessageBorderColor

Color hex (#FF03A9F4)

Sent Message chat bubble border color.

attachmentIconsBackgroundColor

Color hex (#FF03A9F4)

Attachment icons background color.

Properties

Sample Value

Description

maxAttachmentAllowed

int (Prefered 10)

Maximum attachment allowed to attach while sending multiple attachments.

Properties

Sample Value

Description

receivedMessageLinkTextColor

Color hex (#FFFFFFFF)

Received message hyper link text color.

messageTimeTextColor

Color hex (#838b83)

Message time 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.

Properties

Sample Value

Description

hideAttachmentButton

true/false

Show and hide media attachment button.

messageEditTextHintTextColor

Color hex (#bdbdbd)

Edit text hint text color.

Programmatically

You can either use the brand-messenger-settings.json file and enable or disable options, or you can enable or disable settings programmatically.

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

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
   }

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.

ActionBar Color/ToolBar Color for Conversation Screen

To customize the ActionBar/ToolBar color of the theme:

  1. Add this line in your <resources> tag in the colors.xml file:
xmlns:tools="http://schemas.android.com/tools"
  1. 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>

Custom default agent 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.

System Messages

The system message at the top of conversation-activity can be customized to include text such as privacy-policy and terms and conditions.
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="BrandMessenger_startOfConversation">This is start of conversation text. &lt;a href=\"https://www.google.com\"&gt;Link to url&lt;/a&gt;</string>
<string name="BrandMessenger_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

Quick references

Notification Banner

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.

  1. If BrandMessengerClient.getInstance(context).showAppIconInNotification(true); is set to true, application icon will be used for large icon. Else
  2. If agent's contact details has avatar image url, that will be used. Else
  3. 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 adding the following into application's strings.xml.

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

KBMTheme customization

Toolbar Customization

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

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>

Quick-Reply / AppLink Rich Buttons customization

Customize by extending KBMTheme and updating the following values

<style name="KBM2Theme" parent="KBMTheme">
    <item name="kbmUIConversationRichButtonStyle">@style/linkButtonStyle</item>
    <item name="kbmUIConversationRichButtonDisabledBackground">@drawable/link_button_disabled</item>
</style>

<style name="linkButtonStyle" parent="KBMUi.Style.Conversation.RichButton">
    <item name="android:background">@drawable/link_button</item>
    <item name="android:textColor">#C20000</item>
    <item name="android:textSize">16sp</item>
    <item name="lineHeight">24sp</item>
    <item name="android:layout_marginEnd">16dp</item>
    <item name="android:layout_marginRight">16dp</item>
    <item name="android:layout_marginLeft">16dp</item>
    <item name="android:layout_marginStart">16dp</item>
    <item name="android:layout_marginBottom">16dp</item>
    <item name="android:paddingBottom">12dp</item>
    <item name="android:paddingLeft">24dp</item>
    <item name="android:paddingStart">24dp</item>
    <item name="android:paddingRight">24dp</item>
    <item name="android:paddingEnd">24dp</item>
    <item name="android:paddingTop">12dp</item>
</style>

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

Style Customization

Some Styles can be overwritten to customize the look of the SDK UI

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>

Did this page help you?