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 UI Kit, 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 SDK plus Amity Video SDK because when you create a livestream post, our UI Kit creates a livestream with Amity Video and attaches it to the post.
Before we begin, I would like to point out that the UI Kit 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 UI Kit Open Source from this Repo link.
Step 1: Create Livestream Post
Run the UI Kit 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:
Then create a new layout for the chat entry, which should look like this:
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.
Viola! you have now successfully created a chat overlay on a livestream post with the power of Amity UIKit Open Source.