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

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

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

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

  • showChatBackButton(boolean showBackButton) - показывать ли кнопку "Назад" в тулбаре, по-умолчанию false
  • centerToolbarText() - центрирует текст в тулбаре, по умолчанию выравнивается по левому краю.
  • setFilesAndMediaItemEnabled(boolean show) - показывать ли кнопку "Файлы и медиа" в меню в тулбаре, по умолчанию true (с версии 4.0)
  • 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:

  • setNewChatCenterApi - запрос истории сообщений, получение настроек будут использовать актуальные endpoint'ы сервера /api/...

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

Для включения возможности прикрепления вложения необходимо в манифесте установить в 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 - цвет подсказок в тулбаре для полей ввода (поиск)

Также в тулбаре можно настраивать следующие элементы:

  • setChatToolbarInverseIconTintResId(@ColorRes int chatToolbarInverseIconTintResId) - при долгом тапе на сообщении в тулбаре появляются иконки действий. Данный метод устанавливает их цвет
  • setChatToolbarBackIconResId(@DrawableRes int chatToolbarBackIconResId) - ресурс иконки "назад" в тулбаре
  • setChatToolbarPopUpMenuIconResId(@DrawableRes int chatToolbarPopUpMenuIconResId)
  • setChatToolbarContentCopyIconResId(@DrawableRes int chatToolbarContentCopyIconResId) - ресурс иконки "копировать" в тулбаре (после долгого тапа на сообщении)
  • setChatToolbarReplyIconResId(@DrawableRes int chatToolbarReplyIconResId) - ресурс иконки "ответить" в тулбаре (после долгого тапа на сообщении)

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

Общий стиль

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

  • chatBackgroundColor - цвет фона для чата (ссылка на ресурс, например, R.color.blue)
  • chatHighlightingColor - цвет подсветки сообщения при его выделении
  • incomingMessageBubbleColor - цвет баббла для входящих сообщений
  • outgoingMessageBubbleColor - цвет баббла для исходящих сообщений
  • incomingMessageBubbleBackground - ресурс в формате 9.png, определяющий форму баббла входящего сообщения
  • outgoingMessageBubbleBackground - ресурс в формате 9.png, определяющий форму баббла исходящего сообщения
  • incomingMessageTextColor - цвет текста входящих сообщений
  • outgoingMessageTextColor - цвет текста исходящих сообщений
  • incomingMessageTimeColor - цвет текста для метки времени во входящих сообщениях
  • outgoingMessageTimeColor - цвет текста для метки времени в исходящих сообщениях
  • incomingMessageTimeTextSize - размер текста для метки времени во входящих сообщениях (dimen)
  • outgoingMessageTimeTextSize - размер текста для метки времени в исходящих сообщениях (dimen)
  • outgoingImageTimeBackgroundColor - цвет фона (подложки) для метки времени в исходящих сообщениях
  • incomingImageTimeBackgroundColor - цвет фона (подложки) для метки времени во входящих сообщениях
  • outgoingMessageTimeColor - цвет текста в метке времени в исходящих сообщениях
  • incomingMessageTimeColor - цвет текста в метке времени во входящих сообщениях
  • incomingMessageLinkColor - цвет ссылок для входящий сообщений
  • outgoingMessageLinkColor - цвет ссылок для исходящих сообщений
  • chatBodyIconsTint - цвет иконок для чата
  • chatSystemMessageTextColor - цвет текста для системных сообщений
  • setIncomingMarkdownConfiguration(MarkdownConfiguration incoming) - настройка стиля для входящих маркдаун сообщений
  • isShowClientFullNameInMessage - показывает имя клиента в сообщениях
  • setQuoteAttachmentIconResId(@DrawableRes final int quoteAttachmentIconResId) - установка иконки вложения в процитированном сообщении
  • setAttachmentIconResId(@DrawableRes final int attachmentIconResId) - установка иконки вложения в сообщении
  • setIncomingMessageLoaderColorResId(@ColorRes final int incomingMessageLoaderColor) - цвет лоадера во входящих сообщениях (например, при загрузке изображения)
  • setOutgoingMessageLoaderColorResId(@ColorRes final int outgoingMessageLoaderColor) - цвет лоадера в исходящих сообщениях (например, при загрузке изображения)
  • setSystemMessageTextGravity(final int systemMessageTextGravity) - настройка положения входящих системных сообщений. systemMessageTextGravity - значение android.view.Gravity
  • setLoaderTintResId(@ColorRes final int loaderTintResId) - цвет лоадера при загрузке вложений в сообщении

Изображения

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

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

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

Исходящие:

  • bubbleOutgoingPaddingLeft, bubbleOutgoingPaddingTop, bubbleOutgoingPaddingRight, bubbleOutgoingPaddingBottom

Входящие:

  • bubbleIncomingPaddingLeft, bubbleIncomingPaddingTop, bubbleIncomingPaddingRight, bubbleIncomingPaddingBottom

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

Отступы представляют собой кайму (бордер) вокруг изображений и задаются в 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
)

Настройки отображения отзывов

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

В ChatStyle:

setRequestResolveThreadStyle(
@StringRes final int requestToResolveThreadTextResId,
@StringRes final int approveRequestToResolveThreadTextResId,
@StringRes final int denyRequestToResolveThreadTextResId
)

Данный метод устанавливает стили для запроса о завершение треда. Его параметры:

  • requestToResolveThreadTextResId - текст запроса
  • approveRequestToResolveThreadTextResId - текст подтверждения запроса о завершении треда
  • denyRequestToResolveThreadTextResId - текст для отклонения запроса о завершении треда

Также существуют несколько методов для настройки вида самого опроса. Приставка binary в параметрах означает, что у такого опроса есть только два варианта ответа. Методы:

setSurveyStyle(
@DrawableRes final Integer binarySurveyLikeUnselectedIconResId,
@DrawableRes final Integer binarySurveyLikeSelectedIconResId,
@DrawableRes final Integer binarySurveyDislikeUnselectedIconResId,
@DrawableRes final Integer binarySurveyDislikeSelectedIconResId,
@DrawableRes final Integer optionsSurveyUnselectedIconResId,
@DrawableRes final Integer optionsSurveySelectedIconResId,
@ColorRes final Integer surveySelectedColorFilterResId,
@ColorRes final Integer surveyUnselectedColorFilterResId,
@ColorRes final Integer surveyTextColorResId,
@ColorRes Integer surveyChoicesTextColorResId
)

где:

  • binarySurveyLikeUnselectedIconResId - иконка для положительного ответа, не выбранное состояние
  • binarySurveyLikeSelectedIconResId - иконка для положительного ответа, выбранное состояние
  • binarySurveyDislikeUnselectedIconResId - иконка для отрицательного ответа, не выбранное состояние
  • binarySurveyDislikeSelectedIconResId - иконка для отрицательного ответа, выбранное состояние
  • optionsSurveyUnselectedIconResId - одна из нескольких иконок для проставления оценки (звезды), не выбранное состояние
  • optionsSurveySelectedIconResId - одна из нескольких иконок для проставления оценки (звезды), выбранное состояние
  • surveySelectedColorFilterResId - цвет для иконок опроса в выбранном состоянии
  • surveyUnselectedColorFilterResId - цвет для иконок опроса в не выбранном состоянии
  • surveyTextColorResId - цвет основного текста в опросе
  • surveyChoicesTextColorResId - цвет текста при выборе ответов

Существует также перегруженный вариант данного метода:

setSurveyStyle(
@DrawableRes final int binarySurveyLikeUnselectedIconResId,
@DrawableRes final int binarySurveyLikeSelectedIconResId,
@DrawableRes final int binarySurveyDislikeUnselectedIconResId,
@DrawableRes final int binarySurveyDislikeSelectedIconResId,
@DrawableRes final int optionsSurveyUnselectedIconResId,
@DrawableRes final int optionsSurveySelectedIconResId,
@ColorRes final int surveySelectedColorFilterResId,
@ColorRes final int surveyUnselectedColorFilterResId,
@ColorRes final int surveyFinalColorFilterResId,
@ColorRes final int surveyTextColorResId,
@ColorRes int surveyChoicesTextColorResId
)

Разница с предыдущим методом: добавлен параметр surveyFinalColorFilterResId. Данный цвет будет отображен для иконок в случае завершенного опроса.

Расписание

Настройка стиля расписания осуществляется через метод:

setScheduleMessageStyle(
@DrawableRes final int scheduleMessageIconResId,
@ColorRes final int scheduleMessageTextColorResId
)

где:

  • scheduleMessageIconResId - иконка для сообщения с расписанием
  • scheduleMessageTextColorResId - цвет текста для сообщения с расписанием

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

Настройка стиля системных сообщений осуществляется через метод:

ChatStyle setSystemMessageStyle(
final String systemMessageFont,
@DimenRes final Integer systemMessageTextSize,
@ColorRes final Integer systemMessageTextColorResId,
@DimenRes final Integer systemMessageLeftRightPadding,
final Integer systemMessageTextGravity,
@ColorRes final Integer systemMessageLinkColor
)

Все параметры могу быть nullable. В этом случае будут применены значения по умолчанию. Описание параметров:

  • systemMessageFont - ссылка на шрифт. Должен удовлетворять запросу в коде: Typeface.createFromAsset(assets, systemMessageFont)
  • systemMessageTextSize - размер шрифта для системных сообщений, в sp (ссылка на ресурс)
  • systemMessageTextColorResId - цвет текста системного сообщения (ссылка на ресурс)
  • systemMessageLeftRightPadding - отступы слева и справа для системного сообщения, в dp (ссылка на ресурс)
  • systemMessageTextGravity - расположение системного сообщения относительно контейнера (android.view.Gravity)
  • systemMessageLinkColor - цвет ссылок в системном сообщении (ссылка на ресурс)

Быстрые ответы

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

setQuickReplyChipChoiceStyle(
@DrawableRes final int quickReplyButtonBackground,
@ColorRes final int quickReplyTextColor
)

где:

  • quickReplyButtonBackground - цвет фона кнопки быстрого ответа
  • quickReplyTextColor - цвет текста для кнопки быстрого ответа

Состояние "Сообщение не отправлено"

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

setMessageNotSentBubbleColors(
@ColorRes final int messageNotSentBackgroundColor,
@ColorRes final int messageNotSentErrorImageColor
)

где:

  • messageNotSentBackgroundColor - фоновый цвет баббла при ошибке
  • messageNotSentErrorImageColor - цвет изображения, отображаемого в левой части баббла при ошибке

Опрос с кнопками

При закрытии треда можно прислать клиенту опрос. Один из видов опроса - опрос с вариантами ответа в виде кнопок. Чтобы кастомизировать его, вызовите в ChatStyle метод setButtonsSurveyStyle(...) Все параметры представляют ссылки на ресурсы. Если вы не хотите устанавливать какой-либо из параметров, передайте для него null, в этом случае будет использовано значение по умолчанию. Параметрами данного метода являются:

  • surveyButtonBackgroundDrawableResId - фоновое изображение для кнопки с ответом
  • surveyButtonBackgroundTintColorResId - цвет для фонового изображения кнопки с ответом
  • surveyButtonTextColorResId - цвет текста для фонового изображения кнопки с ответом
  • surveyButtonTextSizeResId - размер текста для фонового изображения кнопки с ответом
  • surveyButtonQuestionTextColorResId - цвет текста для вопроса
  • surveyButtonQuestionTextSizeResId - размер текста для вопроса

Цитаты

Кастомизирует внешний вид цитат во входящих сообщениях:

setIncomingQuoteViewStyle(
@ColorRes Integer quoteIncomingBackgroundColorRes,
@ColorRes Integer quoteIncomingDelimiterColorRes,
@ColorRes Integer quoteIncomingAuthorTextColorRes,
@ColorRes Integer quoteIncomingTextColorRes
)

где:

  • quoteIncomingBackgroundColorRes - ресурс цвета фона цитаты
  • quoteIncomingDelimiterColorRes - ресурс цвета разделителя
  • quoteIncomingAuthorTextColorRes - ресурс цвета текста автора цитируемого сообщения
  • quoteIncomingTextColorRes - ресурс цвета текста цитируемого сообщения

Кастомизирует внешний вид цитат в исходящих сообщениях:

setOutgoingQuoteViewStyle(
@ColorRes Integer quoteOutgoingBackgroundColorRes,
@ColorRes Integer quoteOutgoingDelimiterColorRes,
@ColorRes Integer quoteOutgoingAuthorTextColorRes,
@ColorRes Integer quoteOutgoingTextColorRes
)

Параметры аналогичны предыдущему методу.

Предпросмотр ссылок (OpenGraph)

В SDK есть возможность включить предпросмотр ссылок (OpenGraph). Для этого в ChatStyle нужно вызывать метод enableLinkPreview(). По умолчанию данный функционал отключен.

Настройка основной области чата

Лоадер и состояние чата без сообщений

  • setLoaderTextResId(final int loaderTextResId) - текст под основным лоадером (напр., "Загрузка")

С помощью следующего метода можно настроить дополнительные параметры:

setEmptyStateStyle(
@ColorRes final int emptyStateBackgroundColorResId,
@ColorRes final int emptyStateProgressBarColorResId,
@ColorRes final int emptyStateHintColorResId
)

где:

  • emptyStateBackgroundColorResId - фоновый цвет экрана в состоянии чата без сообщений
  • emptyStateProgressBarColorResId - цвет лоадера в состоянии чата без сообщений
  • emptyStateHintColorResId - цвет текста подсказки, устанавливаемой методом setLoaderTextResId(final int loaderTextResId)

Лоадер при поиске оператора

Данным методом можно настроить цвет лоадера

setConsultSearchingProgressColor(@ColorRes final int consultSearchingProgressColor)

Показ данного лоадера можно настроить через метод:

setShowConsultSearching(final boolean show)

### Экран приветствия

Welcome screen настраивается через метод:

```java
ChatStyle setWelcomeScreenStyle(
@DrawableRes final int welcomeScreenLogoResId,
@StringRes final int welcomeScreenTitleTextResId,
@StringRes final int welcomeScreenSubtitleTextResId,
@ColorRes final int welcomeScreenTitleTextColorResId,
@ColorRes final int welcomeScreenSubtitleTextColorResId,
@DimenRes final int welcomeScreenTitleSizeInSp,
@DimenRes final int welcomeScreenSubtitleSizeInSp,
@DimenRes final int welcomeScreenLogoWidth,
@DimenRes final int welcomeScreenLogoHeight
)

Все поля представляют ссылки на ресурсы. Описание параметров:

  • welcomeScreenLogoResId - изображения, отображаемое по центру экрана приветствия
  • welcomeScreenTitleTextResId - заголовок для экрана приветствия
  • welcomeScreenSubtitleTextResId - подзаголовок для экрана приветствия
  • welcomeScreenTitleTextColorResId - цвет заголовка
  • welcomeScreenSubtitleTextColorResId - цвет подзаголовка
  • welcomeScreenTitleSizeInSp - размер заголовка в sp
  • welcomeScreenSubtitleSizeInSp - размер подзаголовка в sp
  • welcomeScreenLogoWidth - ширина логотипа, в dp
  • welcomeScreenLogoHeight - высота логотипа, в dp

Экран с ошибкой

Если в SDK произошла ошибка, препятствующая его дальнейшей работе, появится полноразмерный экран с текстом ошибки и кнопкой, предлагающей перезагрузить чат. Его элементы можно кастомизировать с помощью следующего метода:

setChatErrorScreenStyle(
@DrawableRes Integer imageResId,
@DimenRes Integer messageTextSizeResId,
@ColorRes Integer messageTextColorResId,
@DimenRes Integer buttonTextSizeResId,
@ColorRes Integer buttonTextColorResId,
ColorStateList buttonTintColorStateList,
@StringRes Integer buttonTextResId
)

Все поля данного метода nullable. Если передать null в любое из полей, SDK возьмет значение по умолчанию. Описание параметров:

  • imageResId - изображение для экрана с ошибкой
  • messageTextSizeResId - размер текста с описанием ошибки
  • messageTextColorResId - цвет текста с описанием ошибки
  • buttonTextSizeResId - размер текста для кнопки "Перезагрузить чат"
  • buttonTextColorResId - цвет текста для кнопки "Перезагрузить чат"
  • buttonTintColorStateList - цвета состояний нажатия для кнопки "Перезагрузить чат"
  • buttonTextResId - текст для кнопки "Перезагрузить чат"

Автоскролл

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

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

Элементы прокрутки сообщений

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

setScrollDownButtonIcon(@DrawableRes final int scrollDownIconResId)

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

setScrollUpButtonIcon(@DrawableRes final int scrollUpIconResId)

Также можно воспользоваться комплексным методом для установки стиля кнопки прокрутки вниз:

setScrollDownButtonStyle(
@DrawableRes final int scrollDownIconResId,
@DrawableRes final int scrollDownBackgroundResId,
@DimenRes final int scrollDownButtonWidth,
@DimenRes final int scrollDownButtonHeight,
@DimenRes final int scrollDownButtonMargin,
@DimenRes final int scrollDownButtonElevation,
@ColorRes final int unreadMsgStickerColorResId,
@ColorRes final int unreadMsgCountTextColorResId
)

где:

  • scrollDownIconResId - иконка кнопки скролла вниз
  • scrollDownBackgroundResId - фон для кнопки скролла вниз
  • scrollDownButtonWidth - ширина кнопки скролла вниз
  • scrollDownButtonHeight - высота кнопки скролла вниз
  • scrollDownButtonMargin - отступы вокруг кнопки
  • scrollDownButtonElevation - размер тени вокруг кнопки
  • unreadMsgStickerColorResId - цвет стикера непрочитанных сообщений
  • unreadMsgCountTextColorResId - цвет текста на стикере непрочитанных сообщений

и для кнопки прокрутки вверх:

setScrollUpButtonStyle(
@DrawableRes final int scrollUpIconResId,
@DrawableRes final int scrollUpBackgroundResId,
@DimenRes final int scrollUpButtonWidth,
@DimenRes final int scrollUpButtonHeight,
@DimenRes final int scrollUpButtonMargin,
@DimenRes final int scrollUpButtonElevation,
@ColorRes final int unreadMsgStickerColorResId,
@ColorRes final int unreadMsgCountTextColorResId
)

Описание полей аналогично методу выше.

Настройка цветов "Swipe to Refresh"

Осуществляется через метод:

setSwipeRefreshColors(@ArrayRes final int threadsSwipeRefreshColors) {
this.threadsSwipeRefreshColors = threadsSwipeRefreshColors;
return this;
}

где threadsSwipeRefreshColors - массив из 3х цветов дл лоадера при обновлении списка сообщений

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

Общие настройки

  • setQuoteClearIconTintResId(@ColorRes final int quoteClearIconTintResId) - цвет иконки отмены цитирования сообщения
  • setQuoteClearIconResId(@DrawableRes final int quoteClearIconResId) - иконка отмены цитирования сообщения
  • setAttachmentBottomSheetButtonTintResId(@ColorRes final int attachmentBottomSheetButtonTintResId) - цвет иконки для прикрепления вложения
  • setAttachmentSendIconResId(@DrawableRes final int attachmentSendIconResId) - иконка для отправки вложения
  • setInputIconTintResId(@ColorRes final int inputIconTintResId) - цвет иконок для поля ввода
  • setDisabledInputMessageText(@StringRes Integer disabledInputMessageTextRes) - устанавливает тексты ошибки, когда принудительно блокируется поле ввода

Также существует метод, который позволяет задать сразу множество настроек UI для поля ввода:

public ChatStyle setChatInputStyle(
@ColorRes final int chatMessageInputHintTextColor,
@ColorRes final int chatMessageInputColor,
@ColorRes final int inputTextColor,
final String inputTextFont,
@DrawableRes final int attachmentIconResId,
@DrawableRes final int sendMessageIconResId,
@StringRes final int inputHint,
@DimenRes final int inputHeight,
@DrawableRes final int inputBackground
)

где:

  • chatMessageInputHintTextColor - цвет текста подсказки для поля ввода
  • chatMessageInputColor - фоновый цвет поля для ввода. Не работает совместно с inputBackground
  • inputTextColor - цвет текста для ввода
  • inputTextFont - путь к шрифту для поля ввода. Необходим путь, подходящий под запрос Typeface.createFromAsset(activity.assets, inputTextFont)
  • attachmentIconResId - иконка для прикрепления вложений
  • sendMessageIconResId - иконка для отправки сообщений
  • inputHint - текст подсказки для поля ввода
  • inputHeight - высота поля ввода
  • inputBackground - фон для поля ввода. Не работает совместно с chatMessageInputColor

Голосовой ввод

Стиль кнопки записи голосового сообщения задается следующим методом:

setRecordButtonStyle(
@DrawableRes final int threadsRecordButtonBackground,
@ColorRes final int threadsRecordButtonBackgroundColor,
@DrawableRes final int threadsRecordButtonIcon,
@ColorRes final int threadsRecordButtonIconColor,
@ColorRes final int threadsRecordButtonSmallMicColor
)

где:

  • threadsRecordButtonBackground - фоновое изображение для кнопки записи голосового сообщения
  • threadsRecordButtonBackgroundColor - фоновый цвет для кнопки записи голосового сообщения
  • threadsRecordButtonIcon - иконка для кнопки записи голосового сообщения
  • threadsRecordButtonIconColor - цвет иконки
  • threadsRecordButtonSmallMicColor - цвет маленькой иконки микрофона

Также, если вы не хотите устанавливать сразу все параметры, можно поменять лишь фон для кнопки записи:

setRecordButtonBackgroundColor(@ColorRes final int threadsRecordButtonBackgroundColor)

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

setPlayPauseButtonStyle(
@ColorRes final int incomingPlayPauseButtonColor,
@ColorRes final int outgoingPlayPauseButtonColor,
@ColorRes final int previewPlayPauseButtonColor,
@DrawableRes final int voiceMessagePlayButton,
@DrawableRes final int voiceMessagePauseButton
)

где:

  • incomingPlayPauseButtonColor - цвет кнопки "запись/воспроизведение" во входящих сообщениях
  • outgoingPlayPauseButtonColor - цвет кнопки "запись/воспроизведение" в исходящих сообщениях
  • previewPlayPauseButtonColor - цвет кнопки "запись/воспроизведение" в превью перед отправкой сообщения
  • voiceMessagePlayButton - иконка для кнопки воспроизведения сообщения
  • voiceMessagePauseButton - иконка для кнопки приостановки воспроизведения голосового сообщения

Основной цвет иконок в чате

Основной цвет иконок в чате, если не задано иное для отдельных случаев, устанавливается с помощью метода:

setChatBodyIconsTint(@ColorRes final int chatBodyIconsTint)

Настройка страницы просмотра изображений

Настройка осуществляется через метод:

  setImagesGalleryStyle(
@ColorRes int imagesScreenAuthorTextColor,
@ColorRes int imagesScreenDateTextColor,
@DimenRes int imagesScreenAuthorTextSize,
@DimenRes int imagesScreenDateTextSize
)

где:

  • imagesScreenAuthorTextColor - цвет текста при указании автора изображения
  • imagesScreenDateTextColor - цвет текста при отрисовке даты изображения
  • imagesScreenAuthorTextSize - размер текста при указании автора изображения
  • imagesScreenDateTextSize - размер текста при отрисовке даты изображения

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

Задаются методами 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(...), setMessageEditedResources(...). Каждый метод принимает на вход ссылку на ресурс иконки и ссылку на ресурс цвета для данной иконки.

Настройка стиля пуш-уведомлений

Настройка осуществляется через метод:

setPushNotificationStyle(@DrawableRes final int defPushIconResId,
@StringRes final int defTitleResId,
@ColorRes final int pushBackgroundColorResId,
@ColorRes final int nougatPushAccentColorResId,
@ColorRes int notificationQuickReplyMessageBackgroundColor,
@ColorRes int notificationQuickReplyMessageTextColor)

где:

  • defPushIconResId - иконка пуш-уведомлений
  • defTitleResId - заголовок пуш-уведомления
  • pushBackgroundColorResId - фоновый цвет пуш-уведомления
  • nougatPushAccentColorResId - основной цвет для пуш-уведомлений, если Android SDK версии N или выше
  • notificationQuickReplyMessageBackgroundColor - фоновый цвет для окна быстрого ответа на уведомление
  • notificationQuickReplyMessageTextColor - цвет текста для окна быстрого ответа на уведомление

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

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

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

  • 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 - цвет ссылок в системных уведомлениях

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

Включение/отключение голосового ввода

Метод в ChatStyle определяет достуность голосового ввода:

setVoiceMessageEnabled(final boolean voiceMessageEnabled)

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

  • 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 ресурсов цветов для соответствующих текстов, автора сообщения и самого текста цитируемого сообщения.

Указать цвета разделителей внутри элементов сообщений в чате можно с помошью метода:

    .setDelimitersColors(
@ColorRes final int incomingDelimitersColor,
@ColorRes final int outgoingDelimitersColor);
примечание

В качестве параметров передаются 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 можно переопределить заголовок, текст, изображение, кнопки, центровку всех элементов.

Поиск

Все элементы поиска - поле ввода, кнопки, результаты поиска, текст подсказок - полностью настраиваемые. Ниже приведены методы для настройки внешнего вида поиска.

  • setSearchBarItemsVisibility(boolean isClearSearchBtnVisible, boolean isSearchLoaderVisible) - устанавливает видимость элементов для SearchBar чат-фрагмента. isClearSearchBtnVisible - устанавливает видимость кнопки очистки для поля ввода, по умолчанию true. isSearchLoaderVisible - устанавливает видимость лоадера при загрузке результатов поиска для поля ввода, по умолчанию true
  • setSearchLoaderDrawable(@DrawableRes int searchLoaderDrawableRes) - устанавливает иконку поиска для лоадера при загрузке результатов поиска в поле ввода. По умолчанию отображается дефолтный лоадер.
  • setSearchLoaderColorTint(@ColorRes int searchLoaderColorTintRes) - Устанавливает цвет иконки поиска для лоадера при загрузке результатов поиска в поле ввода, по умолчанию #fff.
  • setSearchClearIconColor(@ColorRes int clearIconColorRes) - устанавливает цвет иконки очистки поля ввода при поиске.
  • setSearchClearIconDrawable(@DrawableRes int clearIconDrawableRes) - устанавливает ресурс иконки для очистки поля ввода при поиске
  • setSearchResultsDividerColor(@ColorRes int searchResultsDividerColorRes) - устанавливает цвет разделителя между элементами в результатах поиска
  • setSearchResultsTextColors(@ColorRes Integer messageTextColorRes, @ColorRes Integer nameTextColorRes) - устанавливает цвета текста для одного элемента с результатами поиска. messageTextColorRes - ресурс цвета для текста с сообщением; передайте null, если хотите оставить значение по умолчанию. nameTextColorRes - ресурс цвета для текста с автором сообщения; передайте null, если хотите оставить значение по умолчанию.
  • setSearchResultsRightArrow(@DrawableRes Integer rightArrowIconRes, @ColorRes Integer rightArrowTintColorRes) - устанавливает drawable и цвет для иконки "стрелка вправо" в результатах поиска.
  • setSearchResultsDateTextColor(@ColorRes int dateTextColorRes) - устанавливает цвет текста для даты в результатах поиска
  • setSearchResultsNoItemsElements(@DrawableRes Integer noResultFoundImageRes, @StringRes Integer noResultFoundTextRes, @ColorRes Integer noResultFoundTextColorRes) - устанавливает элементы, отображаемые при отсутствии результатов поиска.
  • setSearchBarText(@ColorRes Integer hintTextColorRes, @StringRes Integer hintTextRes, @ColorRes Integer searchTextColorRes) - устанавливает цвет подсказки и ее текст при поиске сообщений, а также цвет текста при вводе запроса (по умолчанию белый цвет шрифта для темных тулбаров). hintTextColorRes - ресурс текста для подсказки при поиске в поле ввода. hintTextRes - ресурс цвета текста для подсказки при поиске в поле ввода. searchTextColorRes - ресурс цвета текста при вводе запроса.
  • Поле searchIconResId - иконка начала поиска в тулбаре
  • R.drawable.ecc_ic_search_white_24dp', в стилях переменная searchIconResId` - иконка поиска
  • R.drawable.right_arrow, в стилях переменная searchResultsItemRightArrowDrawable - иконка стрелки "вправо" в результатах поиска
  • searchResultsItemRightArrowTintColor - цвет иконки стрелки "вправо" в результатах поиска

Другое

  • R.string.ecc_channel_name - ресурс для настройки названия канала, в который отправляются уведомления библиотеки
  • R.integer.ecc_max_count_attached_images - ресурс для настройки количества фотографий, которые клиент может выбрать для прикрепления в своем сообщении (максимальное значение настройки – 20)
  • setNetworkErrorText(@StringRes Integer networkErrorTextRes) - установка текста на экране в случае сетевой ошибки
  • setStartLoadErrorTexts(@StringRes Integer loadedSettingsErrorTextRes, @StringRes Integer loadedAttachmentSettingsErrorTextRes) - Устанавливает тексты ошибок получения настроек, настроек вложений и расписания чата. loadedSettingsErrorTextRes - ресурс текста ошибки полуения настроек. Передайте null, если хотите оставить значение по умолчанию loadedAttachmentSettingsErrorTextRes - ресурс текста ошибки полуения настроек вложений. Передайте null, если хотите оставить значение по умолчанию
  • chatDisabledTextColor - цвет текста, если какой-либо элемент недоступен
  • iconsAndSeparatorsColor - цвет разделителей в сообщениях и других элементах, если отдельно не задано иное