ClickCease

How to Create a Livestream Chat Overlay with Amity Social Cloud (Android)

Dhivya Jayapal
Dhivya Jayapal
Technical Writer
Amity Social Cloud
Ios
Android
Web

Introduction

The chat overlay feature enables you to add live chat to a livestream, resulting in higher chat rates on the website. It makes your stream more engaging and helps you build your community faster. In short, chat overlay is a great way to unite your community in a single livestream.

With Amity Social Cloud's Android UIKit, you should be able to create a social app by now. We will look at how you can customize your app by adding a chat overlay to a livestream. We use Amity Social plus Amity Video because when you create a livestream post, our UIKit creates a livestream with Amity Video and attaches it to the post.

Before we begin, I would like to point out that the UIKit creates each livestream as a post object. This means it includes a title and the ability to comment and reply. So all chat messages we create will be stored as a comment on the post.

Ready? Then let’s get started!

Prerequisites

The first thing you need to do is clone Amity UIKit Open Source from this Repo link.

Step 1: Create Livestream Post

Run the UIKit on the Android Studio by following the steps mentioned in the documentation. Once you run the UIKit open source, you should be able to create your livestream post.

Step 2: Customize the Livestream Layout

Let’s start customizing the livestream layout by adding the RecyclerView, EditText and Send Button to the amity_fragment_live_stream_post_creator layout. After the customization it should look like this:

Customizing the livestream layout

Then create a new layout for the chat entry, which should look like this:

Creating a new layout for the chat entry

Now we can edit the Kotlin files by creating a new class AmityLiveStreamChatAdapter. This class will prepare our chat elements for the RecyclerView.

The AmityLiveStreamChatAdapter will also create a new class LiveStreamChatDiffUtil for mapping our element to RecyclerView.

Step 3: Enable Chat on Chat Overlay

Now we can edit the default Amity UIKit code to enable users to chat on the chat overlay. To do this, open the AmityLiveStreamPostCreatorFragment class and add the following code:

And the last edit is on the AmityLiveStreamPostCreatorViewModel class.

Chat overlay on a live video stream post

Viola! you have now successfully created a chat overlay on a livestream post with the power of Amity UIKit Open Source.

Need more help? 

Visit the Amity community:

Community