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.
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
| Field | Description | Default value |
|---|---|---|
backBtn | Toolbar "back" button | R.drawable.ecc_ic_arrow_back_white_24dp |
menuIcon | Toolbar menu button | R.drawable.ecc_ic_more_vert_24dp |
searchIcon | Search icon | R.drawable.ecc_ic_search_white_24dp |
copyIcon | "Copy" button in the toolbar | R.drawable.ecc_ic_content_copy_24dp |
replyIcon | "Reply/quote" button in the toolbar | R.drawable.ecc_ic_reply_24dp |
Input field and send
| Field | Description | Default value |
|---|---|---|
chatInputBackground | Message input field background | R.drawable.ecc_chat_input_background |
attachIcon | Paper-clip icon (attachment) | R.drawable.ecc_ic_attachment_button |
sendBtn | Send button | R.drawable.ecc_ic_send_button |
voiceBtnBackground | Voice recording button background | R.drawable.ecc_record_button_background |
voiceBtnIcon | Microphone icon in the voice recording button | R.drawable.ecc_record_button_icon |
quoteClearBtn | Cancel quoting in the input field | R.drawable.ecc_ic_clear_36dp |
Messages and bubbles
| Field | Description | Default value |
|---|---|---|
incomingBubbleImage | Incoming bubble shape mask | R.drawable.alt_ecc_incoming_bubble |
outgoingBubbleImage | Outgoing bubble shape mask | R.drawable.alt_ecc_outgoing_bubble |
incomingImageMask | Incoming image shape mask in a message | R.drawable.alt_ecc_incoming_image_mask |
outgoingImageMask | Outgoing image shape mask | R.drawable.alt_ecc_outgoing_image_mask |
imagePlaceholder | Image placeholder in a message | R.drawable.ecc_image_placeholder |
timestampOutgoingBackground | Time underlay in an outgoing message | R.drawable.ecc_timestamp_outgoing_underlayer |
timestampIncomingBackground | Time background in an incoming message | R.drawable.ecc_timestamp_incoming_background |
Message statuses
| Field | Description | Default value |
|---|---|---|
messageSending | "Sending" status | R.drawable.ecc_message_image_sending |
messageSent | "Sent" status | R.drawable.ecc_message_image_sending |
messageDelivered | "Delivered" status | R.drawable.ecc_message_image_delivered |
messageRead | "Read" status | R.drawable.ecc_image_message_read |
messageFailed | "Error" status | R.drawable.ecc_message_image_failed |
messageEditedStatusIcon | "Edited" mark | R.drawable.ecc_message_image_edited |
messageSending and messageSent use the same resource by default. To visually distinguish "sending" from "sent", override messageSent with your own drawable.
Quotes and replies
| Field | Description | Default value |
|---|---|---|
quoteBackgroundImage | Quote block background | R.drawable.ecc_quote_background |
quoteIconBackground | File/microphone icon underlay in a quote | R.drawable.ecc_circle_gray_48dp |
quoteFileIcon | File icon in a quote | R.drawable.ecc_ic_file_outline_24dp |
quoteMicIcon | Microphone icon in a voice-message quote | R.drawable.ecc_ic_mic_24dp |
quoteImageMask | Image mask in a quote | R.drawable.ecc_quote_image_mask |
Voice messages
| Field | Description | Default value |
|---|---|---|
playIcon | Start playback | R.drawable.ecc_voice_message_play |
pauseIcon | Pause playback | R.drawable.ecc_voice_message_pause |
Files and downloads
| Field | Description | Default value |
|---|---|---|
downloadIcon | Download file (toolbar) | R.drawable.ecc_ic_file_download_white_24dp |
progressButtonStartDownload | Start download | R.drawable.ecc_ic_vertical_align_bottom_18dp |
progressButtonInProgress | Cancel an in-progress download | R.drawable.ecc_ic_clear_36dp |
progressButtonCompleted | Download completed | R.drawable.ecc_ic_file_outline_24dp |
selectRing | File selection ring (unselected) | R.drawable.ecc_aqua_ring |
Attachments menu (BottomMenuChatFlow)
| Field | Description | Default value |
|---|---|---|
attachmentCameraIcon | Camera in the attachments menu | R.drawable.ecc_ic_camera_42dp |
attachmentGalleryIcon | Gallery in the attachments menu | R.drawable.ecc_ic_photo_42dp |
attachmentFileIcon | File picker in the attachments menu | R.drawable.ecc_ic_file_fill_42dp |
attachmentSendIcon | Send with attachment | R.drawable.ecc_ic_send_42dp |
attachmentQuoteIcon | Quote with attachment | R.drawable.ecc_ic_reply_gray_24dp |
Search
| Field | Description | Default value |
|---|---|---|
clearSearch | Clear the search field | R.drawable.ecc_ic_clear_gray_30dp |
searchLoader | Loader while loading results | R.drawable.ecc_im_loading (value of the loader field) |
searchResultsItemRightArrow | Arrow in search results | R.drawable.right_arrow |
searchResultNoItemsImage | "Nothing found" image | R.drawable.ecc_search_not_found |
Surveys
| Field | Description | Default value |
|---|---|---|
quickReplyButtonBackground | Quick reply button background | R.drawable.ecc_quick_reply_button_background |
surveyButtonBackground | Survey button background | R.drawable.ecc_survey_button_backround |
rateStarSelected | Filled star (rating survey) | R.drawable.ecc_options_survey_selected |
rateStarUnselected | Empty star | R.drawable.ecc_options_survey_unselected |
binarySurveyLikeUnselectedIcon | Thumbs up (empty) | R.drawable.ecc_binary_survey_like_unselected |
binarySurveyLikeSelectedIcon | Thumbs up (filled) | R.drawable.ecc_binary_survey_like_selected |
binarySurveyDislikeUnselectedIcon | Thumbs down (empty) | R.drawable.ecc_binary_survey_dislike_unselected |
binarySurveyDislikeSelectedIcon | Thumbs down (filled) | R.drawable.ecc_binary_survey_dislike_selected |
Scrolling
| Field | Description | Default value |
|---|---|---|
scrollDownButtonIcon | "↓ to latest message" button icon | R.drawable.ecc_scroll_down_icon |
scrollDownBackground | Scroll-down button background | R.drawable.ecc_scroll_down_background |
scrollUpButtonIcon | "↑ up" button icon | R.drawable.ecc_scroll_up_icon |
scrollUpBackground | Scroll-up button background | R.drawable.ecc_scroll_down_background |
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
| Field | Description | Default value |
|---|---|---|
operatorAvatarPlaceholder | Operator avatar placeholder | R.drawable.ecc_operator_avatar_placeholder |
logoImage | Logo on the welcome screen | R.drawable.ecc_welcome_logo |
loader | Main center-screen loader | R.drawable.ecc_im_loading |
Push notifications and alerts
| Field | Description | Default value |
|---|---|---|
pushIcon | Push notification icon | R.drawable.ecc_default_push_icon |
balloonBackground | Toast/Snackbar background | R.drawable.ecc_background_snackbar |
Errors and schedule
| Field | Description | Default value |
|---|---|---|
errorScreenImage | Chat error screen image | R.drawable.ecc_serious_worker |
scheduleMessageIcon | Operator schedule message icon | R.drawable.ecc_schedule_icon |
scheduleMessageIconContainer | Schedule message icon underlay | R.drawable.circle_aqua_outline |
infoIcon | Information icon | R.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
)
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.
Related sections
- Design system: overview — how
ChatTheme,ChatImages,ChatColors,ChatTypographyare organized. - Screen components — where the listed icons appear on screen.
- Colors —
ChatColorstable. - Typography —
ChatTypography. - Themes — how
ChatImagesis integrated intoChatTheme. - Flows — screen-specific customization.
- Accessibility — message status icons and contentDescription.
- Known limitations — parameters with server-side priority.