In part two of this 3-part AvengersChat series, you’ll learn how to build a live-chat experience and customize global styles for your channel and message lists. You will also add light, dark, and color-coded theme support to your chat app.
•Published: Dec 10, 2021
Before you dive in, make sure you’ve read Building an Avengers Chat Application for Android (Part 1), where we cover foundational concepts like the app’s architecture, Gradle setup, integrating Stream, and more.
Once you’ve caught up, you can dive into part two, where you’ll learn to further customize your chat app and add more complex chat functionality.
You can also refer to the links below for additional help:
- The AvengersChat GitHub repository (anyone can contribute!)
- Stream’s Android Chat SDK for messaging with Kotlin
- Stream’s Android Chat messaging Tutorial
Before getting started, make sure you’ve imported the Stream Android UI component SDK into your project. If you’ve imported it already, you can skip this step.
Set Up Your Stream Account
Build a Live Streaming Screen
Let’s dive into building the live streaming screen in the example below:
The LiveFragmentStream screen consists of three primary components: YoutubePlayerView, MessageListView, and MessageInputView.
- YoutubePlayerView renders a specific video that is uploaded on Youtube.
- MessageListView renders a list of messages and displays new messages in real-time.
- MessageInputView handles the message input, as well as attachments and Giphy.
This tutorial will walk you through each component step by step.
Build a Youtube Video Player Section
First, you will build the Youtube Video Player:
Before you go further, import the android-youtube-player into your project. Add the below dependency for your app-level build.gradle file:
You can build the Youtube Video Player by using the android-youtube-player library in the below example:
You can initialize the
YoutubePlayerView with two instances of
If you’d like to customize the listener and options to your tastes, check out the android-youtube-player repository.
The AvengersChat example shows you how to reduce initialization codes for YouTubePlayerView on your Activity or Fragment by using DataBinding, as seen in the example below:
After creating the
BindingAdapter function, you can use it on your layout:
Build a Live Chat Section
Now, you will build a live chat section consisting of the MessageListView and MessageInputView components:
In Part 1 of this tutorial, you built a message list screen, which looks very similar to this section.
There is one difference from the example in Part 1, though: There‘s no MessageListHeaderView on the live streaming screen. In the below example, there is:
The business logic is also very similar to the example in Part 1. This example shows how to bind the layout with ViewModels on LiveStreamFragment.
Check out LiveStreamFragment in AvengersChat with the code below:
streamMessageListComponent extension initializes
StreamUIComponent, as well as receives a
cidProvider lambda function. The
cidProvider will be executed lazily for initializing
MessageListViewModelFactorty. And they will be bound with layouts by calling the
One of the biggest differences from the Part 1 tutorial is that you don’t need to call an initialization method like initIds(args.cid) for the StreamMessageListComponent. So, you can abstract those components with your own interface like a StreamUIComponent.
Customize Message Styles on The Live Streaming Screen
As you may have noticed already, the styles of the live streaming screen and channel message screen are a little bit different. Now, let’s jump into customizing the styles of message items on the live streaming screen.
MessageListView provides an API for creating custom ViewHolders. To use your own ViewHolder:
- Create your own custom XML layout.
- Implement a ViewHolder Factory that extends MessageListItemViewHolderFactory.
- Create a new instance of the factory and set it on MessageListView.
1. Create an XML Layout
First, you need to create your own custom XML layout like the below example:
The layout consists of an
AvatarView, and a few
TextViews to compose the message item. You will use this layout to implement a custom
2. Create a ViewHolder Factory
Next, you need to create a custom
ViewHolder Factory that extends
MessageListItemViewHolderFactory like in the example below:
LivestreamMessageItemVhFactory customizes a message list item for each item type (especially
PLANE_TEXT). If you’d like to customize other types, like deleted messages, date dividers, or attachments, then you can create your own ViewHolders for each type of
3. Create a new instance of the factory and set it on
Finally, you can just create an instance of the
LivestreamMessageItemVhFactory and set it on
MessageListView. That’s it!
Congratulations! 🎉 You've finished building your own live streaming screen. If you’d like to learn more about customizing messages, you can check out Custom Message Views as well.
Theming Stream UI Components
Now, take a look at how to theme Stream UI Components. You can customize themes in the following ways:
- Adding attributes to the UI Components in your XML layout.
- Applying global theming by using the TransformStyle object.
- Using Android themes to style all Views globally.
Note: Be careful when using multiple theming approaches. Themes are applied first, then XML attributes, then style transformations. Values applied later will override previously set values.
You can customize your UI components independently by setting attributes on them in your XML layouts. The example below shows you how to customize the
MessageListView in your XML layout:
In the above example, there are a few custom attributions like
streamUiMessageTextSizeUserName. By setting these custom attributes, you can customize each
You can configure styles programmatically by overriding the corresponding
StyleTransformer from the
Note: You have to set up any custom
StyleTransformerinstances before the
Viewinstances are initialized, otherwise they won't take effect.
In AvengersChat, StreamGlobalStyles updates the styles when the user chooses a hero. This allows the user to apply different color styles by a chosen hero like the example below:
This example will render the following result:
You can also use Android themes to set attributes for the UI Components globally. This article won’t cover using Android themes, but you can check out the official documentation for theming if you want to learn more.
This edition covered how to customize the Stream Chat SDK's UI Components. Stream SDK supports fully customizable options to build your customized application. Also, you can integrate them with modern Android architectures so anyone can build chat features easily.
Remember that AvengersChat is an open-source repository, so anyone can contribute to improving the code, design, architectures, or whatever. So, let’s build something awesome! 😎
Here are a few more links to help you with the tutorial:
- GitHub - The AvengersChat Open Source Repository
- GitHub - Official Stream’s Android Chat Open Source Repository
- Stream’s Android In-App Messaging Tutorial
- Stream’s Android Chat Client Docs
- Stream’s Android UI Components Docs
In the next part of the tutorial, you will learn how to customize UI components and build a live stream example. Specifically, you will cover:
- Customizing message reactions
- Implementing direct message dialog
- Implementing user profile dialog
If you’d like to stay up to date with Stream, follow us on Twitter @getstream_io for more great technical content. You can also reach the author @github_skydoves if you have any questions or feedback.