React to a live event
Reactions is a social interaction tool that encourages audience engagement during a live event. Users can express their response to the live event beyond text using a reaction icon. Similar to the reaction feature seen in Instagram or YouTube live streams, users can use the reaction button on the live event view and other users, including the host, will see the corresponding animated reaction on their mobile screens.
Implement Reactions in LiveEventActivity
In the header component of LiveEventActivity or LiveEventFragment, users can find a customizable reaction button. Only participants can send reactions since the reaction button is only visible for participants and not for hosts.
When a participant taps on the reaction button, the reaction icon will appear as an animation on the mobile screen, moving upwards and oscillating from left to right. The animated reaction is visible in both participant view and host view.
Customization
You can customize the reaction icon and its animation by modifying the properties of the LiveEventFragment class.
UI Customization
The following table lists properties that you can use to customize the reaction animation.
| Property name | Description |
|---|---|
setReactions | Determines whether to use the reactions feature in |
setReactionAnimationHeightRatio | Specifies the ratio of the screen's total height that the animated reaction moves in. |
setReactionAnimationWidth | Specifies the width of the total area of the screen that the animated reaction moves in. |
setReactionAnimationRepeatCount | Specifies the maximum number of the times that the reaction icon moves from left to right. Each reaction icon tapped by a participant will be assigned to a random number in the range from one to the specified value. |
setReactionButtonIconResId | Sets the resource ID of the reaction button. |
setReactionIconResId | Sets the resource ID of the reaction icon. |
setReactionColorResList | Sets a list of colors that can be used for the reaction icon. The colors are applied to the reaction icon randomly within the specified color list. |
Icon resource
The following table lists icons for reactions that you can customize.
| Icon | Image | Description |
|---|---|---|
ic_heart | Indicates the button image to send a reaction in the live event fragment. | |
ic_heart_fill_24 | Indicates the button image that's used to animate reactions in the live event fragment. |