Guides
Start typing to search…

Customizing Themes

Override SDK theme attributes to match your brand. Customize colors, fonts, icons, and styles across the Base, Main, Profile, Invite, Predictions, Statistics, and Messenger themes.

Customizing Themes

The StreamLayer Android SDK ships with a set of themes that you can override to match your brand. When you define a custom style, you can change colors, fonts, icons, and other appearance attributes. Each theme targets a specific part of the SDK — customize one or all of them and the SDK applies the appropriate style automatically.

Base Theme

The Base theme is the parent of every other theme. It controls default styling for all views that are not covered by a more specific theme (such as Profile or Predictions).

Base Theme Attributes

<attr name="slrPrimaryColor" format="reference|color" />
<attr name="slrPrimaryColor2" format="reference|color" />
<attr name="slrOverlayBackground" format="reference|color" />
<attr name="slrOverlaySwipeDismissBackground" format="reference|color" />
<attr name="slrOverlayPortraitSwipeDismissBackground" format="reference|color" />  <!--bg of the portrait overlay in landscape-->
<attr name="slrOverlayPickerBackground" format="reference|color" />
<attr name="slrOverlayButton" format="reference" />
<attr name="slrOverlaySecondaryButton" format="reference" />
<attr name="slrOverlaySelectionOnColor" format="reference" />     <!--this is for switch view ON-->
<attr name="slrOverlaySelectionOffColor" format="reference" />    <!--this is for switch view OFF-->
<attr name="slrOverlayIconColor" format="reference" />
<attr name="slrOverlayButtonStateEnableTrueColor" format="reference" />
<attr name="slrOverlayButtonStateEnableFalseColor" format="reference" />
<attr name="slrOverlayOnlineIndicatorColor" format="reference" />
<attr name="slrOverlayTooltipBackgroundColor" format="reference" />
<attr name="slrOverlayDotLoaderColor" format="reference|color" />
<attr name="slrOverlayCloseIcon" format="reference" />
<attr name="slrToolbarBackground" format="reference|color" />
<attr name="slrToolbarPortraitBackground" format="reference|color" />
<attr name="slrToolbarCancelColor" format="reference|color" />
<attr name="slrToolbarDividerColor" format="reference|color" />
<attr name="slrSwipeHandleColor" format="reference|color" />
<attr name="slrContactItemButtonColor" format="reference|color" />
<attr name="slrActionColor" format="reference|color" />
<attr name="slrViewTooltipActionColor" format="reference|color" />
<attr name="slrCircleButtonColor" format="reference|color" />
<attr name="slrSenderMessageColor" format="reference|color" />
<attr name="slrReceiverMessageColor" format="reference|color" />
<attr name="slrStartChattingIconColor" format="reference|color" />
<attr name="slrShareFriendsIconColor1" format="reference|color" />
<attr name="slrShareFriendsIconColor2" format="reference|color" />
<attr name="slrShareFriendsIconBackgroundColor" format="reference|color" />
<attr name="slrNotificationBadgeColor" format="reference|color" />
<attr name="slrCheckColor" format="reference|color" />
<attr name="slrCheckBackgroundColor" format="reference|color" />
<attr name="slrNotificationIconColor" format="reference|color" />
<attr name="slrInviteViaColor" format="reference|color" />
<attr name="slrWhosWatchingSendMessageButtonColor" format="reference|color" />
<attr name="slrWhosWatchingViewDefaultBackgroundColor" format="reference|color" />
<attr name="slrWhosWatchingViewActiveBackgroundColor" format="reference|color" />
<attr name="slrAvatarColors" format="reference" />
<attr name="slrShareInviteLinkIconColor" format="reference|color" />
<attr name="slrMenuSubItemBackgroundColor" format="reference|color" />
<attr name="slrInviteContactButtonBackgroundColor" format="reference|color" />
<attr name="slrInviteContactButtonTextColor" format="reference|color" />
<attr name="slrResendContactButtonBackgroundColor" format="reference|color" />
<attr name="slrResendContactButtonTextColor" format="reference|color" />
<attr name="slrGeneralErrorMessageButtonColor" format="reference|color" />
<attr name="slrWelcomeDialogColor" format="reference|color" />
<attr name="slrArrivingFriendNotificationAnimationStyle" format="reference" />
<attr name="slrInviteFromContactsIcon" format="reference" />
<attr name="slrWhosWatchingChatStartIcon" format="reference" />
<attr name="slrAppName" format="reference" />
<attr name="slrNewCounterColor" format="reference|color" />
<attr name="slrNewCounterBackgroundColor" format="reference|color" />

Base Theme Customization Example

<style name="BaseOverlayTheme" parent="StreamLayerSDK_AppTheme">
    <item name="slrPrimaryColor">@color/colorPrimary1</item>
    <item name="slrPrimaryColor2">@color/colorPrimary2</item>
    <item name="slrAppName">@string/the_app_name</item>
    <item name="fontFamily">@font/benton_sans</item>
    <item name="slrToolbarBackground">@color/colorPrimary1</item>
    <item name="slrToolbarPortraitBackground">@color/colorPrimary1</item>
    <item name="slrToolbarDividerColor">@android:color/transparent</item>
    <item name="slrSwipeHandleColor">@color/colorPrimary2</item>
    <item name="slrActionColor">@color/button_color</item>
    <item name="slrOverlayTooltipBackgroundColor">@color/colorPrimary2</item>
    <item name="slrViewTooltipActionColor">#66FFFFFF</item>
    <item name="slrCircleButtonColor">@color/colorPrimary2</item>
    <item name="slrSenderMessageColor">@color/colorPrimary2</item>
    <item name="slrReceiverMessageColor">#1AFFFFFF</item>
    <item name="slrStartChattingIconColor">@color/colorPrimary2</item>
    <item name="slrShareFriendsIconColor1">@color/colorPrimary2</item>
    <item name="slrShareFriendsIconColor2">@color/colorPrimary2</item>
    <item name="slrNotificationBadgeColor">@color/colorAccent2</item>
    <item name="slrCheckColor">@color/colorPrimary1</item>
    <item name="slrCheckBackgroundColor">@color/colorAccent2</item>
    <item name="slrInviteViaColor">@color/colorPrimary2</item>
    <item name="slrToolbarCancelColor">@color/colorSecondary1</item>
    <item name="slrWhosWatchingSendMessageButtonColor">@color/colorPrimary2</item>
    <item name="slrAvatarColors">@array/avatar_colors</item>
    <item name="slrChatSendButtonColor">@color/colorPrimary2</item>
    <item name="slrChatMessageStatusReadColor">@color/colorPrimary2</item>
    <item name="slrShareInviteLinkIconColor">@color/colorPrimary2</item>
    <item name="slrWhosWatchingViewActiveBackgroundColor">@color/colorPrimary2</item>
    <item name="slrInviteContactButtonBackgroundColor">@color/colorPrimary2</item>
    <item name="slrResendContactButtonTextColor">@color/colorPrimary2</item>
    <item name="slrWhosWatchingChatStartIcon">@drawable/ic_ww_chat_start</item>
    <item name="slrChatSwipeZoneBackgroundColor">@color/colorBlink</item>
    <item name="slrWelcomeDialogColor">@color/colorPrimary2</item>
</style>

Main Theme

The Main theme controls the appearance of StreamLayerFragment — the primary SDK surface that hosts the Launch Button, the StreamLayer menu, and in-app notifications.

Main Theme Attributes

<attr name="slrOverlayMainScrollIndicatorColor" format="color" />
<attr name="slrOverlayMainScrollIndicator" format="reference" />
<attr name="slrOverlayMainStreamBtnRippleDrawable" format="reference" />
<attr name="slrOverlayMainStreamBtnBackground" format="reference|color" />
<attr name="slrOverlayMainNotificationBadgeStyle" format="reference" />
<attr name="slrOverlayMainSwipeDownBackgroundColor" format="reference" />
<attr name="slrOverlayMainSwipeDownIconColor" format="reference" />
<attr name="slrOverlayMainCallIndicatorColor" format="reference" />
<attr name="slrOverlayMainNotificationTitle" format="reference" />
<attr name="slrOverlayMainNotificationDescription" format="reference" />
<attr name="slrMenuButtonBottomMargin" format="reference" />
<attr name="slrFactoidDefaultIcon" format="reference|color" />
<attr name="slrMenuButtonCloseImage" format="reference" />
<attr name="slrMenuButtonCloseBackground" format="reference" />

Main Theme Customization Example

<style name="MainOverlayTheme" parent="StreamLayerSDK_MainTheme">
    <item name="slrOverlayMainScrollIndicatorColor">@color/colorPrimary2</item>
    <item name="slrMenuSubItemBackgroundColor">#E6009B77</item>
    <item name="fontFamily">@font/benton_sans</item>
    <item name="slrOverlayMainStreamBtnRippleDrawable">@drawable/bg_menu_ripple</item>
    <item name="slrOverlayMainStreamBtnBackground">@drawable/bg_main_button</item>
    <item name="slrToolbarBackground">@color/colorPrimary1</item>
    <item name="slrToolbarPortraitBackground">@color/colorPrimary1</item>
    <item name="slrToolbarDividerColor">@android:color/transparent</item>
    <item name="slrSwipeHandleColor">@color/colorPrimary2</item>
    <item name="slrActionColor">@color/button_color</item>
    <item name="slrOverlayTooltipBackgroundColor">@color/colorPrimary2</item>
    <item name="slrViewTooltipActionColor">#66FFFFFF</item>
    <item name="slrNotificationBadgeColor">@color/colorAccent2</item>
    <item name="slrNotificationIconColor">@color/colorPrimary2</item>
    <item name="slrMenuButtonBottomMargin">@dimen/menuButtonBottomMargin</item>
    <item name="slrFactoidDefaultIcon">@drawable/ic_masters_logo</item>
    <item name="slrAvatarColors">@array/avatar_colors</item>
    <item name="slrWhosWatchingViewActiveBackgroundColor">@color/colorPrimary2</item>
    <item name="slrGeneralErrorMessageButtonColor">@color/colorPrimary2</item>
    <item name="slrMenuButtonCloseBackground">@drawable/bg_menu_close</item>
</style>

Profile Theme

The Profile theme styles the user profile view, including the avatar, name input, and toolbar appearance.

Profile Theme Attributes

<attr name="slrOverlayProfileTitle" format="reference" />
<attr name="slrOverlayProfileEditNameStyle" format="reference" />
<attr name="slrOverlayProfileAvatarColor" format="reference|color" />
<attr name="slrOverlayProfileNameInputBorderColor" format="reference|color" />

Profile Theme Customization Example

<style name="ProfileOverlayTheme" parent="StreamLayerSDK_ProfileTheme">
   <item name="fontFamily">@font/benton_sans</item>
   <item name="slrToolbarBackground">@color/colorPrimary1</item>
   <item name="slrSwipeHandleColor">#1AFFFFFF</item>
   <item name="slrActionColor">@color/button_color</item>
   <item name="slrOverlayTooltipBackgroundColor">@color/colorPrimary2</item>
   <item name="slrOverlayProfileAvatarColor">@color/colorPrimary2</item>
   <item name="slrNotificationIconColor">@color/colorPrimary2</item>
   <item name="colorAccent">@color/colorAccent2</item>
   <item name="slrCheckColor">@color/colorPrimary1</item>
   <item name="slrOverlayProfileNameInputBorderColor">@color/colorPrimary2</item>
   <item name="slrAvatarColors">@array/avatar_colors</item>
</style>

Invite Theme

The Invite theme styles the invitation flow — the screens a user sees when sending or receiving invitations.

Invite Theme Attributes

<attr name="slrOverlayInviteStartTitle" format="reference" />
<attr name="slrOverlayInviteSuccessTitle" format="reference" />
<attr name="slrOverlayInviteWaveMessageTitle" format="reference" />
<attr name="slrOverlayInviteSuccessIcon" format="reference" />
<attr name="slrOverlayInviteSuccessDescriptionText" format="reference" />

Invite Theme Customization Example

<style name="InviteOverlayTheme" parent="StreamLayerSDK_InviteTheme">
    <item name="fontFamily">@font/benton_sans</item>
    <item name="slrToolbarBackground">@color/colorPrimary1</item>
    <item name="slrToolbarPortraitBackground">@color/colorPrimary1</item>
    <item name="slrToolbarDividerColor">@android:color/transparent</item>
    <item name="slrSwipeHandleColor">@color/colorPrimary2</item>
    <item name="slrActionColor">@color/button_color</item>
    <item name="slrOverlayTooltipBackgroundColor">@color/colorPrimary2</item>
    <item name="slrAvatarColors">@array/avatar_colors</item>
    <item name="slrOverlayInviteSuccessDescriptionText">@string/invite_success_text</item>
    <item name="slrOverlayInviteSuccessIcon">@drawable/ic_masters_logo_invite</item>
</style>

Predictions Theme

The Predictions theme controls the appearance of the predictions, polls, and trivia units — including pick history, leaderboard tabs, answer indicators, and timers.

Predictions Theme Attributes

<attr name="slrPickHistoryAnswerButtonColor" format="reference" />
<attr name="slrPickHistoryWonColor" format="reference" />
<attr name="slrPickHistoryLostColor" format="reference" />
<attr name="slrPickHistoryDNPColor" format="reference" />
<attr name="slrLeaderboardTabUnderscoreColor" format="reference" />
<attr name="slrPredictionsWrongAnswerColor" format="reference" />
<attr name="slrPredictionsTimerColor" format="reference" />
<attr name="slrPredictionsTimerFinishColor" format="reference" />
<attr name="slrPredictionsMoreToComeImage" format="reference" />

Predictions Theme Customization Example

<style name="PredictionsOverlayTheme" parent="StreamLayerSDK_PredictionsTheme">
    <item name="slrPrimaryColor">@color/colorPrimary1</item>
    <item name="slrPrimaryColor2">@color/colorPrimary2</item>
    <item name="slrAppName">@string/the_app_name</item>
    <item name="fontFamily">@font/benton_sans</item>
    <item name="slrToolbarBackground">@color/colorPrimary1</item>
    <item name="slrToolbarPortraitBackground">@color/colorPrimary1</item>
    <item name="slrToolbarDividerColor">@android:color/transparent</item>
    <item name="slrSwipeHandleColor">@color/colorPrimary2</item>
    <item name="slrActionColor">@color/button_color</item>
    <item name="slrPickHistoryAnswerButtonColor">@color/colorPrimary2</item>
    <item name="slrPickHistoryWonColor">@color/colorPrimary2</item>
    <item name="slrPickHistoryLostColor">@color/colorAccent1</item>
    <item name="slrPickHistoryDNPColor">@color/colorSecondary1</item>
    <item name="slrLeaderboardTabUnderscoreColor">@color/colorPrimary2</item>
    <item name="slrPredictionsWrongAnswerColor">@color/slr_predictions_incorrect</item>
    <item name="slrPredictionsTimerColor">@color/colorSecondary1</item>
    <item name="slrPredictionsTimerFinishColor">@color/colorAccent2</item>
    <item name="slrAvatarColors">@array/avatar_colors</item>
    <item name="slrPredictionsMoreToComeImage">@drawable/ic_more_to_come</item>
</style>

Statistics Theme

The Statistics theme styles the stat unit view. The attributes below are sport-specific (golf scoring colors) but apply wherever the statistics view is displayed.

Statistics Theme Attributes

<attr name="slrGolfPlayerNegativeColor" format="reference" />
<attr name="slrGolfPlayerPositiveColor" format="reference" />
<attr name="slrGolfPlayerDefaultColor" format="reference" />

Statistics Theme Customization Example

<style name="StatisticsOverlayTheme" parent="StreamLayerSDK_StatisticsTheme">
   <item name="fontFamily">@font/benton_sans</item>
   <item name="slrToolbarBackground">@color/colorPrimary1</item>
   <item name="slrSwipeHandleColor">#1AFFFFFF</item>
   <item name="slrActionColor">@color/button_color</item>
   <item name="slrCheckColor">@color/colorPrimary1</item>
   <item name="slrGolfPlayerNegativeColor">@color/colorAccent1</item>
   <item name="slrGolfPlayerDefaultColor">@color/colorSecondary1_alpha_50</item>
   <item name="slrGolfPlayerPositiveColor">@color/colorPrimary2</item>
</style>

Messenger Theme

The Messenger theme styles the chat views, including send buttons, sticker pickers, keyboard colors, unread indicators, and swipe actions.

Messenger Theme Attributes

<attr name="slrChatSendButtonColor" format="reference" />
<attr name="slrChatStickerButtonColor" format="reference" />
<attr name="slrChatMessageStatusReadColor" format="reference" />
<attr name="slrChatToolbarWPIconColor" format="reference" />
<attr name="slrChatKeyboardTabBackgroundColor" format="reference|color" />
<attr name="slrChatKeyboardBackgroundColor" format="reference|color" />
<attr name="slrChatKeyboardEmojiTabBackgroundColor" format="reference|color" />
<attr name="slrChatUnreadCircleBackgroundColor" format="reference|color" />
<attr name="slrChatMutedButtonBackgroundColor" format="reference|color" />
<attr name="slrChatUnMutedButtonBackgroundColor" format="reference|color" />
<attr name="slrChatDeleteButtonBackgroundColor" format="reference|color" />
<attr name="slrChatsEmptyIcon" format="reference" />
<attr name="slrChatsToolbarBackgroundColor" format="reference|color" />
<attr name="slrChatsToolbarDividerColor" format="reference|color" />
<attr name="slrChatSwipeZoneBackgroundColor" format="reference|color" />
<attr name="slrChatUnreadMessageTextAppearance" format="reference" />
<attr name="slrChatReadMessageAppearance" format="reference" />

Messenger Theme Customization Example

<style name="MessengerOverlayTheme" parent="BaseOverlayTheme">
    <item name="slrAppName">@string/the_app_name</item>
    <item name="slrChatSendButtonColor">@color/colorPrimary2</item>
    <item name="slrToolbarCancelColor">@color/colorSecondary1</item>
    <item name="slrToolbarDividerColor">@android:color/transparent</item>
    <item name="slrChatStickerButtonColor">@color/colorPrimary2</item>
    <item name="slrCircleButtonColor">@color/colorPrimary2</item>
    <item name="slrShareFriendsIconColor1">@color/colorPrimary2</item>
    <item name="slrShareFriendsIconColor2">@color/colorPrimary2</item>
    <item name="slrChatKeyboardTabBackgroundColor">@color/colorPrimary2</item>
    <item name="slrChatKeyboardEmojiTabBackgroundColor">@color/colorPrimary2</item>
    <item name="slrChatKeyboardBackgroundColor">#161A1F</item>
    <item name="slrChatUnreadCircleBackgroundColor">@color/colorPrimary2</item>
    <item name="slrInviteFromContactsIcon">@drawable/ic_invite_from_contacts</item>
    <item name="slrChatMutedButtonBackgroundColor">@color/slr_white_alpha_40</item>
    <item name="slrChatUnMutedButtonBackgroundColor">@color/colorPrimary2</item>
    <item name="slrChatDeleteButtonBackgroundColor">@color/colorAccent1</item>
    <item name="slrChatsEmptyIcon">@drawable/ic_chats_empty</item>
    <item name="slrChatsToolbarBackgroundColor">@color/colorPrimary1</item>
    <item name="slrChatsToolbarDividerColor">@android:color/transparent</item>
    <item name="slrChatSwipeZoneBackgroundColor">@color/colorBlink</item>
    <item name="slrChatUnreadMessageTextAppearance">@style/ChatTheme_Unread_Message</item>
    <item name="slrChatReadMessageAppearance">@style/ChatTheme_Read_Message</item>
</style>

Avatar Colors

User avatars are assigned a color from the slrAvatarColors array. Define as many entries as you like — the SDK cycles through them.

<array name="avatar_colors">
   <item>@color/avatar_color_1</item>
   <item>@color/avatar_color_2</item>
   <item>@color/avatar_color_3</item>
   <item>@color/avatar_color_4</item>
   <item>@color/avatar_color_5</item>
   <item>@color/avatar_color_6</item>
   <item>@color/avatar_color_7</item>
   <item>@color/avatar_color_8</item>
   <item>@color/avatar_color_9</item>
   <item>@color/avatar_color_10</item>
</array>

Notification Style

NotificationsStyle controls the visual design of in-app notification cards for predictions, polls, trivia, insights, and Highlights content.

/**
* Design type for predictions/polls/trivia/insight/tweet notifications
*/
enum class NotificationsStyle {
    DESIGN_NUMBER_ONE, DESIGN_NUMBER_TWO
}

Applying Custom Themes

Apply your custom themes programmatically with StreamLayer.setCustomTheme(). Pass an SLRTheme instance that maps each theme slot to your custom style resource:

StreamLayer.setCustomTheme(
   SLRTheme(
      mainTheme = R.style.MainOverlayTheme,
      profileTheme = R.style.ProfileOverlayTheme,
      baseTheme = R.style.BaseOverlayTheme,
      inviteTheme = R.style.InviteOverlayTheme,
      gamesTheme = R.style.PredictionsOverlayTheme,
      statisticsTheme = R.style.StatisticsOverlayTheme,
      chatTheme = R.style.MessengerOverlayTheme,
      notificationsStyle = SLRTheme.NotificationsStyle.DESIGN_NUMBER_ONE
   )
)

Working examples are available in the demo app — see App.kt and themes.xml.

Related

Updated 14 days ago