Skip to main content
Version: 5.21.0

Images (ChatImages)

ChatImages controls all icons and drawable resources of the SDK. Values are set as R.drawable.* references. For searchLoader, the same resource as in loader is used by default.

All fields are of type Int (@DrawableRes). Most defaults are resources with the ecc_* prefix; specific exceptions (message bubble masks, schedule background, search-results arrow) are visible in the tables below.

Only what is listed here

Below is the exhaustive list of SDK-configurable icons, grouped by screen/context. If an icon is not in these tables, it is not part of the public API and cannot be changed.

Toolbar and navigation

FieldDescriptionDefault value
backBtnToolbar "back" buttonR.drawable.ecc_ic_arrow_back_white_24dp
menuIconToolbar menu buttonR.drawable.ecc_ic_more_vert_24dp
searchIconSearch iconR.drawable.ecc_ic_search_white_24dp
copyIcon"Copy" button in the toolbarR.drawable.ecc_ic_content_copy_24dp
replyIcon"Reply/quote" button in the toolbarR.drawable.ecc_ic_reply_24dp

Input field and send

FieldDescriptionDefault value
chatInputBackgroundMessage input field backgroundR.drawable.ecc_chat_input_background
attachIconPaper-clip icon (attachment)R.drawable.ecc_ic_attachment_button
sendBtnSend buttonR.drawable.ecc_ic_send_button
voiceBtnBackgroundVoice recording button backgroundR.drawable.ecc_record_button_background
voiceBtnIconMicrophone icon in the voice recording buttonR.drawable.ecc_record_button_icon
quoteClearBtnCancel quoting in the input fieldR.drawable.ecc_ic_clear_36dp

Messages and bubbles

FieldDescriptionDefault value
incomingBubbleImageIncoming bubble shape maskR.drawable.alt_ecc_incoming_bubble
outgoingBubbleImageOutgoing bubble shape maskR.drawable.alt_ecc_outgoing_bubble
incomingImageMaskIncoming image shape mask in a messageR.drawable.alt_ecc_incoming_image_mask
outgoingImageMaskOutgoing image shape maskR.drawable.alt_ecc_outgoing_image_mask
imagePlaceholderImage placeholder in a messageR.drawable.ecc_image_placeholder
timestampOutgoingBackgroundTime underlay in an outgoing messageR.drawable.ecc_timestamp_outgoing_underlayer
timestampIncomingBackgroundTime background in an incoming messageR.drawable.ecc_timestamp_incoming_background

Message statuses

FieldDescriptionDefault value
messageSending"Sending" statusR.drawable.ecc_message_image_sending
messageSent"Sent" statusR.drawable.ecc_message_image_sending
messageDelivered"Delivered" statusR.drawable.ecc_message_image_delivered
messageRead"Read" statusR.drawable.ecc_image_message_read
messageFailed"Error" statusR.drawable.ecc_message_image_failed
messageEditedStatusIcon"Edited" markR.drawable.ecc_message_image_edited
Matching default

messageSending and messageSent use the same resource by default. To visually distinguish "sending" from "sent", override messageSent with your own drawable.

Quotes and replies

FieldDescriptionDefault value
quoteBackgroundImageQuote block backgroundR.drawable.ecc_quote_background
quoteIconBackgroundFile/microphone icon underlay in a quoteR.drawable.ecc_circle_gray_48dp
quoteFileIconFile icon in a quoteR.drawable.ecc_ic_file_outline_24dp
quoteMicIconMicrophone icon in a voice-message quoteR.drawable.ecc_ic_mic_24dp
quoteImageMaskImage mask in a quoteR.drawable.ecc_quote_image_mask

Voice messages

FieldDescriptionDefault value
playIconStart playbackR.drawable.ecc_voice_message_play
pauseIconPause playbackR.drawable.ecc_voice_message_pause

Files and downloads

FieldDescriptionDefault value
downloadIconDownload file (toolbar)R.drawable.ecc_ic_file_download_white_24dp
progressButtonStartDownloadStart downloadR.drawable.ecc_ic_vertical_align_bottom_18dp
progressButtonInProgressCancel an in-progress downloadR.drawable.ecc_ic_clear_36dp
progressButtonCompletedDownload completedR.drawable.ecc_ic_file_outline_24dp
selectRingFile selection ring (unselected)R.drawable.ecc_aqua_ring

Attachments menu (BottomMenuChatFlow)

FieldDescriptionDefault value
attachmentCameraIconCamera in the attachments menuR.drawable.ecc_ic_camera_42dp
attachmentGalleryIconGallery in the attachments menuR.drawable.ecc_ic_photo_42dp
attachmentFileIconFile picker in the attachments menuR.drawable.ecc_ic_file_fill_42dp
attachmentSendIconSend with attachmentR.drawable.ecc_ic_send_42dp
attachmentQuoteIconQuote with attachmentR.drawable.ecc_ic_reply_gray_24dp
FieldDescriptionDefault value
clearSearchClear the search fieldR.drawable.ecc_ic_clear_gray_30dp
searchLoaderLoader while loading resultsR.drawable.ecc_im_loading (value of the loader field)
searchResultsItemRightArrowArrow in search resultsR.drawable.right_arrow
searchResultNoItemsImage"Nothing found" imageR.drawable.ecc_search_not_found

Surveys

FieldDescriptionDefault value
quickReplyButtonBackgroundQuick reply button backgroundR.drawable.ecc_quick_reply_button_background
surveyButtonBackgroundSurvey button backgroundR.drawable.ecc_survey_button_backround
rateStarSelectedFilled star (rating survey)R.drawable.ecc_options_survey_selected
rateStarUnselectedEmpty starR.drawable.ecc_options_survey_unselected
binarySurveyLikeUnselectedIconThumbs up (empty)R.drawable.ecc_binary_survey_like_unselected
binarySurveyLikeSelectedIconThumbs up (filled)R.drawable.ecc_binary_survey_like_selected
binarySurveyDislikeUnselectedIconThumbs down (empty)R.drawable.ecc_binary_survey_dislike_unselected
binarySurveyDislikeSelectedIconThumbs down (filled)R.drawable.ecc_binary_survey_dislike_selected

Scrolling

FieldDescriptionDefault value
scrollDownButtonIcon"↓ to latest message" button iconR.drawable.ecc_scroll_down_icon
scrollDownBackgroundScroll-down button backgroundR.drawable.ecc_scroll_down_background
scrollUpButtonIcon"↑ up" button iconR.drawable.ecc_scroll_up_icon
scrollUpBackgroundScroll-up button backgroundR.drawable.ecc_scroll_down_background
Matching default

scrollDownBackground and scrollUpBackground point to the same resource by default. If "↓" and "↑" button backgrounds in your theme must differ, override both fields.

Avatars and placeholders

FieldDescriptionDefault value
operatorAvatarPlaceholderOperator avatar placeholderR.drawable.ecc_operator_avatar_placeholder
logoImageLogo on the welcome screenR.drawable.ecc_welcome_logo
loaderMain center-screen loaderR.drawable.ecc_im_loading

Push notifications and alerts

FieldDescriptionDefault value
pushIconPush notification iconR.drawable.ecc_default_push_icon
balloonBackgroundToast/Snackbar backgroundR.drawable.ecc_background_snackbar

Errors and schedule

FieldDescriptionDefault value
errorScreenImageChat error screen imageR.drawable.ecc_serious_worker
scheduleMessageIconOperator schedule message iconR.drawable.ecc_schedule_icon
scheduleMessageIconContainerSchedule message icon underlayR.drawable.circle_aqua_outline
infoIconInformation iconR.drawable.ecc_info_icon

Basic customization

val images = ChatImages().apply {
backBtn = R.drawable.your_back_24dp
sendBtn = R.drawable.your_send_24dp
operatorAvatarPlaceholder = R.drawable.your_avatar_placeholder
}

val theme = ChatTheme(
applicationContext,
images = images
)
Override only the fields you need

The ChatImages() constructor with no parameters creates an object with all defaults. Use apply { ... } to override only the fields needed by your brand — the rest remain standard.

Full brand kit

If you need to assemble a fully branded theme, ChatImages is passed into ChatTheme alongside ChatColors and ChatTypography.

val brandImages = ChatImages().apply {
logoImage = R.drawable.brand_welcome_logo
backBtn = R.drawable.brand_ic_back
sendBtn = R.drawable.brand_ic_send
attachmentCameraIcon = R.drawable.brand_ic_camera
pushIcon = R.drawable.brand_ic_push
}

val theme = ChatTheme(
applicationContext,
colors = brandColors,
images = brandImages,
typography = brandTypography
)

A detailed scenario of building light and dark themes is in Themes.