LiveLike

The LiveLike Developer Hub

Welcome to the LiveLike developer hub. You'll find comprehensive guides and documentation to help you start working with LiveLike as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Custom Theming

The Engagement SDK allows you to customize a variety of visual attributes on the widget and chat elements in order to achieve your desired visual themes.

Widget Theming

You can theme widgets in a variety of different ways as shown below:

On Android, you can override the default values of colors, fonts, and dimensions in the values folder of the SDK. The customizable variables and their functions are listed below:

Colors

You can override the color values by setting your own. The default values for the SDK are listed in the colors.xml resource file.

Common

livelike_default_text_color : Default color for all text in the SDK.

Widget Headers

These control the gradient colors of the title. You can set them to be the same to get a single solid color title background.


livelike_header_text_color : The color of the title text in a widget, same as default text color


Poll View

  • * livelike_poll_title_gradient_left
  • * livelike_poll_title_gradient_right

Quiz View

  • * livelike_quiz_title_gradient_left
  • * livelike_quiz_title_gradient_right

Prediction View

  • * livelike_prediction_title_gradient_left
  • * livelike_prediction_title_gradient_right

    • Emoji Slider

      • * livelike_image_slider_header_bg
Widget Options

Poll Option: These are the colors of percentage bar and border for the poll option view.

  • * livelike_poll_bar_gradient_left
  • * livelike_poll_bar_gradient_right
  • * livelike_poll_option_selected_border

Quiz Option: These are the colors of percentage bar and border for the quiz option view.

  • * livelike_quiz_bar_gradient_left
  • * livelike_quiz_bar_gradient_right
  • * livelike_quiz_option_selected_border

Prediction Option: These are the colors of percentage bar and border for the prediction option view.

  • * livelike_prediction_option_selected_border
  • * livelike_prediction_image_option_selected_border

Not Selected option: These are the colors of percentage bar for the not selected option view for all options.

  • * livelike_neutral_bar_gradient_left
  • * livelike_neutral_bar_gradient_right

Text Color:

  • * livelike_option_text_color : Default text color in the options, same as default text color.

Right and wrong answer percentage bar : For widgets where the percentage bar's and border color is different based on user input:

  • * livelike_correct_bar_gradient_left
  • * livelike_correct_bar_gradient_right
  • * livelike_incorrect_bar_gradient_left
  • * livelike_incorrect_bar_gradient_right
  • * livelike_neutral_bar_gradient_left
  • * livelike_neutral_bar_gradient_right
  • * livelike_correct_option_border_color
  • * livelike_incorrect_option_border_color

Option Background: For updating the background color of every option(not the progress color)

  • livelike_default_button_background_color

Emoji Slider: For updating the style of emoji slider

  • * livelike_image_slider_gradient_start
  • * livelike_image_slider_gradient_end
  • * livelike_image_slider_bg
  • * livelike_image_slider_widget_result_end_color
  • * livelike_image_slider_widget_result_center_color
Alert Widget

Header

The title bar's background color gradients:

  • * livelike_alert_notification_label_gradient_left
  • * livelike_alert_notification_label_gradient_right
  • * livelike_alert_label_background_shadow : Shadow color of the title

  • To have custom background with customize drawable ,create a drawable with name alert_notification_label_background.xml ,this will override the current header background with your drawable.


Body

Background Color:

  • * livelike_alert_background_gradient_left
  • * livelike_alert_background_gradient_right

  • Text Color:

  • * livelike_alert_body_text_color : The color of the body text of the alert
  • * livelike_alert_link_text_color : Color of the link text
  • * livelike_alert_label_text_color : Color of the header text

Fonts

Font size can be controlled via the variables listed in dimens.xml.

Common
  • * livelike_header_text_size : The font size of the header text.
  • * livelike_option_text_size : The font size of the options text.
  • * livelike_percent_label_text_size : The percentage bar text size.
Alert Widget
  • * livelike_alert_body_text_size : Alert widget body text size.
  • * livelike_alert_link_text_size : Alert link text size.
  • * livelike_alert_label_text_size : Alert label text size.

Other

These include variables like border radius and stroke width of most ui elements.

Details
  • * livelike_percent_bar_corner_radius
  • * livelike_percent_bar_corner_radius_image
  • * livelike_header_corner_radius
  • * livelike_header_background_notification_label_radius
  • * livelike_chat_rounded_rect_radius
  • * livelike_button_corner_radius
  • * livelike_button_outline_stroke_width
  • * livelike_confirm_outline_stroke_width
  • * livelike_header_outline_stroke_width

Chat Theming

Just like the widgets, the chat component is also customizable through overriding the default values provided in the dimens/colors/attrs xml files with values in XML files in the integrating application. The variables available for customization are listed below:

Chat View

The chat view is designed to fill the parent view. So its height and width can be controlled directly by the integrator by controlling the height and width of the view provided by them.

Background

Gradient start and end color:

  • * livelike_chat_background_end_color, color
  • * livelike_chat_background_start_color, color

Gradient angle:

  • * livelike_chat_background_gradient_angle, integer

Username

Default color of the text:

  • * livelike_openChatNicknameOther, color

Color of the text if message sent by current user:

  • * livelike_openChatNicknameMe, color

Font size of the text:

  • * livelike_default_chat_cell_name_size, dimen

Message

Text color:

  • * livelike_default_chat_cell_message_color, color

Text font size:

  • * livelike_default_chat_cell_text_size, dimen

Chat Bubble

Border radius of chat bubble:

  • * livelike_chat_rounded_rect_radius, dimen

Background color of the chat message:

  • * livelike_chat_rounded_rect_color, color

Padding (Horizontal/Vertical):

  • * livelike_default_chat_cell_padding_horizontal, dimen

  • * livelike_default_chat_cell_padding_vertical, dimen

Padding (Each Side):

  • * livelike_default_chat_cell_padding_left, dimen
  • * livelike_default_chat_cell_padding_right, dimen
  • * livelike_default_chat_cell_padding_top, dimen
  • * livelike_default_chat_cell_padding_bottom, dimen

Margin:

  • * livelike_default_chat_cell_margin_vertical, dimen

Chat Input
  • * Font size: livelike_default_chat_input_text_size, dimen
  • * Font color: livelike_chat_input_text_color, color
  • * Background Color: livelike_chat_input_background_color, color
  • * Border Radius: livelike_default_chat_input_border_radius, dimen
  • * Border Color: livelike_chat_input_border_color, color
  • * Border Width: livelike_default_chat_input_border_stroke, dimen
  • * Margin: livelike_default_chat_input_margin_bottom, dimen
Snap To Live
  • Background color: livelike_live_button_background_color, color
  • Arrow color: livelike_live_button_arrow_color, color

Advanced Chat Customization

As an integrator, you are able to customize the look and feel of the experience you provide to your users through the XML custom attributes using in layout. Create the theme and add the attributes you want to update.

<style name="CustomChatTheme" parent="AppTheme">
        <item name="displayUserProfile">false</item><!-- To display the gamification display in chatView -->
        <item name="chatWidth">match_parent</item><!-- to update the width od chat bubble -->
        <item name="chatBubbleBackground">#FFF</item><!-- to update the background of chat bubble,it can be drawable/color -->
        <item name="chatBackground">#FFF</item><!-- update the background of chat message box,it can be drawable/color -->
        <item name="usernameColor">#000</item><!-- update the color of username in chat message -->
        <item name="otherUsernameColor">#000</item><!-- update the color of different username in chat message -->
        <item name="messageColor">#5f5f5f</item><!-- update color of message in chat message -->
        <item name="chatInputViewBackground">#FFF</item><!-- update the background of ChatInput, it can be drawable/color -->
        <item name="chatDisplayBackground">#efeff4</item><!-- update the background of Chat List, it can be drawable/color  -->
        <item name="chatViewBackground">#FFF</item><!-- update the background of full ChatFull View, it can be drawable/color --> 
        <item name="chatInputTextColor">#8e8e93</item><!-- update the color of textInput -->
        <item name="chatInputTextSize">15sp</item><!-- update the textsize of textInput -->
        <item name="chatInputTextHintColor">#8e8e93</item><!-- update the hint color of textInput -->
  <!--update the margin for chat box -->
        <item name="chatMarginBottom">3dp</item>
        <item name="chatMarginTop">0dp</item>
        <item name="chatMarginLeft">0dp</item>
        <item name="chatMarginRight">0dp</item>
  <!--update the margin for chat box -->
  <!-- update the position of ChatReactionView -->
        <item name="chatReactionXPosition">120dp</item>
        <item name="chatReactionYPosition">25dp</item>
  <!-- update the position of ChatReactionView -->
        <item name="chatReactionElevation">6dp</item><!-- update the elevation of chat reaction (CardView) -->
        <item name="chatReactionRadius">20dp</item> <!-- update the chat Reaction(CardView) View corner radius -->
         <attr name="chatReactionPanelColor" format="color" /> <!-- update the chat Reaction Background Color only -->
  <attr name="chatReactionPanelCountColor" format="color" /><!-- update the chat Reaction Panel reaction's count color -->
        <attr name="chatReactionDisplayCountColor" format="color" /><!-- update the text color of total reactions count in chat message -->
   <attr name="chatReactionFlagTintColor" format="color" /><!-- update the flag icon tint color in chat reaction panel -->
  <attr name="chatReactionMessageBubbleHighlightedBackground" format="reference" /><!-- update the color of message bubble on selected -->
        <attr name="chatReactionMessageBackHighlightedBackground" format="reference|color" /><!-- update the color of message back on selected -->
        <item name="chatInputBackground">@drawable/rounded_color_input_background</item><!-- update the background of chatInput with drawable/color -->
        <item name="showChatAvatarLogo">true</item> <!-- show/hide the user display image in chat message -->
        <item name="chatAvatarCircle">false</item> <!-- circle the user display image in the chat message -->
  <!-- update the size of user display image -->
        <item name="chatAvatarHeight">36dp</item>
        <item name="chatAvatarWidth">32dp</item>
  <!-- update the size of user display image -->
        <item name="chatAvatarGravity">top</item> <!-- update the gravity position of the user avatar -->
  <! -- update the margin of user display image -->
        <item name="chatAvatarMarginLeft">16dp</item>
        <item name="chatAvatarMarginRight">0dp</item>
        <item name="chatAvatarMarginBottom">0dp</item>
        <item name="chatAvatarMarginTop">1dp</item>
  <!-- update the margin of user display image -->
  <!-- update size of send button -->
        <item name="sendButtonHeight">38dp</item>
        <item name="sendButtonWidth">38dp</item>
  <!-- update size of send button -->
  <!-- update the padding of send button -->
        <item name="chatSendButtonPaddingLeft">2dp</item>
        <item name="chatSendButtonPaddingRight">2dp</item>
        <item name="chatSendButtonPaddingTop">0dp</item>
        <item name="chatSendButtonPaddingBottom">0dp</item>
  <!-- update the padding of send button -->
        <item name="userPicDrawable">@drawable/ic_user_pic</item><!-- placeholder for user display image in chat message -->
        <item name="chatSendDrawable">@drawable/ic_send_turner</item><!-- update the send button image -->
        <item name="chatSendBackground">@drawable/send_chat_blue_circle_back</item><!-- Background of send message Button -->
  <!-- update the padding of the chat bubble -->
        <item name="chatBubblePaddingLeft">8dp</item>
        <item name="chatBubblePaddingRight">8dp</item>
        <item name="chatBubblePaddingTop">8dp</item>
        <item name="chatBubblePaddingBottom">8dp</item>
  <!-- update the padding of the chat bubble -->
        <item name="chatReactionPadding">8dp</item><!-- update the internal padding of chatReaction View -->
    <item name="stickerSelectedTabIndicatorColor">@color/livelike_black</item><!-- update the sticker keyboard tab indicator color -->
        <item name="stickerTabBackground">@color/livelike_white</item><!-- update the sticker keyboard tabs background -->
        <item name="stickerBackground">@color/livelike_white</item><!-- update the sticker keyboard background color or drawable -->
        <item name="stickerRecentEmptyTextColor">@color/livelike_black</item><!-- update the sticker keyboard empty recent chat text message color -->
   <item name="chatMessageTopBorderHeight">1dp</item><!--update height of top border of chat message box -->
        <item name="chatMessageTopBorderColor">#efeff4</item><!-- update color of top border of chat message box -->            
  <item name="chatMessageBottomBorderHeight">1dp</item><!--update height of bottom border of chat message box -->
        <item name="chatMessageBottomBorderColor">#efeff4</item><!-- update color of bottom border of chat message box -->
  <item name="reaction_hint_enable">true</item><!--enable/diable reaction hint in chat message box -->
   <item name="reaction_icon">@drawable/ic_chat_reaction_turner</item><!--update the reaction hint icon in chat message box -->
  <item name="showStickerSend">true</item><!--show/hide the sticker keyboard icon in chat input box -->
  <item name="showMessageTime">true</item><!--show/hide message time in the chat message box -->
  <item name="sendIconTintColor">@color/black</item><!--update the color of icon in the send message button -->
  <item name="stickerIconTintColor">@color/black</item><!-- update the color of the icon of the sticker keyboard -->
  <item name="chatBubbleWidth">match_parent</item><!-- update the width of chat bubble,it is not the entire message box only the bubble which exclude the chat avatar -->
  <item name="chatBackgroundWidth">wrap_content</item><!-- update the width of the chat message box the entire box which include chat avatar and message bubble -->
  <!-- update the margin for chat bubble in the message box -->
    <item name="chatBubbleMarginLeft">10dp</item>
    <item name="chatBubbleMarginTop">10dp</item>
    <item name="chatBubbleMarginRight">10dp</item>
    <item name="chatBubbleMarginBottom">10dp</item>
  <!-- update the margin for chat bubble in the message box -->
  <item name="chatSelectedReactionRadius">12dp<item><!-- update the radius of the selected reaction in the reaction popup -->
    <item name="chatStickerSendDrawable">@drawable/sticker_icon</item><!-- update the sticker icon in the message input box -->
     <item name="chatStickerKeyboardSendDrawable">@drawable/keyboard_icon</item><!-- update the keyboard icon in the message input box -->
    <item name="chatAvatarRadius">15dp</item><!--update the radius of the chat avatar -->
    <item name="rankValueTextColor">@color/white</item><!-- update the text color of the rank show in the chat view -->
            <item name="chatMessageBottomBorderHeight">1dp</item><!-- update the height of  bottom of message box -->
        <item name="chatMessageBottomBorderColor">#efeff4</item><!-- update the border color of bottom of message box -->
    <item name="reaction_icon">@drawable/ic_update_chat_reaction</item><!-- update the reaction icon show at top-right of message box-->
        <item name="reaction_hint_enable">true</item><!-- to show the reaction icon at the message box -->
        <item name="reaction_icons_margin_top">15dp</item><!-- margins of reaction icons shown at top-right of the message box by default -->
        <item name="reaction_icons_margin_bottom">10dp</item>
        <item name="reaction_icon_position_bottom">true</item>
        <item name="reaction_count_margin_top">13dp</item><!-- margins of the reaction count show at message box -->
        <item name="reaction_count_margin_bottom">11dp</item>
        <item name="reaction_count_icons_position_bottom">true</item><!-- to show the reaction count with icons positions at bottom of message box -->
        <item name="reaction_icons_gap_factor">0.93</item><!-- the gap between the reaction icons shown at top message box, it is the factor which will define the gap with standard width, to overlay the icons use factor value less than 1 and to show gap use factor value greater than 1  -->
        <item name="chatReactionModerationFlagVisible">false</item><!-- to show/hide the moderation flag icon with reaction panel -->
        <item name="chatUserNameCustomFontPath">fonts/RingsideExtraWide-Book.otf</item><!-- to set the font of the username of the sender ,it takes file from the asset folder -->
        <item name="chatUserNameTextAllCaps">true</item><!-- to make all the text of username as capital -->
        <item name="chatUserNameTextSize">12sp</item><!-- set the textsize of username -->
        <item name="chatMessageCustomFontPath">fonts/RingsideRegular-Book.otf</item><!-- to set he custom font of message -->
        <item name="chatMessageTextSize">14sp</item><!-- to set the textsize of message -->
        <item name="chatMessageTimeTextSize">10sp</item><!-- to update the textsize of the time of the message-->
        <item name="chatMessageTimeCustomFontPath">fonts/RingsideRegular-Book.otf</item><!-- to set the font of the time of the message -->
        <item name="chatMessageTimeTextAllCaps">true</item><!-- to make all text capital of time of message -->
        <item name="chatMessageTimeTextColor">#000000</item><!-- to udpate the textcolor of message time -->
        <item name="chatReactionDisplayCountTextSize">10sp</item><!-- to update the text size of the count of reactions in message -->
        <item name="chatReactionDisplayCountCustomFontPath">fonts/RingsideExtraWide-Black.otf</item><!-- to set the font of the reaction count of the message -->
        <item name="chatReactionDisplayCountTextStyle">bold</item><!-- to set the textstyle of the reaction count of the message -->
        <item name="chatReactionDisplaySize">12dp</item><!-- to update the size of the reaction icons -->
        <item name="chatReactionPanelGravity">right|bottom</item><!-- to set the gravity of the reaction panel w.r.t the message box -->
        <item name="chatReactionPanelCountColor">@color/mml_chat_text_color</item><!-- to update the color of count shown in reaction panel for every reaction -->
        <item name="chatReactionPanelCountCustomFontPath">fonts/RingsideExtraWide-Black.otf</item><!-- to set the font of count shown in reaction panel for every reaction -->
    <item name="chatReactionPanelCountVisibleIfZero">false</item><!-- to set the visibility of reaction count on Reaction panel if value is zero -->
        <item name="chatMessageTimeTextLetterSpacing">0.1</item><!--set the letter spacing of chat message time -->
        <item name="chatMessageTextLetterSpacing">0.0</item><!--set the letter spacing of chat message -->
        <item name="chatUserNameTextLetterSpacing">0.0</item><!--set the letter spacing of chat username -->
    </style>

Chat Bubble

<item name="chatWidth">match_parent</item><!-- to update the width od chat bubble -->
        <item name="chatBubbleBackground">#FFF</item><!-- to update the background of chat bubble,it can be drawable/color -->
  <item name="chatReactionMessageBubbleHighlightedBackground">@color/yellow</item> <!-- update the color of message bubble on selected -->
<item name="chatBubbleWidth">match_parent</item><!-- update the width of chat bubble,it is not the entire message box only the bubble which exclude the chat avatar -->
  <item name="chatBackgroundWidth">wrap_content</item><!-- update the width of the chat message box the entire box which include chat avatar and message bubble -->
  <!-- update the margin for chat bubble in the message box -->
    <item name="chatBubbleMarginLeft">10dp</item>
    <item name="chatBubbleMarginTop">10dp</item>
    <item name="chatBubbleMarginRight">10dp</item>
    <item name="chatBubbleMarginBottom">10dp</item>
  <!-- update the margin for chat bubble in the message box -->
 <!-- update the padding of the chat bubble -->
        <item name="chatBubblePaddingLeft">8dp</item>
        <item name="chatBubblePaddingRight">8dp</item>
        <item name="chatBubblePaddingTop">8dp</item>
        <item name="chatBubblePaddingBottom">8dp</item>
  <!-- update the padding of the chat bubble -->

Send Button

<!-- update size of send button -->
        <item name="sendButtonHeight">38dp</item>
        <item name="sendButtonWidth">38dp</item>
  <!-- update size of send button -->
  <!-- update the padding of send button -->
        <item name="chatSendButtonPaddingLeft">2dp</item>
        <item name="chatSendButtonPaddingRight">2dp</item>
        <item name="chatSendButtonPaddingTop">0dp</item>
        <item name="chatSendButtonPaddingBottom">0dp</item>
  <!-- update the padding of send button -->
 <item name="chatSendDrawable">@drawable/ic_send_turner</item><!-- update the send button image -->
        <item name="chatSendBackground">@drawable/send_chat_blue_circle_back</item><!-- Background of send message Button -->
 <item name="sendIconTintColor">@color/black</item><!--update the color of icon in the send message button -->

After that apply the style to your ChatView

<com.livelike.engagementsdk.chat.ChatView
        android:id="@+id/chat_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        style="@style/CustomChatTheme"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

ChatView External Media
To Allow user of external media in the ChatView, you need to set the variable value to true
for example :
chat_view.allowMediaFromKeyboard = true

Note: By Default the allowMediaFromKeyboard is true

Snap to Live Button
To update the position of the snap to Live button set the values in their respective files which will override the values of SDK.

  1. dimens: livelike_snap_live_width,livelike_snap_live_height,livelike_snap_live_horizontal_bias(float),livelike_snap_live_radius,livelike_snap_live_elevation,livelike_snap_live_margin_start,livelike_snap_live_margin_left,livelike_snap_live_margin_end,livelike_snap_live_margin_right,livelike_snap_live_margin_bottom
  2. colors: livelike_snap_live_icon_color,livelike_snap_live_color
  3. drawable: ic_chat_ic_live.png

Chat: Message Timestamp Display

To update the message timestamp textview text color and font.

<color name="livelike_chatMessage_timestamp_text_color">#666666</color>

<item name="livelike_chatMessage_timestamp_text_font"    
type="font">@font/roboto_regular</item>

Overriding Widget Animations

You can also override the default Lottie animations for some widgets. To do this you need to do the following:

  1. Create a folder inside the assets folder.
  2. Provide the folder name to the winAnimation and loseAnimation tags as shown below:
<item name="winAnimation">@string/win_animation</item><!-- name of the folder inside assets folder where win animations are placed -->
<item name="loseAnimation">@string/lose_animation</item><!-- name of the folder inside assets folder where lose animations are placed -->
  1. You can provide 1 or more custom animations. If more than 1 animation is provided we will cycle through those in random order.

Instructions for creating the Lottie animations can be found in the Lottie Animation Guidelines.

Updated 5 months ago

Custom Theming


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.