Creating custom message list items is a common requirement for many developers using Stream’s new Compose Chat SDK. In this post, you’ll learn just how easy it is to build your own custom message list items and implement them in your app.
•about 2 months ago
The Stream Chat SDK for Jetpack Compose makes extensive use of slot APIs, which allow you to provide pieces of Composable layout that you can then use within one of the chat components provided by the SDK.
For this post, you'll use the
MessageList component and its
itemContentparameter to completely change how message items are rendered within a message list while keeping all the powerful built-in behavior, like paging and scrolling.
By the end, you'll build the following three custom looks for the items:
- Colorful message bubbles
- Livestream messages
- A team messaging app
The itemContent parameter
A prime example of Stream's slot APIs is the
MessageList component, which displays a list of messages:
Within this component, the
itemContent composable parameter is what renders each message in the list:
This is what you'll customize in various ways, by providing our own
itemContent components. You can try all of these implementations in the GitHub repository for this tutorial.
Note: We'll only cover the visual customization of the items here and skip attaching things like click listeners within the custom items, which is something you'd want to add in your real code.
Building Colorful Message Bubbles
Starting off with a look that's similar to the default, we'll build this design:
In this example, we're removing elements like the footer (which provides information like the user's name and timestamps) and reusing the Chat SDK's avatar and bubble components.
And of course, we're assigning a random color to each user's messages.
Let's see the code, with the important bits explained in the comments:
As you can see, lots of this UI is built from basic Compose constructs, like Rows, Columns, Spacers, and Text.
However, smaller components from the SDK are also reused so that you don't have to construct everything from scratch. Components like
MessageAttachmentsContent really come in handy when you build custom layouts like these.
Building Livestream Messages
Our next design will be very basic, something you might add to a live-streaming screen within an application:
This example won't support any attachments or fancy features. Instead, we will focus on displaying the user's messages in a compact UI.
This approach is ideal for handling real-time events where messages accumulate quickly.
Now, to the code:
There's not much to this one, as the design is super simple:
UserAvatar to build a string from the username and message.
This way, they can be styled and displayed within a single
Text component, allowing them to flow nicely between lines.
Building Team Messaging Items
For the final example, let's look at something you might use for a team messaging app.
As you can see, all the messages are left-aligned, and we prominently display the avatar and name of the user who sent the message.
This is useful in a corporate environment, where users won't recognize everyone just by their avatar (like they would in a small friend group).
The code for this custom layout is the following:
Again, this layout builds mostly on basic Compose constructs, and most of the logic deals with setting correct paddings between the elements.
One highlight is the
Timestamp component from the SDK, which you can use to quickly format a
Date object into a date or time format.
As a quick reminder, you can check out all of the code and see these layouts in action by checking out the GitHub repository for this tutorial.
If you want to try the SDK and see how easy it is to get started, take a look at the Compose In-App Messaging Tutorial. You can also take a look at the Compose UI Components documentation which describes all the available components, features, and customization options.
You'll also find all the Compose SDK source code in the Stream Chat Android GitHub repository. We'd love to hear your feedback there, either in the form of issues or discussions.