Android
Advanced
Topics

This is a developers' guide for setting up a LiveLike SDK configuration for native Android apps. We will take you through the basic technical steps for configuration and show you how to send your first widgets and chat messages. We will also provide detailed samples and instructions for a complete LiveLike integration.

Sync

This feature enables you to publish spoiler-free content with the Engagement SDK. When enabled, all published content from the CMS and chat messages will be synced with the live video (we don't currently support VOD). To enable Sync you will need to provide a value that represents the date/time of your media player's current playback position.

To enable sync include a method to the createSession that returns the current live timecode.

val session = sdk.createContentSession("", object :EngagementSDK.TimecodeGetter{
            override fun getTimecode(): EpochTime {
                return EpochTime(player.bufferedPosition)
            }
        })
LiveLikeContentSession session = engagementSDK.createContentSession("< program-id>", new EngagementSDK.TimecodeGetter() {
      @NotNull
      @Override
      public EpochTime getTimecode() {
        return new EpochTime(player.getEpochTime());
      }
    });

How to use the plugin for easy video-sync

Prerequisites:

  • HLS Streams
  • Include the Program-Date-Time information in the manifest
  • Have access to the Exoplayer instance in code

Add the following to your build.gradle to install the EngagementSDK Exoplayer plugin

implementation 'org.bitbucket.livelike.livelike-android-sdk:pluginexoplayer:master-SNAPSHOT'

When the Session is initialized you can now pass your Exoplayer instance directly and get your HLS stream synchronized with widgets and chat. The plugin will get the timecode from the Program-date-time tags included in your manifest.

val session = sdk.createExoplayerSession(
            object : PlayerProvider {
                override fun get(): SimpleExoPlayer? {
                    return getPlayer()
                }
            },
            "< program-id>"
        )
import static com.livelike.livelikepreintegrators.ExoplayerPreintegratorKt.createExoplayerSession;

ContentSession session = createExoplayerSession(engagementSDK, () -> getPlayerInstance(), "< program-id>");

Pausing Content Sessions

Content Sessions can be paused to temporarily ignore all incoming Widgets and Chat messages until resumed. This can be useful if you need to display an advertisement without overlay from the Engagement SDK, as an example.

//Pause
session.pause()

//Resume
session.resume()
//Pause
session.pause()

//Resume
session.resume()

Customize Your Theme

Our Engagement SDK allows you to customize fonts, colors, corner radii, padding, margins and spacing to conform to your style guide. The snippets below show chat corner radii and chat background colors, as well as widget corner radii and widget background colors as sample customizations.

To get started, create a theme object, adjust the relevant properties, and apply that object to your WidgetViewController and ChatViewController. For the full list of customizable properties see the API Reference.

The same widget with different themes:

Widgets

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 Customization:

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

livelike_default_text_color : Default color for all text in the sdk.
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_default_title_gradient_left
  • livelike_default_title_gradient_right
livelike_header_text_color : The color of the title text in a widget, same as default text color
Image Option: These control the image option background gradient colors.
  • livelike_image_option_background_start
  • livelike_image_option_background_center
  • livelike_image_option_background_end
Text Option: These are the background colors for the text option view.
  • livelike_default_bar_gradient_left
  • livelike_default_bar_gradient_right
Selected Option Border:
  • livelike_default_option_selected_border : The border color of a user selected option.
Text Color:
  • livelike_option_text_color : Default text color in the options, same as default text color.
Percentage Bar: The colors of the percentage bar in the widget is controlled by the following variables:
  • livelike_default_bar_gradient_left
  • livelike_default_bar_gradient_right
Right and wrong answer percentage bar : For widgets where the percentage bar's 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
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
  • Header Text Color:
    • livelike_alert_label_text_color : Text color of the label
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 Customization:

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

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.
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 Customizations:

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

  • 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

Just like the widgets, 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:

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:
    Control horizontal and vertical padding
    • livelike_default_chat_cell_padding_horizontal , dimen
    • livelike_default_chat_cell_padding_vertical , dimen
    Or control padding on individual sides
    • 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
  • 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
  • Background color: livelike_live_button_background_color , color
  • Arrow color: livelike_live_button_arrow_color , color

Overriding the values above, most of the visuals of the chat system can be customized. An example is linked below:

Contacting LiveLike Support

If you've been unable to solve your problem with the help of the sections above, please feel free to contact the LiveLike support team at support@livelike.com.