Настройка внешнего вида
Настройка поведения чата
Поведением чата управляют методы ChatStyle:
showChatBackButton(boolean showBackButton)- показывать ли кнопку "Назад" в тулбаре, по-умолчаниюfalsecenterToolbarText()- центрирует текст в тулбаре, по умолчанию выравнивается по левому краю.setFilesAndMediaItemEnabled(boolean show)- показывать ли кнопку "Файлы и медиа" в меню в тулбаре, по умолчаниюtrue(с версии 4.0)setShowConsultSearching(boolean show)- показывать ли прогресс при поиске оператора, по-умолчаниюfalsesetCanShowSpecialistInfo(boolean show)- можно ли открыть экран с информацией об операторе, по-умолчаниюtruesetScrollChatToEndIfUserTyping(boolean scroll)- true - при открытии экранной клавиатуры чат всегда прокручивается к последнему сообщению, false - при открытии клавиатуры пользователь остается на текущей позиции истории чата (она поднимается на высоту клавиатуры), по-умолчаниюfalsesetChatSubtitleShowConsultOrgUnit(boolean enabled)- показывать подразделение агента в подзаголовке тулбара, по-умолчанию выключеноsetInputEnabledDuringQuickReplies(boolean inputEnabledDuringQuickReplies)- активно ли поле ввода, когда активен диалог с быстрыми ответами (по-умолчанию false)setFixedChatTitle(boolean isFixed)- показывает всегда заголовок в тулбаре, по-умолчаниюfalse. Текст заголовка задается параметромchatTitleTextResIdв методеsetChatTitleStyle(...)setFixedChatSubtitle(boolean isFixed)- показывает всегда подзаголовок в тулбаре, по-умолчаниюfalsesetVisibleChatSubtitle(boolean isVisible)- определяет, показывать ли подзаголовок в тулбар, по-умолчаниюtruesetSearchEnabled(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.GravitysetLoaderTintResId(@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- цвет изображения, отображаемого в левой части баббла при ошибке
Цитаты
Кастомизирует внешний вид цитат во входящих сообщениях:
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 настраивается через метод:
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- размер заголовка вspwelcomeScreenSubtitleSizeInSp- размер подзаголовка вspwelcomeScreenLogoWidth- ширина логотипа, вdpwelcomeScreenLogoHeight- высота логотипа, в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- фоновый цвет поля для ввода. Не работает совместно сinputBackgroundinputTextColor- цвет текста для ввода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- ресурс был удалён (нужно использовать новые ресуры ecc_scroll_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- цвет разделителей в сообщениях и других элементах, если отдельно не задано иное