Настройка внешнего вида
Настройка поведения чата
Поведением чата управляют методы 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 NR.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
- устанавливает видимость лоадера при загрузке результатов поиска для поля ввода, по умолчанию truesetSearchLoaderDrawable(@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
- цвет разделителей в сообщениях и других элементах, если отдельно не задано иное