Перейти к основному содержимому
Версия: 4.20.0

Настройка внешнего вида

Автоскролл​

Если история чата прокручена к более старым сообщениям, в чате появляется кнопка возврата к последним сообщениям и действует следующее поведение:

  • в чате получен TYPING (индикация набора входящего сообщения) = > пользователь остается на текущей позиции истории, ничего не перемещается;
  • в чате получено любое входящее сообщение = > пользователь остается в текущей позиции истории, ничего не перемещается, на кнопке прокрутки появляется индикатор непрочитанных сообщений с указанием количества таких сообщений;
  • пользователь отправил сообщение = > чат прокручивается к последнему сообщению пользователя.

Настройка поведения чата​

Поведением чата управляют методы ChatStyle:

  • showChatBackButton(boolean showBackButton) - показывать ли кнопку “Назад” в тулбаре, по-умолчанию false
  • centerToolbarText() - центрирует текст в тулбаре, по умолчанию выравнивается по левому краю.
  • setShowConsultSearching(boolean show) - показывать ли прогресс при поиске оператора, по-умолчанию false
  • setCanShowSpecialistInfo(boolean show) - можно ли открыть экран с информацией об операторе, по-умолчанию true
  • setScrollChatToEndIfUserTyping(boolean scroll) - true - при открытии экранной клавиатуры чат всегда прокручивается к последнему сообщению, false - при открытии клавиатуры пользователь остается на текущей позиции истории чата (она поднимается на высоту клавиатуры), по-умолчанию false
  • setChatSubtitleShowConsultOrgUnit(boolean enabled) - показывать подразделение агента в подзаголовке тулбара, по-умолчанию выключено
  • setInputEnabledDuringQuickReplies(boolean inputEnabledDuringQuickReplies) - активно ли поле ввода, когда активен диалог с быстрыми ответами (по-умолчанию false)
  • setFixedChatTitle(boolean isFixed) - показывает всегда заголовок в тулбаре, по-умолчанию false. Текст заголовка задается параметром chatTitleTextResId в методе setChatTitleStyle(...)
  • setFixedChatSubtitle(boolean isFixed) - показывает всегда подзаголовок в тулбаре, по-умолчанию false
  • setVisibleChatSubtitle(boolean isVisible) - определяет, показывать ли подзаголовок в тулбар, по-умолчанию true
  • setSearchEnabled(boolean enabled) - определяет доступность поиска, по-умолчанию true

и в ConfigBuilder:

  • surveyCompletionDelay - Задержка завершения опроса в миллисекундах, в течение которой можно поменять оценку. По умолчанию 2 000.

и в ConfigBuilder:

  • surveyCompletionDelay - Задержка завершения опроса в миллисекундах, в течение которой можно поменять оценку. По умолчанию 2 000.

Включение отправки файлов​

Для включения возможности прикрепления вложения необходимо в манифесте установить в true следующий параметр:

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

Или можно сделать это программно с помощью метода showAttachmentsButton() при создании ConfigBuilder:

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

Настройка стиля заголовков чата​

Стили заголовков тулбара в чате устанавливаются через следующий метод в 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
    )

Данным параметрам также соответствуют следующие ресурсы:

    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

Данные поля отвечают за следующий функционал:

  • chatTitleTextResId - текст для строки оператора
  • chatSubtitleTextResId - текст для строки подзаголовка в тулбаре под именем оператора
  • chatToolbarColorResId - цвет тулбара и нижнего навигационного меню в выбранном состоянии
  • chatToolbarTextColorResId - цвет текста в тулбаре
  • chatStatusBarColorResId - цвет статус бара
  • windowLightStatusBarResId - флаг, оповещающий sdk о том, что используется светлый статус бар
  • menuItemTextColorResId - цвет текста пунктов меню
  • chatToolbarHintTextColor - цвет подсказок в тулбаре для полей ввода (поиск)

Настройка стиля сообщений чата​

Стилем чата управляют методы и поля ChatStyle. Все поля, указанные ниже, используют прямую ссылку на ресурс. Например, R.color.blue для указания цвета. Данные параметры можно установить напрямую, либо через сеттер отдельных полей, либо через общий метод setChatBodyStyle, доступный в классе ChatStyle.

  • chatBackgroundColor - цвет фона для чата (ссылка на ресурс, например, R.color.blue)
  • chatHighlightingColor - цвет подсветки сообщения при его выделении
  • incomingMessageBubbleColor - цвет баббла для входящих сообщений
  • outgoingMessageBubbleColor - цвет баббла для исходящих сообщений
  • incomingMessageBubbleBackground - ресурс в формате 9.png, определяющий форму баббла входящего сообщения
  • outgoingMessageBubbleBackground - ресурс в формате 9.png, определяющий форму баббла исходящего сообщения
  • incomingMessageTextColor - цвет текста входящих сообщений
  • outgoingMessageTextColor - цвет текста исходящих сообщений
  • incomingMessageTimeColor - цвет текста для метки времени во входящих сообщениях
  • outgoingMessageTimeColor - цвет текста для метки времени в исходящих сообщениях
  • incomingMessageTimeTextSize - размер текста для метки времени во входящих сообщениях (dimen)
  • outgoingMessageTimeTextSize - размер текста для метки времени в исходящих сообщениях (dimen)
  • incomingMessageLinkColor - цвет ссылок для входящий сообщений
  • outgoingMessageLinkColor - цвет ссылок для исходящих сообщений
  • chatBodyIconsTint - цвет иконок для чата
  • chatSystemMessageTextColor - цвет текста для системных сообщений
  • setIncomingMarkdownConfiguration(MarkdownConfiguration incoming) - настройка стиля для входящих маркдаун сообщений

Стилем входящих или исходящих изображений без текста управляют отдельные поля:

  • outgoingImageBubbleMask - ресурс в формате 9.png, определяющий форму баббла исходящего изображения
  • incomingImageBubbleMask - ресурс в формате 9.png, определяющий форму баббла входящего изображения
  • outgoingImageTimeColor - цвет текста для метки времени в исходящих изображениях
  • outgoingImageTimeBackgroundColor - цвет фона для метки времени в исходящих изображениях
  • incomingImageTimeColor - цвет текста для метки времени во входящих изображениях
  • incomingImageTimeBackgroundColor - цвет фона для метки времени во входящих изображениях

Отступы для сообщений определяются следующими параметрами (dimen ресурс):

Исходящие:

  • bubbleOutgoingPaddingLeft, bubbleOutgoingPaddingTop, bubbleOutgoingPaddingRight, bubbleOutgoingPaddingBottom

Входящие:

  • bubbleIncomingPaddingLeft, bubbleIncomingPaddingTop, bubbleIncomingPaddingRight, bubbleIncomingPaddingBottom

Настройка шрифтов​

Задаются методами ChatStyle. Параметр path - путь к нужному шрифту в папке assets - например, “fonts/font_name.ttf”.

  • setDefaultFontBold(String path) - шрифт Bold для чата в целом
  • setDefaultFontLight(String path) - шрифт Light для чата в целом
  • setDefaultFontRegular(String path) - шрифт Regular для чата в целом
  • setToolbarTitleFont(String path) - шрифт текста в тулбаре для имени оператора или текста “поиск оператора”
  • setToolbarSubtitleFont(String path) - шрифт текста в тулбаре для надписи “оператор” под именем оператора
  • setPlaceholderTitleFont(String path) - шрифт заголовка текста на экране-заглушке (пустой экран)
  • setPlaceholderSubtitleFont(String path) - шрифт подзаголовка на экране-заглушке (пустой экран)
  • setInputQuotedMessageAuthorFont(String path) - шрифт имени автора цитируемого сообщения в поле ввода
  • setInputQuotedMessageFont(String path) - шрифт текста цитируемого сообщения в поле ввода
  • setBubbleMessageFont(String path) - шрифт текста сообщения
  • setBubbleTimeFont(String path) - шрифт времени отправки сообщения
  • setQuoteAuthorFont(String path) - шрифт имени автора цитируемого сообщения
  • setQuoteMessageFont(String path) - шрифт текста цитируемого сообщения
  • setQuoteTimeFont(String path) - Шрифт даты цитируемого сообщения
  • setMessageHeaderFont(String path) - Шрифт даты отправки сообщений (Отображается не в самом сообщении, а в списке, как разделитель по дням)
  • setSpecialistConnectTitleFont(String path) - Шрифт имени оператора в сообщении о его присоединении
  • setSpecialistConnectSubtitleFont(String path) - Шрифт сопроводительного текста в сообщении о коннекте оператора
  • setTypingFont(String path) - шрифт текста “оператор печатает”
  • setScheduleAlertFont(String path) - шрифт текста в сообщении о недоступности чата
  • setInputTextFont(String path) - шрифт текста в поле ввода сообщения
  • setSystemMessageFont(String path) - шрифт системных уведомлений

Настройка иконок статусов для исходящих сообщений​

Кастомизация иконок статусов исходящих сообщений возможна с помощью методов setMessageSendingResources(...) setMessageSentResources(...),setMessageDeliveredResources(...), setMessageReadResources(...). Каждый метод принимает на вход ссылку на ресурс иконки и ссылку на ресурс цвета для данной иконки.

Настройка ресурсов​

Основной экран чата​

Приветствие (отображается, пока в чате нет сообщений)​

  • R.drawable.ecc_welcome_logo - приветственое лого
  • R.string.ecc_welcome_screen_title_text - заголовок приветствия
  • R.string.ecc_welcome_screen_subtitle_text - текст подзагаловка приветствия
  • R.color.ecc_welcome_screen_title - цвет заголовка приветствия
  • R.color.ecc_welcome_screen_subtitle - цвет подзагаловка приветствия
  • R.dimen.ecc_welcome_screen_title - размер шрифта в заголовке приветствия
  • R.dimen.ecc_welcome_screen_subtitle - размер шрифта в подзагаловке приветствия
  • R.dimen.ecc_welcome_logo_width - ресурс для настройки ширины приветственного лого (3.7.2+)
  • R.dimen.ecc_welcome_logo_height - ресурс для настройки высоты приветственного лого (3.7.2+)

Заголовок экрана чата (Toolbar)​

  • R.string.ecc_contact_center - текст в тулбаре, когда нет активной беседы или собеседник отключился от неё (умол. "Контакт центр")
  • R.bool.ecc_chat_fixed_chat_title - позволяет задать дефолтный текст в тулбаре не зависимо от состояния чата (3.8.7+)
  • R.bool.ecc_chat_search_enabled - позволяет включить или выключить функционал поиска
  • R.string.ecc_searching_operator - текст в тулбаре во время поиска оператора (умол. "Поиск оператора...")
  • R.string.ecc_operator_subtitle - текст в тулбаре после подключения оператора (умол. "Оператор")
  • R.string.ecc_unknown_operator - текст в тулбаре после подключения оператора, если имя оператора неизвестно (умол. "Неизвестный")
  • R.color.ecc_chat_toolbar - цвет тулбара на экранах чата, выбора фотографии из галереи, списка вложений и цвет заголовка в диалоге “быстрого ответа”, открываемого из пуш-уведомления
  • R.color.ecc_chat_toolbar_context_menu - цвет тулбара, когда активны кнопки скопировать/цитировать (3.7.2+)
  • R.color.ecc_chat_toolbar_text - цвет текстовых лейблов и иконок тулбара на экранах чата, списка вложений, профиля консультанта и цвет текста заголовка в диалоге “быстрого ответа”, открываемого из пуш-уведомления
  • R.color.ecc_chat_status_bar - цвет статус-бара экранов чата, списка вложений и цвет статус-бара при отображении диалога “быстрого ответа”, открываемого из пуш-уведомления
  • R.bool.ecc_chat_is_light_status_bar - true, если светлый status bar, иначе false (у светлого status bar'а тёмные иконки, и наоборот). Значение по умолчанию false. Соответствует View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR (3.8.5+)
  • R.color.ecc_chat_toolbar_menu_item - цвет текста выпадающего меню тулбара (OverflowMenu)
  • R.color.ecc_chat_toolbar_hint - цвет подсказки в поиске тулбара

Основная область чата​

  • R.color.ecc_chat_background - цвет фона экранов чата, профиля консультанта и диалога “быстрого ответа” (не касается экранов галереи изображений и камеры)
  • R.color.ecc_chat_highlighting - цвет подсветки сообщений
  • R.color.ecc_chat_incoming_message_bubble - цвет “пузырьков” входящих сообщений. Также отвечает за цвет иконки файла в исходящих сообщениях
  • R.color.ecc_chat_outgoing_message_bubble - цвет “пузырьков” исходящих сообщений.
  • R.drawable.ecc_incoming_bubble - фон для сообщения оператора (лучше использовать формат 9.png, пример ресурса)
  • R.drawable.ecc_outgoing_bubble - фон для сообщения клиента (лучше использовать формат 9.png, пример ресурса)
  • R.color.ecc_chat_icons_tint - цвет основных иконок чата, а также иконок файлов на экране списка файлов
  • R.color.ecc_chat_connection_message - цвет текста сообщений о тайпинге оператора, запроса на завершение треда, непрочитанных сообщениях; цвет подзаголовока даты на экранах чата и списка вложений
  • R.color.ecc_chat_system_message - цвет текста опросов о качестве обслуживания
  • R.color.ecc_icon_and_separators_color - цвет разделителей запросов на завершение треда и опросов о качестве обслуживания
  • R.drawable.ecc_operator_avatar_placeholder - аватар оператора, у которого нет аватара (или в случае ошибки его получения с сервера) (с версии 3.8.6 поддерживает векторные изображения)
  • R.dimen.ecc_operator_photo_size - размер аватара оператора для обычных сообщений (по умол. 40dp). Чтобы не показывать аватар - укажите здесь размер 0. Отдельного параметра "не показывать аватар" нет.
  • R.dimen.ecc_system_operator_photo_size - размер аватара оператора для сообщений о том, что оператор пишет сообщение (по умол. 40dp). Чтобы не показывать аватар - укажите здесь размер 0. Отдельного параметра "не показывать аватар" нет.
  • R.drawable.ecc_image_placeholder - изображение-заглушка для изображений, которые не удалось загрузить
  • R.array.ecc_swipe_refresh_colors - цвета прогресс-анимации SwipeRefreshLayout (3.7.2+)
  • R.color.ecc_consult_searching_progress_color - цвета прогресс-лоадера
  • bubbleOutgoingPaddingLeft - отступ текста от левого края баббла для исходящих сообщений - от клиента (4.0+)
  • bubbleOutgoingPaddingTop - отступ текста от верхнего края баббла для исходящих сообщений - от клиента (4.0+)
  • bubbleOutgoingPaddingRight - отступ текста от правого края баббла для исходящих сообщений - от клиента (4.0+)
  • bubbleOutgoingPaddingBottom - отступ текста от нижнего края баббла для исходящих сообщений - от клиента (4.0+)
  • bubbleIncomingPaddingLeft - отступ текста от левого края баббла для вхоядщих сообщений - от оператора (4.0+)
  • bubbleIncomingPaddingTop - отступ текста от верхнего края баббла для вхоядщих сообщений - от оператора (4.0+)
  • bubbleIncomingPaddingRight - отступ текста от правого края баббла для вхоядщих сообщений - от оператора (4.0+)
  • bubbleIncomingPaddingBottom - отступ текста от нижнего края баббла для вхоядщих сообщений - от оператора (4.0+)

Статусы доставки сообщений​

  • R.color.ecc_incoming_message_text - цвет шрифта входящих сообщений
  • R.color.ecc_outgoing_message_text - цвет шрифта исходящих сообщений
  • R.color.ecc_operator_message_timestamp - цвет времени сообщений оператора
  • R.color.ecc_user_message_timestamp - цвет времени сообщений клиента
  • R.color.ecc_outgoing_message_time - цвет времени в исходящих сообщениях с изображением
  • R.color.ecc_outgoing_time_underlay - цвет подложки под временем в исходящих сообщениях с изображением
  • R.color.ecc_incoming_message_time - цвет времени во входящих сообщениях с изображением
  • R.color.ecc_incoming_time_underlay - цвет подложки под временем во входящих сообщениях с изображением
  • R.color.ecc_outgoing_message_sent_icon - цвет иконки статуса "Отправлено" (галочка) на сообщении клиента
  • R.color.ecc_outgoing_message_received_icon - цвет иконки статуса "Прочитано" (двойная галочка) на сообщении клиента
  • R.color.ecc_outgoing_message_not_send_icon - цвет иконки статуса "Не отправлено" на сообщении клиента
  • R.color.ecc_outgoing_message_image_sent_icon - цвет иконки статуса "Отправлено" (галочка) на сообщении с изображением
  • R.color.ecc_outgoing_message_image_received_icon - цвет иконки статуса "Прочитано" (двойная галочка) на сообщении с изображением
  • R.color.ecc_outgoing_message_image_failed_icon - цвет иконки статуса "Не отправлено" на сообщении с изображением
  • R.drawable.ecc_message_image_sending - иконка статуса "Отправляется" на сообщении клиента
  • R.drawable.ecc_message_sent - иконка статуса "Отправлено" (галочка) на сообщении клиента
  • R.drawable.ecc_message_received - иконка статуса "Прочитано" (двойная галочка) на сообщении клиента
  • R.drawable.ecc_message_image_failed - иконка статуса "Не отправлено" на сообщении клиента
  • R.drawable.ecc_message_image_sent - иконка статуса "Отправлено" (галочка) на сообщении с изображением
  • R.drawable.ecc_image_message_read - иконка статуса "Прочитано" (двойная галочка) на сообщении с изображением
  • R.drawable.ecc_message_image_waiting - иконка статуса "Не отправлено" на сообщении с изображением
  • R.drawable.ecc_timestamp_incoming_underlayer - бэкграунд подложки под временем на входящем сообщении с изображением
  • R.drawable.ecc_timestamp_incoming_underlayer - бэкграунд подложки под временем на исходящем сообщении с изображением

Экран списка вложений​

  • R.color.ecc_files_medias_screen_background - цвет фона экрана списка вложений
  • R.color.ecc_files_list - цвет текста на экране списка вложений

Экран просмотра изображений​

  • R.color.ecc_attachments_toolbar_backgroundцвет тулбара
  • R.color.ecc_attachments_toolbar_text - цвет текста и иконок в тулбаре
  • R.color.ecc_attachments_background - цвет фона
  • R.color.ecc_attachments_author_text_color - цвет автора
  • R.color.ecc_attachments_date_text_color - цвет даты
  • R.dimen.ecc_attachments_author_text_size - размер шрифта автора
  • R.dimen.ecc_attachments_date_text_size - размер шрифта даты
  • setEmptyMediaAndFilesHeaderTextResId(@StringRes final int headerTextResId) - текст заголовка сообщения о пустом списке файлов. Отображается, если в переписке нет сообщений (4.0+)
  • setEmptyMediaAndFilesHeaderFontPath(@NonNull final String headerFontPath) - шрифт текста заголовка сообщения о пустом списке файлов. Текст отображается, если в переписке нет сообщений (4.0+)
  • setEmptyMediaAndFilesHeaderTextSize(@DimenRes final int headerTextSizeResId) - размер в sp текста заголовка сообщения о пустом списке файлов. Текст отображается, если в переписке нет сообщений (4.0+)
  • setEmptyMediaAndFilesHeaderTextColor(@ColorRes final int headerTextColorResId) - цвет текста заголовка сообщения о пустом списке файлов. Текст отображается, если в переписке нет сообщений (4.0+)
  • setEmptyMediaAndFilesDescriptionTextResId(@StringRes final int descriptionTextResId) - текст подзаголовка сообщения о пустом списке файлов. Отображается, если в переписке нет сообщений (4.0+)
  • setEmptyMediaAndFilesDescriptionFontPath(@NonNull final String descriptionFontPath) - шрифт подзаголовка сообщения о пустом списке файлов. Текст отображается, если в переписке нет сообщений (4.0+)
  • setEmptyMediaAndFilesDescriptionTextSize(@DimenRes final int descriptionTextSizeResId) - размер в sp текста подзаголовка сообщения о пустом списке файлов. Текст отображается, если в переписке нет сообщений (4.0+)
  • setEmptyMediaAndFilesDescriptionTextColor(@ColorRes final int descriptionTextColorResId) - цвет текста подзаголовка сообщения о пустом списке файлов. Текст отображается, если в переписке нет сообщений (4.0+)
  • setMediaAndFilesStatusBarColorResId(@ColorRes final int mediaAndFilesStatusBarColorResId) - цвет статус-бара экрана списка вложений (4.0+)
  • setMediaAndFilesToolbarColorResId(@ColorRes final int mediaAndFilesToolbarColorResId) - цвет тулбара экрана списка вложений (4.0+)
  • setMediaAndFilesToolbarTextColorResId(@ColorRes final int mediaAndFilesToolbarTextColorResId) - цвет текстовых лейблов и иконок тулбара экрана списка вложений (4.0+)
  • setMediaAndFilesToolbarHintTextColor(@ColorRes final int mediaAndFilesToolbarHintTextColor) - цвет подсказки в поиске тулбара экрана списка вложений (4.0+)
  • setMediaAndFilesScreenBackgroundColor(@ColorRes final int mediaAndFilesScreenBackgroundColor) - цвет фона экрана списка вложений (4.0+)
  • setMediaAndFilesTextColor(@ColorRes final int mediaAndFilesTextColor) - цвет текста на экране списка вложений (4.0+)
  • setMediaAndFilesWindowLightStatusBarResId(@BoolRes final int mediaAndFilesWindowLightStatusBarResId) - кастомизация цвета статус бара и фона. Используйте true для светлого status bar, иначе false (у светлого status bar'а тёмные иконки, и наоборот). Значение по умолчанию false. Соответствует View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR (4.0+)

Кнопка прокрутки чата к последнему сообщению и индикатор непрочитанных сообщений​

  • R.drawable.ecc_scroll_down_btn_back - ресурс был удалён (нужно использовать новые ресуры eccscroll_down*) (удалён в 3.7.2)
  • R.drawable.ecc_scroll_down_icon - ресурс для настройки иконки кнопки "вернуться к концу переписки" (3.7.2+)
  • R.drawable.ecc_scroll_down_background - ресурс для настройки бэкграунда кнопки "вернуться к концу переписки" (3.7.2+)
  • R.dimen.ecc_scroll_down_button_width - ресурс для настройки ширины кнопки "вернуться к концу переписки" (3.7.2+)
  • R.dimen.ecc_scroll_down_button_height - ресурс для настройки высоты кнопки "вернуться к концу переписки" (3.7.2+)
  • R.dimen.ecc_scroll_down_button_margin - ресурс для настройки отступа от края кнопки "вернуться к концу переписки" (3.7.2+)
  • R.dimen.ecc_scroll_down_button_elevation - ресурс для настройки elevation кнопки "вернуться к концу переписки" (3.7.2+)
  • R.color.ecc_chat_unread_msg_sticker_background - цвет индикатора о непрочитанных сообщениях
  • R.color.ecc_chat_unread_msg_count_text - цвет текста на индикаторе о непрочитанных сообщениях

Поле ввода сообщения​

  • R.color.ecc_input_hint - цвет текста подсказок в виджетах ввода текста
  • R.color.ecc_input_background - цвет фона поля ввода текста
  • R.color.ecc_input_text - цвет шрифта поля ввода сообщения
  • R.drawable.ecc_ic_attachment_button - иконка кнопки прикрепления файлов
  • R.drawable.ecc_ic_send_button - иконка кнопки отправки сообщений
  • R.string.ecc_input_hint - подсказка в поле ввода сообщения
  • R.dimen.ecc_input_height - высота поля ввода сообщения
  • R.drawable.ecc_chat_input_background - фон поля ввода сообщения

Пуш уведомления​

  • R.drawable.ecc_default_push_icon - дефолтная иконка в пуш-сообщении. В случае если сообщение не содержит изображения собеседника - это будет большая иконка, в случае если сообщение его содержит - маленькая круглая иконка в нижнем правом углу аватара собеседника
  • R.string.ecc_push_title - текст заголовка пуш сообщений
  • R.color.ecc_push_background - цвет подложки под иконкой в уведомлении в шторке (пуш-сообщения)
  • R.color.nougat_push_accent - цвет заголовка и иконки в заголовке в пуш сообщения для android N
  • R.color.ecc_chat_incoming_message_bubble - цвет фона входящего сообщения в быстром ответе
  • R.color.ecc_incoming_message_text - цвет текста входящего сообщения в быстром ответе

Запрос на досрочное завершение чата​

  • R.string.ecc_request_to_resolve_thread - основной текст, который выводится при отображении запроса на досрочное завершение чата
  • R.string.ecc_request_to_resolve_thread_close - текст на кнопке согласия с досрочным завершением чата (завершить консультацию)
  • R.string.ecc_request_to_resolve_thread_open - текст на кнопке отказа от досрочного завершения чата (продолжить консультацию)

Опросы​

  • R.drawable.ecc_binary_survey_like_unselected - Иконка бинарного опроса для положительного не выбранного ответа
  • R.drawable.ecc_binary_survey_like_selected - Иконка бинарного опроса для положительного выбранного ответа
  • R.drawable.ecc_binary_survey_dislike_unselected - Иконка бинарного опроса для отрицательного не выбранного ответа
  • R.drawable.ecc_binary_survey_dislike_selected - Иконка бинарного опроса для отрицательного выбранного ответа
  • R.drawable.ecc_options_survey_unselected - Иконка небинарного опроса для невыбранного ответа (напр, пустая звездочка)
  • R.drawable.ecc_options_survey_selected - Иконка небинарного опроса для выбранного ответа (напр, звездочка с заливкой)
  • R.color.ecc_survey_selected_icon_tint - Цветовой фильтр на иконку выбранного ответа (касается и бинарного и не бинарного опросов)
  • R.color.ecc_survey_unselected_icon_tint - Цветовой фильтр на иконку невыбранного ответа (касается и бинарного и не бинарного опросов)
  • R.color.ecc_survey_choices_text - Цвет текста ответов на опрос досрочного завершения
  • ChatStyle.surveyFinalColorFilterResId - Цветовой фильтр на иконку отображающую результат голосования (касается и бинарного и не бинарного опросов) ChatStyleBuilder.setSurveyStyle

Сообщения о расписании (доступность чата)​

  • R.drawable.ecc_schedule_icon - иконка сообщения о расписании
  • R.color.ecc_schedule_text - цвет текста в сообщении о расписании

Системные сообщения​

  • R.dimen.ecc_system_message_text_size - размер шрифта системных уведомлений
  • R.color.ecc_chat_new_system_message - цвет текста системных уведомлений
  • R.dimen.ecc_system_message_left_right_padding - паддинг в начале и конце уведомления
  • R.color.ecc_system_message_link - цвет ссылок в системных уведомлениях

Кастомизация голосовых сообщений​

Для управления стилями кнопок воспроизведения голосовых сообщений были добавлены следующие атрибуты:​

  • R.drawable.ecc_voice_message_play - иконка кнопки воспроизведения
  • R.drawable.ecc_voice_message_pause - иконка кнопки паузы
  • R.color.ecc_incoming_play_pause_button - цвет иконки воспроизведения/паузы сообщения оператора
  • R.color.ecc_outgoing_play_pause_button - цвет иконки воспроизведения/паузы сообщения пользователя
  • R.color.ecc_preview_play_pause_button - цвет иконки воспроизведения/паузы превью-сообщения

Для управления стилем кнопки записи голосовых сообщений были добавлены следующие атрибуты:​

  • R.drawable.ecc_record_button_icon - иконка кнопки записи голосового сообщения
  • R.color.ecc_record_button_background - цвет бэкграунда кнопки записи голосового сообщения
  • R.color.ecc_record_button_icon - цвет иконки кнопки записи голосового сообщения
  • R.color.ecc_record_button_small_mic - цвет иконки мигающей иконки микрофона

Для управления стилями слайдеров (которые управляют воспроизведением голосовых сообщений) были добавлены три стиля:​

  • ThemeOverlay.ChatCenter.Slider.User - стиль слайдера сообщения пользователя
  • ThemeOverlay.ChatCenter.Slider.Consult - стиль слайдера сообщения оператора
  • ThemeOverlay.ChatCenter.Slider.Preview - стиль слайдера превью-сообщения (перед отправкой сообщения)

Для управления стилем быстрых ответов можно использовать:​

  • R.drawable.ecc_quick_reply_button_background - бэкграунд быстрого ответа
  • R.color.ecc_quick_reply_text_color - цвет текста быстрого ответа

Пустое состояние чата:​

  • R.color.ecc_empty_state_background - цвет бэкграунда
  • R.color.ecc_empty_state_progress - цвет спиннера
  • R.color.ecc_empty_state_hint - цвет подсказки
  • R.string.loading - текст подсказки

Окно описания причины доступа к файловому хранилищу, камере и микрофону:​

Для кастомизации диалоговых окон по аналогии с ThreadsLib.getInstance().applyLightTheme() нужно установить стили (PermissionDescriptionDialogStyle style) для запросов доступов к хранилищу, записи аудио и камере:

  • ThreadsLib.getInstance().applyStoragePermissionDescriptionDialogStyle(style) - для запроса доступа к файловому хранилищу;
  • ThreadsLib.getInstance().applyRecordAudioPermissionDescriptionDialogStyle(style) - для запросу доступа к микрофону;
  • ThreadsLib.getInstance().applyCameraPermissionDescriptionDialogStyle(style) - для запроса доступа к камере.

Получить стиль по умолчанию можно с помощью метода PermissionDescriptionDialogStyle.getDefaultDialogStyle(type), где PermissionDescriptionType type - тип разрешения, к которому запрашивается доступ.

PermissionDescriptionDialogStyle включает в себя:

  • настройки изображения PermissionDescriptionImageStyle,
  • настройки заголовка и сообщения PermissionDescriptionTextStyle,
  • настройки позитивной и негативной кнопок PermissionDescriptionButtonStyle,
  • фон самого диалогового окна PermissionDescriptionDialogBackgroundStyle.

PermissionDescriptionImageStyle позволяет настроить:

  • ресурс изображения imageResId,
  • отступ сверху marginTopDpResId,
  • выравнивание слева/по середине/справа layoutGravity.

PermissionDescriptionTextStyle позволяет настроить:

  • ресурс текста textResId,
  • отступ сверху marginTopDpResId,
  • выравнивание слева/по середине/справа layoutGravity.

Стиль текста задается либо через указание стиля textAppearanceResId либо, если textAppearanceResId равен 0, можно указать путь к файлу шрифта fontPath, размер текста textSizeSpResId, цвет текста textColorResId.

PermissionDescriptionButtonStyle позволяет настроить:

  • ресурс текста textResId,
  • отступ сверху marginTopDpResId и снизу marginBottomDpResId. Стиль текста задается либо через указание стиля textAppearanceResId либо, если textAppearanceResId равен 0, можно указать путь к файлу шрифта fontPath, размер текста textSizeSpResId, цвет текста textColorResId.

Стиль кнопки задается либо через указание ресурса backgroundResId либо, если backgroundResId равен 0, можно указать радиус скругления cornerRadiusDpResId, цвет заливки backgroundColorResId, для границы цвет strokeColorResId и ширину strokeWidthDpResId.

PermissionDescriptionDialogBackgroundStyle позволяет настроить стиль фона, задается либо через указание ресурса backgroundResId либо, если backgroundResId равен 0, можно указать радиус скругления cornerRadiusDpResId, цвет заливки backgroundColorResId, для границы цвет strokeColorResId и ширину strokeWidthDpResId.

Динамическое изменение ресурсов​

В некоторых случаях (конфигурации, особенности сборки клиентских приложений) просто замена цвета/иконки в ресурсах может не срабатывать. Для этого библиотека дублирует все кастомизации методами класса ChatStyle. Например вместо переопределения цвета R.color.ecc_chat_status_bar можно использовать метод

    .setMediaAndFilesStatusBarColorResId(@ColorRes final int altThreadsChatStatusBar)
примечание

где altThreadsChatStatusBar - id вашего альтернативного цвета в ресурсах.

Далее описаны новшества в кастомизации стиля чата:

  • Для переопределения ресурса иконки кнопки "Отправить" можно использовать метод:

.setSendMessageIconResId(@DrawableRes final int sendMessageIconResId)

  • Для переопределения ресурса иконки кнопки "Камера" можно использовать метод:

.setAttachmentCameraIconResId(@DrawableRes final int attachmentCameraIconResId)

  • Для переопределения ресурса иконки кнопки "Галерея" можно использовать метод:

.setAttachmentGalleryIconResId(@DrawableRes final int attachmentGalleryIconResId)

  • Для переопределения ресурса иконки кнопки "Файлы" можно использовать метод:

.setAttachmentFileIconResId(@DrawableRes final int attachmentFileIconResId)

Чтобы раскрасить кнопку "Отправить", а так же кнопки "Добавить вложение" и "Убрать цитату", в соответствии с состоянием кнопки (нажата, активна, неактивна) нужно использовать метод:

    .setChatBodyIconsColorStateTint(
        @ColorRes final int disabledColorTint,
        @ColorRes final int enabledColorTint,
        ColorRes final int pressedColorTint);
примечание

В качестве параметров передаются id ресурсов цветов для соответствующих состояний кнопки: неактивна, активна, нажата.

Указать цвета текстов для цитаты в чате можно с помошью метода:

    .setQuoteTextColors(
        @ColorRes final int quoteHeaderTextColor,
        @ColorRes final int quoteTextTextColor);
примечание

В качестве параметров передаются id ресурсов цветов для соответствующих текстов, автора сообщения и самого текста цитируемого сообщения.

В элементах чата содержащих файлы, можно кастомизировать кнопку скачивания/открытия файла. Для этого есть набор методов:

    .setCompletedIconResId(@DrawableRes final int completedIconResId);
    .setInProgressIconResId(@DrawableRes final int inProgressIconResId);
    .setStartDownloadIconResId(@DrawableRes final int startDownloadIconResId)
    .setDownloadButtonTintResId(@ColorRes final int downloadButtonTintResId)
    .setDownloadButtonBackgroundTintResId(@ColorRes final int downloadButtonBackgroundTintResId)
примечание

В качестве параметров в первых трех методах передаются id графических ресурсов. В двух последних id ресурсов цветов для иконок и фона соответственно.

Можно кастомизировать паддинги и марджины поля ввода сообщения. Напомню, марджин - отступ между самим полем ввода и соседними компонентами (например для выставления отступа между кнопкой отправить и полем ввода нужно указать марджин справа). Паддинги - это отступы между самим текстом и краем поля ввода. Для установки своих паддингов и марджинов можно использовать методы:

    .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
    )
примечание

В качестве параметров передаются id ресурсов с величинами отступов.

Можно изменить отступы между текстом сообщений и краем бабла. Можно менять отступы со всех сторон для входящих и исходящих сообщений:

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

Кроме того можно изменить отступы между краем самого бабла и окружающих его элементов:

    .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
    )
примечание

В качестве параметров передаются id ресурсов с величинами отступов

Так же можно изменять размер текста для отображения времени отправки сообщения. Есть 2 метода, для указания размера текста для входящих и исходящих сообщений:

    .setOutgoingTimeTextSize(@DimenRes final int outgoingTimeTextSize)
    .setIncomingTimeTextSize(@DimenRes final int incomingTimeTextSize)
примечание

В качестве параметров передаются id ресурсов с величинами размеров текстов

Можно изменять цвет текста отображения сетевых ошибок.

    .setErrorMessageTextColor(@ColorRes int errorMessageTextColor)
примечание

В качестве параметра передается id ресурса необходимого цвета текста. По умолчанию он красный - R.color.ecc_error_red_df0000

Можно показать или убрать тень тулбара. Для этого есть метод:

.setVisibleChatTitleShadow(@BoolRes final int isChatTitleShadowVisible)

примечание

В качестве параметра передаются id bool ресурса. По умолчанию тень включена(видима)

Помимо настройки из ресурса параметром R.bool.ecc_chat_search_enabled для включения/выключения функционала поиска в чате можно использовать метод:

.setSearchEnabled(@BoolRes final int searchEnabled);

примечание

В качестве параметра передается id bool ресурса. По умолчанию поиск активирован.

При запросе "Permissions" в некоторых случаях пользователю приложения не всегда понятно, зачем давать разрешения на различный функционал приложения. Для этого внедрили дополнительный диалог с разъяснениями. Подключается этот диалог так же в ChatStyle.

.setArePermissionDescriptionDialogsEnabled(final boolean areEnabled)

Библиотека поддерживает 3 типа "Permissions": STORAGE, RECORD_AUDIO, CAMERA. Для указания стиля каждого используются методы:

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

В свою очередь в PermissionDescriptionDialogStyle можно переопределить заголовок, текст, изображение, кнопки, центровку всех элементов.

Отступы изображения от края баббла​

Отступы представляют собой кайму (бордер) вокруг изображений и задаются в ChatStyle следующими методами: 

    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
    )

Данные методы принимают на вход отступы по краям для изображения от его баббла. Изображенями не считаются цитаты, данные OpenGraph.

Кроме того, библиотека позволяет задавать отстсупы для контента на баббле в целом. Данные параметры представлены полями bubbleOutgoingPaddingLeft, bubbleOutgoingPaddingTop, bubbleOutgoingPaddingRight, bubbleOutgoingPaddingBottom, bubbleOutgoingPaddingBottom для исходящих сообщений и bubbleIncomingPaddingLeft, bubbleIncomingPaddingTop, bubbleIncomingPaddingRight, bubbleIncomingPaddingBottom для входящих. Если заданы отступы для изображений, и заданы данные отступы для контента, то приоритет будут иметь отступы для изображений (которые также подвинут и текст под изображением, выровняв его по левому краю изображения).

Форма отступа изображения и само изображение задаются масками 9 patch png (9.png формат). Задается через метод setChatBodyStyle в классе ChatStyle, где одними из параметров являются: outgoingImageBubbleMaskдля исходящего изображения без текста, incomingImageBubbleMask для входящего изображения без текста,outgoingMessageBubbleBackground для исходящего изображения с текстом иincomingMessageBubbleBackground для входящего изображения c текстом. Т.е. две первые маски здесь задают форму самого изображения, две последние - форму баббла. Данные маски также можно настроить отдельно через методы setIncomingImageMask(@DrawableRes int mask), setIncomingBubbleMask(@DrawableRes int mask), setOutgoingImageMask(@DrawableRes int mask), setOutgoingBubbleMask(@DrawableRes int mask).

Размер баббла с изображением также настраивается. Для этого в ChatStyle нужно вызвать метод setImageBubbleSize(float size), где size - это коэффициент занятия бабблом ширины экрана (баббл квадратный). По умолчанию значение выставлено в 0.66 (две трети от ширины экрана).

Есть возможность изменить внешний вид Toast уведомлений. Можно задать размер текста, цвет текста и цвет фона уведомления. Для этого нужно использовать метод:

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

Другое​

  • R.string.ecc_channel_name - ресурс для настройки названия канала, в который отправляются уведомления библиотеки
  • R.integer.ecc_max_count_attached_images - ресурс для настройки количества фотографий, которые клиент может выбрать для прикрепления в своем сообщении (максимальное значение настройки – 20)
Последнее обновление