Skip to main content
Version: 5.0.0

Appearance and Behavior Customization

Autoscroll​

If the chat history is scrolled down to older messages, the scroll button (i.e. the button to go back to the recent messages) appears. The following behavior is used:

  • The chat receives TYPING (indicator of an incoming message being typed) = > the user remains on the same position in the chat history.
  • Any incoming message is received in the chat = > the user remains on the same position in the chat history, an indicator of unread messages with the number of the messages appears on the scroll button.
  • The user sends the message = > The chat scrolls back to the last message from the user.

Chat Behavior Customization​

The chat's behavior is controlled by the ChatStyle methods:

  • showChatBackButton(boolean showBackButton) - Indicates whether to display the Back button in the toolbar. Default: false.
  • centerToolbarText() - Centers the text in the toolbar, by default, it is aligned to the left.
  • setShowConsultSearching(boolean show) - Indicates whether to display the progress while searching for an agent. Default: false.
  • setCanShowSpecialistInfo(boolean show) - Parameter that controls whether to show the agent info screen (it opens when tapping the agent's avatar). Default: true
  • setUseExternalCameraApp(boolean useExternal) - Indicates whether to use the external camera app installed on the device. Default: false.
  • setScrollChatToEndIfUserTyping(boolean scroll) - If true, when opening the screen keyboard the chat always scrolls to the most recent message. If false, when opening the keyboard, the user remains at the current position of the chat history (it scrolls up to the heght of the keyboard). Default: false.
  • setChatSubtitleShowConsultOrgUnit(boolean enabled) - Indicates whether to display the agent's department in the tollbar sub-header. Default: true.
  • setInputEnabledDuringQuickReplies(boolean inputEnabledDuringQuickReplies) - Indicates whether the message input field is enabled when a dialog with quick responses is active. Default: false.

Enable Sending Files​

To enable adding and sending attachments, in the manifest, set the following parameter to true:

<meta-data
    android:name="im.threads.attachmentEnabled"
    tools:replace="android:value"
    android:value="@bool/attachment_enabled"/>

Alternatively, you can do it using the showAttachmentsButton() method when creating ConfigBuilder:

val configBuilder = ConfigBuilder(this).showAttachmentsButton()
ThreadsLib.init(configBuilder)

Chat Header Style Customization​

Toolbar header styles in the chat are set via the following method in ChatStyle:

     public ChatStyle setChatTitleStyle(
        @StringRes final int chatTitleTextResId,
        @StringRes final int chatSubtitleTextResId,
        @ColorRes final int chatToolbarColorResId,
        @ColorRes final int chatToolbarContextMenuColorResId,
        @ColorRes final int chatToolbarTextColorResId,
        @ColorRes final int chatStatusBarColorResId,
        @BoolRes final int windowLightStatusBarResId,
        @ColorRes final int menuItemTextColorResId,
        @ColorRes final int chatToolbarHintTextColor,
        final boolean showBackButton
    )

To these parameters, the following resources correspond:

    chatTitleTextResId - R.string.ecc_contact_center
    chatSubtitleTextResId - R.string.ecc_operator_subtitle
    chatToolbarColorResId - R.color.ecc_chat_toolbar
    chatToolbarContextMenuColorResId - R.color.ecc_chat_toolbar_context_menu
    chatToolbarTextColorResId - R.color.ecc_chat_toolbar_text
    chatStatusBarColorResId - R.color.ecc_chat_status_bar
    windowLightStatusBarResId - R.bool.ecc_chat_is_light_status_bar
    menuItemTextColorResId - R.color.ecc_chat_toolbar_menu_item
    chatToolbarHintTextColor - R.color.ecc_chat_toolbar_hint

These fields are responsible for the following functionality:

  • chatTitleTextResId - Text for the line with the agent's name
  • chatSubtitleTextResId - Text for the sub-header line in the toolbar under the agent's name
  • chatToolbarColorResId - Color of the toolbar and the bottom navigation menu in the selected state
  • chatToolbarTextColorResId - Color of the text in the toolbar
  • chatStatusBarColorResId - Status bar color
  • windowLightStatusBarResId - Flag that notifies the SDK that a light status bar is being used
  • menuItemTextColorResId - Text color of menu items
  • chatToolbarHintTextColor - Color of tooltips in the toolbar for input fields (search)

Chat Style Customization​

The chat style is controlled by the methods and fields of ChatStyle. All the fields specified below use a direct link to the resource. For example, R.color.blue is used to specify the color. The parameters can be set directly, via a setter of individual fields, or via a common method setChatBodyStyle available in the ChatStyle class.

  • chatBackgroundColor - Chat background color (link to a resource, for example, R.color.blue)
  • chatHighlightingColor - Highlight color of the message when it is selected
  • incomingMessageBubbleColor - Bubble color for incoming messages
  • outgoingMessageBubbleColor - Bubble color for outgoing messages
  • incomingMessageBubbleBackground - Resource in the 9.png format that defines the shape of the bubble of an incoming message
  • outgoingMessageBubbleBackground - Resource in the 9.png format that defines the shape of the bubble of an outgoing message
  • incomingMessageTextColor - Incoming message text color
  • outgoingMessageTextColor - Outgoing message text color
  • incomingMessageTimeColor - Color of the text for the timestamp in incoming messages
  • outgoingMessageTimeColor - Color of the text for the timestamp in outgoing messages
  • incomingMessageTimeTextSize - Size of the text for the timestamp in incoming messages (dimen)
  • outgoingMessageTimeTextSize - Size of the text for the timestamp in outgoing messages (dimen)
  • incomingMessageLinkColor - Link color in incoming messages
  • outgoingMessageLinkColor - Link color in outgoing messages
  • chatBodyIconsTint - Color of the icons for the chat
  • chatSystemMessageTextColor - Text color of system messages
  • setIncomingMarkdownConfiguration(MarkdownConfiguration incoming) - Style customization for incoming Markdown messages

The style of incoming and outgoing images without text is controlled by the following separate fields:

  • outgoingImageBubbleMask - Resource in the 9.png format that defines the shape of the bubble of an outgoing image
  • incomingImageBubbleMask - Resource in the 9.png format that defines the shape of the bubble of an incoming image
  • outgoingImageTimeColor - Color of the text for the timestamp in outgoing images
  • outgoingImageTimeBackgroundColor - Background color of the timestamp in outgoing images
  • incomingImageTimeColor - Color of the text for the timestamp in incoming images
  • incomingImageTimeBackgroundColor - Background color of the timestamp in incoming images

The margins for messages are determined by the following parameters (the dimen resource):

Outgoing:

  • bubbleOutgoingPaddingLeft, bubbleOutgoingPaddingTop, bubbleOutgoingPaddingRight, bubbleOutgoingPaddingBottom

Incoming:

  • bubbleIncomingPaddingLeft, bubbleIncomingPaddingTop, bubbleIncomingPaddingRight, bubbleIncomingPaddingBottom

Font Settings​

The fonts are set by the ChatStyle methods. The path parameter is the path to the required font in the assets folder, for example, “fonts/font_name.ttf”.

  • setDefaultFontBold(String path) - Font Bold for the chat in general
  • setDefaultFontLight(String path) - Font Light for the chat in general
  • setDefaultFontRegular(String path) - Font Regular for the chat in general
  • setToolbarTitleFont(String path) - Font of the text in the toolbar for the agent's name or the "Searching for an agent" text
  • setToolbarSubtitleFont(String path) - Font of the text in the toolbar for the word “agent” under the agent's name
  • setPlaceholderTitleFont(String path) - Font of the heading of the text on the blank screen
  • setPlaceholderSubtitleFont(String path) - Font of the subheading of the text on the blank screen
  • setInputQuotedMessageAuthorFont(String path) - Font for the name of the author of a quoted message in the message input field
  • setInputQuotedMessageFont(String path) - Font of the text of a quoted message in the message input field
  • setBubbleMessageFont(String path) - Message text font
  • setBubbleTimeFont(String path) - Font of the time when the message was sent
  • setQuoteAuthorFont(String path) - Font for the name of the author of a quoted message
  • setQuoteMessageFont(String path) - Font of the text of a quoted message
  • setQuoteTimeFont(String path) - Font of the date of the quoted message
  • setMessageHeaderFont(String path) - Font of the date when the message was sent (it is displayed not in the message itself, but in the message list in the chat history as a separator for days)
  • setSpecialistConnectTitleFont(String path) - Font of the agent's name in the message about them joining the chat
  • setSpecialistConnectSubtitleFont(String path) - Font of the accompanying text in the message about the agent joining the chat
  • setTypingFont(String path) - Font of the text “the agent is typing”
  • setScheduleAlertFont(String path) - Font of the text in the message about the chat being unavailable
  • setInputTextFont(String path) - Font of the text in the message input field
  • setSystemMessageFont(String path) - Fon of system messages

Resource Settings​

Chat's Main Screen​

Welcome Form​

The welcome form (i.e., greeting) is displayed while there are no messages in the chat.

  • R.drawable.ecc_welcome_logo - Welcome logo
  • R.string.ecc_welcome_screen_title_text - Heading text
  • R.string.ecc_welcome_screen_subtitle_text - Subheading text
  • R.color.ecc_welcome_screen_title - Heading text color
  • R.color.ecc_welcome_screen_subtitle - Subheading text color
  • R.dimen.ecc_welcome_screen_title - Font size of the heading text
  • R.dimen.ecc_welcome_screen_subtitle - Foте size of the subheading text
  • R.dimen.ecc_welcome_logo_width - Resource for setting up the width of the welcome logo (3.7.2+)
  • R.dimen.ecc_welcome_logo_height - Resource for setting up the height of the welcome logo (3.7.2+)

Chat Screen Header - Toolbar​

  • R.string.ecc_contact_center - Text in the toolbar when there's no active chat or when the person the cient was speaking to has left (default: "Contact center")
  • R.bool.ecc_chat_fixed_chat_title - Allows you to set a default text for the toolbar regardless of the chat state (3.8.7+)
  • R.bool.ecc_chat_search_enabled - Allows you to enable/disable the search functionality
  • R.string.ecc_searching_operator - Text in the toolbar while searching for an agent (default: "Searching for an agent...")
  • R.string.ecc_operator_subtitle - Text in the toolbar after the agent joins the chat (default: "Agent")
  • R.string.ecc_unknown_operator - Text in the toolbar after the agent joins the chat if their name is unknown (default: "Unknown")
  • R.color.ecc_chat_toolbar - Toolbar color on the chat screen, when selecting a photo from the gallery, attachment list, and the color of the heading in a "quick response" dialog opened from a push notification
  • R.color.ecc_chat_toolbar_context_menu - Toolbar color when the buttons to copy/quote are active (3.7.2+)
  • R.color.ecc_chat_toolbar_text - Color of text labels and toolbar icons on chat screens, attachment list, agent's profile, and the color of the title text in the “quick response” dialog opened from a push notification
  • R.color.ecc_chat_status_bar - Color of the chat screen status bars, attachment list, agent's profile, and the color of the title text in the “quick response” dialog opened from a push notification
  • R.bool.ecc_chat_is_light_status_bar - true if the status bar is light, otherwise false (a light status bar has dark icons, and vice versa). Default: false. Corresponds to View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR (3.8.5+).
  • R.color.ecc_chat_toolbar_menu_item - Color of the toolbar's overflow menu (OverflowMenu)
  • R.color.ecc_chat_toolbar_hint - Color of the tooltip in the toolbar search

Main Chat Area​

  • R.color.ecc_chat_background - Color of chat screen background, agent's profile, and “quick responses” dialog (does not apply to the image gallery and camera screens)
  • R.color.ecc_chat_highlighting - Message highlight color
  • R.color.ecc_chat_incoming_message_bubble - Color of the bubbles of incoming messages. This parameter also controls the color of a file icon in outgoing messages.
  • R.color.ecc_chat_outgoing_message_bubble - Color of the bubbles of outgoing messages.
  • R.drawable.thread_incoming_bubble - Background for agent messages (it's better to use the 9.png format, see an example here)
  • R.drawable.thread_outgoing_bubble - Background for client messages (it's better to use the 9.png format, see an example here)
  • R.color.ecc_chat_icons_tint - Color of the chat's main icons, as well as as well as file icons on the file list screen
  • R.color.ecc_chat_connection_message - Color of the text of messages about the agent typing, requiest to close the thread, unread messages; the color of the date subtitle on the chat screens and the attachment list
  • R.color.ecc_chat_system_message - Color of the text of quality surveys
  • R.color.ecc_icon_and_separators_color - Color of separators for requests to close the thread and quality surveys
  • R.drawable.ecc_operator_avatar_placeholder - Avatar of an agent that has no avatar (or if it can't be recevied from the server) (starting from version 3.8.6, vector images are supported)
  • R.dimen.ecc_operator_photo_size - Size of an agent's avatar for regular messages (default: 40dp). If you don't want the avatar to be displayed, set the parameter to 0 as there is no separate parameter for it.
  • R.dimen.ecc_system_operator_photo_size - Size of an agent's avatar for messages that they are typing a message (default: 40dp). If you don't want the avatar to be displayed, set the parameter to 0 as there is no separate parameter for it.
  • R.drawable.ecc_image_placeholder - Stub image for images that failed to load
  • R.array.ecc_swipe_refresh_colors - Progress animation colors SwipeRefreshLayout (3.7.2+)
  • R.color.ecc_consult_searching_progress_color - Colors of the progress loader
  • bubbleOutgoingPaddingLeft - Text padding from the left border of the bubble for outgoing messages from clients (4.0+)
  • bubbleOutgoingPaddingTop -Text padding from the upper border of the bubble for outgoing messages from clients (4.0+)
  • bubbleOutgoingPaddingRight - Text padding from the right border of the bubble for outgoing messages from clients - от клиента (4.0+)
  • bubbleOutgoingPaddingBottom - Text padding from the bottom border of the bubble for outgoing messages from clients (4.0+)
  • bubbleIncomingPaddingLeft - Text padding from the left border of the bubble for incoming messages from agents (4.0+)
  • bubbleIncomingPaddingTop - Text padding from the upper border of the bubble for incoming messages from agents (4.0+)
  • bubbleIncomingPaddingRight - Text padding from the right border of the bubble for incoming messages from agents (4.0+)
  • bubbleIncomingPaddingBottom - Text padding from the bottom border of the bubble for incoming messages from agents (4.0+)

Message Delivery Statuses​

  • R.color.ecc_incoming_message_text - Font color of incoming messages
  • R.color.ecc_outgoing_message_text - Font color of outgoing messages
  • R.color.ecc_operator_message_timestamp - Color of the agent's message timestamp
  • R.color.ecc_user_message_timestamp - Color of the client's message timestamp
  • R.color.ecc_outgoing_message_time - Color of the time in outgoing messages with an image
  • R.color.ecc_outgoing_time_underlay - Color of the underlay of the time in outgoing messages with an image
  • R.color.ecc_incoming_message_time - Color of the time in incoming messages with an image
  • R.color.ecc_incoming_time_underlay - Color of the underlay of the time in incoming messages with an image
  • R.color.ecc_outgoing_message_sent_icon - Icon color of the "Sent" status (a check mark) on a client's message
  • R.color.ecc_outgoing_message_received_icon - Icon color of the "Read" status (a double check mark) on a client's message
  • R.color.ecc_outgoing_message_not_send_icon - Icon color of the "Not sent" status on a client's message
  • R.color.ecc_outgoing_message_image_sent_icon - Icon color of the "Sent" status (a check mark) on a message with an image
  • R.color.ecc_outgoing_message_image_received_icon - Icon color of the "Read" status (a double check mark) on a message with an image
  • R.color.ecc_outgoing_message_image_failed_icon - Icon color of the "Not sent" status on a message with an image
  • R.drawable.ecc_message_image_sending - Icon of the "Sending" status on a client's message
  • R.drawable.ecc_message_sent - Icon of the "Sent" status (a check mark) on a client's message
  • R.drawable.ecc_message_received - Icon of the "Read" status (a double check mark) on a client's message
  • R.drawable.ecc_message_image_failed - Icon of the "Not sent" status on a client's message
  • R.drawable.ecc_message_image_sent - Icon of the "Sent" status (a check mark) on a message with an image
  • R.drawable.ecc_image_message_read - Icon of the "Read" status (a double check mark) on a message with an image
  • R.drawable.ecc_message_image_waiting - Icon of the "Not sent" status on a message with an image
  • R.drawable.ecc_timestamp_incoming_underlayer - Background of an overlay of the time on an incoming message with an image
  • R.drawable.timestamp_outgoing_underlayer - Background of an overlay of the time on an outgoing message with an image

Attachment List Screen​

  • R.color.ecc_files_medias_screen_background - Background color of the attachment list screen
  • R.color.ecc_files_list - Text color on the attachment list screen

Image Viewing Screen​

  • R.color.ecc_attachments_toolbar_background - Toolbar color
  • R.color.ecc_attachments_toolbar_text - Color of text and icons in the toolbar
  • R.color.ecc_attachments_background - Background color
  • R.color.ecc_attachments_author_text_color - Author's color
  • R.color.ecc_attachments_date_text_color - Date color
  • R.dimen.ecc_attachments_author_text_size - Author's font size
  • R.dimen.ecc_attachments_date_text_size - Date font size
  • setEmptyMediaAndFilesHeaderTextResId(@StringRes final int headerTextResId) - Text of the message header about an empty file list. It is displayed if there are no messages in the chat (4.0+).
  • setEmptyMediaAndFilesHeaderFontPath(@NonNull final String headerFontPath) - Text font of the message header about an empty file list. It is displayed if there are no messages in the chat (4.0+).
  • setEmptyMediaAndFilesHeaderTextSize(@DimenRes final int headerTextSizeResId) - Text size of the message header about an empty file list (in sp). It is displayed if there are no messages in the chat (4.0+).
  • setEmptyMediaAndFilesHeaderTextColor(@ColorRes final int headerTextColorResId) - Text color of the message header about an empty file list. It is displayed if there are no messages in the chat (4.0+).
  • setEmptyMediaAndFilesDescriptionTextResId(@StringRes final int descriptionTextResId) - Text of the message subheader about an empty file list. It is displayed if there are no messages in the chat (4.0+).
  • setEmptyMediaAndFilesDescriptionFontPath(@NonNull final String descriptionFontPath) - Text font of the message subheader about an empty file list. It is displayed if there are no messages in the chat (4.0+).
  • setEmptyMediaAndFilesDescriptionTextSize(@DimenRes final int descriptionTextSizeResId) - Text size of the message subheader about an empty file list (in sp). It is displayed if there are no messages in the chat (4.0+).
  • setEmptyMediaAndFilesDescriptionTextColor(@ColorRes final int descriptionTextColorResId) - Text color of the message header about an empty file list. It is displayed if there are no messages in the chat (4.0+).
  • setMediaAndFilesStatusBarColorResId(@ColorRes final int mediaAndFilesStatusBarColorResId) -Color of the status bar of the attachment list screen (4.0+).
  • setMediaAndFilesToolbarColorResId(@ColorRes final int mediaAndFilesToolbarColorResId) - Color of the toolbar of the attachment list screen (4.0+).
  • setMediaAndFilesToolbarTextColorResId(@ColorRes final int mediaAndFilesToolbarTextColorResId) - Color of text labels and toolbar icons of the attachment list screen (4.0+).
  • setMediaAndFilesToolbarHintTextColor(@ColorRes final int mediaAndFilesToolbarHintTextColor) - Hint color in the search toolbar of the attachment list screen (4.0+).
  • setMediaAndFilesScreenBackgroundColor(@ColorRes final int mediaAndFilesScreenBackgroundColor) - Background color of the attachment list screen (4.0+).
  • setMediaAndFilesTextColor(@ColorRes final int mediaAndFilesTextColor) - Text color on the attachment list screen (4.0+).
  • setMediaAndFilesWindowLightStatusBarResId(@BoolRes final int mediaAndFilesWindowLightStatusBarResId) - Customization of the status bar color and background. Use truefor a light status bar, otherwise - false (the light status bar has dark icons, and vic versa). Default: false. Corresponds to View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR (4.0+).

Scroll Button and Indicator of Unread Messages​

  • R.drawable.ecc_scroll_down_icon - Icon of the scroll button (i.e. the button that brings the client back to the most recent message in the chat) (3.7.2+).
  • R.drawable.ecc_scroll_down_background - Scroll button background (3.7.2+)
  • R.dimen.ecc_scroll_down_button_width - Scroll button width (3.7.2+)
  • R.dimen.ecc_scroll_down_button_height - Scroll button height (3.7.2+)
  • R.dimen.ecc_scroll_down_button_margin - Scroll button margin (3.7.2+)
  • R.dimen.ecc_scroll_down_button_elevation - Scroll button elevation (3.7.2+)
  • R.color.ecc_chat_unread_msg_sticker_background - Color of the indicator of unread messages
  • R.color.ecc_chat_unread_msg_count_text - Text color of the indicator of unread messages

Message Input Field​

  • R.color.ecc_input_hint - Text color of the hints in the message input widgets
  • R.color.ecc_input_background - Background color of the message input field
  • R.color.ecc_input_text - Font color of the message inpur field
  • R.drawable.ecc_ic_attachment_button - File attachment button icon
  • R.drawable.ecc_ic_send_button - Send button icon
  • R.string.ecc_input_hint - Hint in the message input field
  • R.dimen.ecc_input_height - Message inpiut field height
  • R.drawable.ecc_chat_input_background - Message input field background

Push Notifications​

  • R.drawable.ecc_default_push_icon - Default icon in a push message. If a message does not contain an imagу of the person you are chatting with, this will be a big icon. If it does - it will be a small icon in the lower right corner of the avatar of the person you are chatting with.
  • R.string.ecc_push_title - Color of the header of a push notification
  • R.color.ecc_push_background - Color of the background under the icon in the notification in the curtain (push messages)
  • R.color.nougat_push_accent - Color of the header and icon in a push notification for android N
  • R.color.ecc_chat_incoming_message_bubble - Background color of an incoming message in a quick response.
  • R.color.ecc_incoming_message_text - Text color of an incoming message in a quick response.

Request to Close Thread Early​

  • R.string.ecc_request_to_resolve_thread - Main text that is displayed
  • R.string.ecc_request_to_resolve_thread_close - Text on the button that closes the chat
  • R.string.ecc_request_to_resolve_thread_open - Text on the button that does not close the chat and continues it

Surveys​

  • R.drawable.ecc_binary_survey_like_unselected - Binary survey icon for a positive response not selected
  • R.drawable.ecc_binary_survey_like_selected - Binary survey icon for a positive response selected
  • R.drawable.ecc_binary_survey_dislike_unselected - Binary survey icon for a negative response not selected
  • R.drawable.ecc_binary_survey_dislike_selected - Binary survey icon for a negative response selected
  • R.drawable.ecc_options_survey_unselected - Binary survey icon for a not selected response (for example, a blank star)
  • R.drawable.ecc_options_survey_selected - Binary survey icon for a selected response (for example, a colored star)
  • R.color.ecc_survey_selected_icon_tint - Color filter for an icon of a selected response (for both binary and non-binary surveys)
  • R.color.ecc_survey_unselected_icon_tint - Color filter for an icon of a not selected response (for both binary and non-binary surveys)
  • R.color.ecc_survey_choices_text - Color of the text of the answers to the early completion request
  • ChatStyle.surveyCompletionDelay - Delay in completing the survey in milliseconds, during which you can change the score you gave. Default: 2,000. This parameter is set in ChatStyleBuilder.setSurveyStyle

Message about Chat Schedule​

  • R.drawable.ecc_schedule_icon - Message icon
  • R.color.ecc_schedule_text - Color of the message text

System Messages​

  • R.dimen.ecc_system_message_text_size - Font size
  • R.color.ecc_chat_new_system_message - Text color
  • R.dimen.ecc_system_message_left_right_padding - Padding at the beginning and end of a message
  • R.color.ecc_system_message_link - Link color in system messages

Customization of Voice Messages​

Voice Message Playback Buttons​

  • R.drawable.ecc_voice_message_play - Play button icon
  • R.drawable.ecc_voice_message_pause - Pause button icon
  • R.color.ecc_incoming_play_pause_button - Color of the play/pause button for agents' messages
  • R.color.ecc_outgoing_play_pause_button - Color of the play/pause button for clients' messages
  • R.color.ecc_preview_play_pause_button - Color of the play/pause preview message icon

Voice Message Recording Button​

  • R.drawable.ecc_record_button_icon - Record button icon
  • R.color.ecc_record_button_background - Background color of the record button
  • R.color.ecc_record_button_icon - Color of the record button icon
  • R.color.ecc_record_button_small_mic - Color of the flashing microphone icon

Slider Styles​

Slider styles control the playback of voice messages.

  • ThemeOverlay.ChatCenter.Slider.User - Style of a slider of a client's message
  • ThemeOverlay.ChatCenter.Slider.Consult - Style of a slider of an agent's message
  • ThemeOverlay.ChatCenter.Slider.Preview - Preview message slider style (before the message is sent)

Quick Response Styles​

  • R.drawable.ecc_quick_reply_button_background - Background of a quick response
  • R.color.ecc_quick_reply_text_color - Text color of a quick response

Empty Chat​

  • R.color.ecc_empty_state_background - Background color
  • R.color.ecc_empty_state_progress - Spinner color
  • R.color.ecc_empty_state_hint - Hint color
  • R.string.loading - Hint text

Window for Reason for Accessing File Storage, Camera, Microphone:​

If you want to cutomize dialof windows similar to ThreadsLib.getInstance().applyChatStyle(), you need to set styles (PermissionDescriptionDialogStyle style) for requests to access the storage, audio recording, and camera:

  • ThreadsLib.getInstance().applyStoragePermissionDescriptionDialogStyle(style) - To request access to the storage
  • ThreadsLib.getInstance().applyRecordAudioPermissionDescriptionDialogStyle(style) - To request access to the microphone
  • ThreadsLib.getInstance().applyCameraPermissionDescriptionDialogStyle(style) - To request access to the camera

You can get the default style by using the PermissionDescriptionDialogStyle.getDefaultDialogStyle(type) method, where PermissionDescriptionType type is the access type that you are requesting access to.

PermissionDescriptionDialogStyle includes:

  • PermissionDescriptionImageStyle - Image settings
  • PermissionDescriptionTextStyle - Heading and message settings
  • PermissionDescriptionButtonStyle - Settings of positive and negative buttons
  • PermissionDescriptionDialogBackgroundStyle - Background of the dialog window

PermissionDescriptionImageStyle allows you to configure the following:

  • imageResId - Image resource
  • marginTopDpResId - Top margin
  • layoutGravity - Left/middle/right alignment

PermissionDescriptionTextStyle allows you to configure the following:

  • textResId - Text resource
  • marginTopDpResId - Top margin
  • layoutGravity Left/middle/right alignment

You set the text style by either specifying the textAppearanceResId style, or, if textAppearanceResId is 0, by setting the path to the font file fontPath, text size textSizeSpResId, and text color textColorResId.

PermissionDescriptionButtonStyle allows you to configure the following:

  • textResId - Text resource
  • marginTopDpResId, marginBottomDpResId - Top and bottom margins. You set the text style by either specifying the textAppearanceResId style, or, if textAppearanceResId is 0, by setting the path to the font file fontPath, text size textSizeSpResId, and text color textColorResId.

You set the button style by either specifying the backgroundResId resource, or, if backgroundResId is 0, by specifying the radius of rounding cornerRadiusDpResId, fill color backgroundColorResId, border color strokeColorResId and width strokeWidthDpResId.

PermissionDescriptionDialogBackgroundStyle allows you to configure the background style. You set is either by specifying the  backgroundResId resource, or, if backgroundResId is 0, by specifying the radius of rounding cornerRadiusDpResId, fill color backgroundColorResId, border color strokeColorResId and width strokeWidthDpResId.

Dynamic Change of Resources​

In some cases (for example, in different configurations, or when a client's app is build in a specific way), simply replacing the color/icon in resources might not work. So, to do this, the library duplicates all customizations with methods of the ChatStyle class. For example, instead of redefining the color via R.color.ecc_chat_status_bar, you can use the following method:

    .setMediaAndFilesStatusBarColorResId(@ColorRes final int altThreadsChatStatusBar)
note

where altThreadsChatStatusBar is the ID of your alternative color in the resources.

The following describes some innovations in the customization of the chat style:

  • To redefine the resource of the "Send" button icon, you can use the following method:

.setSendMessageIconResId(@DrawableRes final int sendMessageIconResId)

  • To redefine the resource of the "Camera" button icon, you can use the following method:

.setAttachmentCameraIconResId(@DrawableRes final int attachmentCameraIconResId)

  • To redefine the resource of the "Gallery" button icon, you can use the following method:

.setAttachmentGalleryIconResId(@DrawableRes final int attachmentGalleryIconResId)

  • To redefine the resource of the "Files" button icon, you can use the following method:

.setAttachmentFileIconResId(@DrawableRes final int attachmentFileIconResId)

To color in the "Send" button, as well as the "Add attachment" and "Remove quotation" buttons according to their state (tapped, active, inactive), use the following method:

    .setChatBodyIconsColorStateTint(
        @ColorRes final int disabledColorTint,
        @ColorRes final int enabledColorTint,
        ColorRes final int pressedColorTint);
note

As parameters, the color resource IDs for the corresponding button states (tapped, active, inactive) are passed.

You can customize paddings and margins of the message input field. Margin is an indent between the input fild itself and components that are placed next to it. For example, to set the margin between the input field and the Send button, you need to specify the right margin. Padding is an indent between the message text and the border of the message input field.

To set your margins and paddings, use the following methods:

    .setInputFieldPadding(
        @DimenRes final int left,
        @DimenRes final int top,
        @DimenRes final int right,
        @DimenRes final int bottom
    )

    .setInputFieldMargin(
        @DimenRes final int left,
        @DimenRes final int top,
        @DimenRes final int right,
        @DimenRes final int bottom
    )
note

As parameters, IDs of the resources with the indent values are passed.

You can also change indents between the message text and the edge of the bubble. You can change indents on all sides for both incoming and outgoing messages:

    .setOutgoingPadding(
        @DimenRes int left,
        @DimenRes int top,
        @DimenRes int right,
        @DimenRes int bottom
    )

    .setIngoingPadding(
        @DimenRes int left,
        @DimenRes int top,
        @DimenRes int right,
        @DimenRes int bottom
    )

In addition, you can change the margins between the edge of the bubble itself and the surrounding elements:

    .setOutgoingMargin(
        @DimenRes int left,
        @DimenRes int top,
        @DimenRes int right,
        @DimenRes int bottom
    )

    .setIngoingMargin(
        @DimenRes int left,
        @DimenRes int top,
        @DimenRes int right,
        @DimenRes int bottom
    )
note

As parameters, IDs of the resources with the indent values are passed.

You can also change the text size that displays the time when the message was sent. Two methods are available, for incoming and outgoing messages:

    .setOutgoingTimeTextSize(@DimenRes final int outgoingTimeTextSize)
    .setIncomingTimeTextSize(@DimenRes final int incomingTimeTextSize)
note

As parameters, IDs of the resources with the text size values are passed.

You can also show or hide the toolbar shadow. Use the following method:

.setVisibleChatTitleShadow(@BoolRes final int isChatTitleShadowVisible)

note

As the parameter, the ID of the bool resource is passed. The shadow is visible by default.

In addition to configuring it from the resource by the R.bool.ecc_chat_search_enabled parameter, to enable/disable the search functionality in the chat you can use the following method:

.setSearchEnabled(@BoolRes final int searchEnabled);

note

As the parameter, the ID of the bool resource is passed. By default, the search functionality is enabled.

When requesting "Permissions", in some cases, the app user does not always understand why to give permissions to various app functionality. For this, an additional dialogue with explanations was implemented. You connect this dialog in ChatStyle.

.setArePermissionDescriptionDialogsEnabled(final boolean areEnabled)

The library supports three types of "Permissions": STORAGE, RECORD_AUDIO, CAMERA. To set their styles, use the following methods:

    .applyStoragePermissionDescriptionDialogStyle(@NonNull PermissionDescriptionDialogStyle dialogStyle)
    .applyRecordAudioPermissionDescriptionDialogStyle(@NonNull PermissionDescriptionDialogStyle dialogStyle)
    .applyCameraPermissionDescriptionDialogStyle(@NonNull PermissionDescriptionDialogStyle dialogStyle)

In turn, in PermissionDescriptionDialogStyle, you can redefine the header, text, image, buttons, and centering of all elements.

Image Margins from Bubble Edge​

Such margins make a border around the images and are set in ChatStyle using the following methods:

    ChatStyle setOutgoingImageBordersSize(
        @DimenRes int outgoingImageLeftBorderSize,
        @DimenRes int outgoingImageTopBorderSize,
        @DimenRes int outgoingImageRightBorderSize,
        @DimenRes int outgoingImageBottomBorderSize
    )
        
    ChatStyle setIncomingImageBordersSize(
        @DimenRes int incomingImageLeftBorderSize,
        @DimenRes int incomingImageTopBorderSize,
        @DimenRes int incomingImageRightBorderSize,
        @DimenRes int incomingImageBottomBorderSize
    )

These methods take input margins at the edges of the image from its bubble. OpenGraph quotes are not considered images.

Besides, the library allows you to set margins for the content on the bubble as a whole. These parameters are represented by the following fields: bubbleOutgoingPaddingLeft, bubbleOutgoingPaddingTop, bubbleOutgoingPaddingRight, bubbleOutgoingPaddingBottom, bubbleOutgoingPaddingBottom for outgoing messages and bubbleIncomingPaddingLeft, bubbleIncomingPaddingTop, bubbleIncomingPaddingRight, bubbleIncomingPaddingBottom for incoming ones. If the margins are set for images, and these margins are set for content, then the margins for images will have priority (which will also move the text under the image, aligning it to the left edge of the image).

The shape of the image indentation and the image itself are set by 9 patch png masks (format 9.png). It is set by the setChatBodyStyle method in the ChatStyle class, where some of the parameters are:

  • outgoingImageBubbleMask for an outgoing message without text
  • incomingImageBubbleMask for an incoming message without text
  • outgoingMessageBubbleBackground for an outgoing message with text
  • incomingMessageBubbleBackgroundfor an incoming message with text That is, the first two masks here set the shape of the image itself, the last two - the form of the bubble. These masks can also be configured separately via the methods setIncomingImageMask(@DrawableRes int mask), setIncomingBubbleMask(@DrawableRes int mask), setOutgoingImageMask(@DrawableRes int mask), setOutgoingBubbleMask(@DrawableRes int mask).

The size of the bubble with the image can also be configured. For that, in ChatStyle, call the setImageBubbleSize(float size) method, where size is the ration of how much space the bubble occupies of the screen width (the bubble is square). By default, it is set to 0.66 (two-thirds of the screen width).

You can customize the appearance of the Toast notifications. You can specify the text size, text color, and notification background color. To do this, use the following method:

    public ChatStyle setToastStyle(@DimenRes int toastTextSize,
                                   @ColorRes int toastTextColor,
                                   @ColorRes int toastBackgroundColor
    )

Other​

  • R.string.ecc_channel_name - Resource for configuring the name of the channel to which library notifications are sent
  • R.integer.ecc_max_count_attached_images - Resource for configuring the number of photos that the client can choose to attach to their message (the maximum setting value is 20)
Last updated on