In our previous article about Jetpack Compose, we shared our initial impressions and recommended some learning resources. This time, we’ll take Compose out for a spin by building a basic chat UI implementation with it!
Stream now provides a native Jetpack Compose Chat SDK instead of the approach you see in this article. Check out the Compose Chat Messaging Tutorial and give it a try today!
Of course, you might be wondering why we’re building a Compose Chat app when there’s an official Google sample, Jetchat, which is also a chat app using Compose. That sample is a basic UI demo with a small bit of hardcoded data. Here, we’re building a real, functional chat app instead that’s hooked up to a real-time backend service.
We already ship a UI Components library in our Chat SDK which contains ready-to-go, fully-featured Android Views to drop into your app, along with ViewModels that let you connect them to business logic in just a single line of code. You can check out how that works in our Android Chat Tutorial.
This time, we’re going to reuse the ViewModels (and a View) from that implementation, and build our Compose-based UI on top of that. This won’t be an ideal scenario, as those ViewModels are designed to work with the Views that they ship with.
Having dedicated support for Compose in the SDK would make this much nicer and simpler, and that’s something we’ll be working on in the future. However, as you’ll see, it’s already quite easy to integrate Stream Chat with Jetpack Compose, without any specific support for it!
The project we’re building in this article is available on GitHub, feel free to clone the project and play around with it on your own! We recommend getting your own Stream API key for this, which you can do by signing up for a free trial. Stream is free for hobby projects and small companies even beyond the trial — just apply for a free Maker account.
To use Jetpack Compose, we’ll create our project in the latest Canary version of Android Studio. This contains a project template for Compose apps.
After creating the project, our first step will be to add the Stream UI Components SDK as a dependency, as well as some Jetpack Compose dependencies we need. Some of our dependencies come from Jitpack, so make sure to add that repository in the settings.gradle file:
Continuing with our chat app, let’s create a new screen, where we’ll display the list of messages in a channel. For this, we’ll need to set up click listeners and navigation. We’ll use the Navigation Component for Jetpack Compose here.
Step one, we’ll make our ChannelListItem clickable, and add an onClick parameter that it will call when it was clicked:
For our final piece of Jetpack Compose chat implementation, we’ll add an input view on the message list screen so that we can send new messages.
First, we’ll modify MessageListScreen and place a new composable under MessageList :
This complete implementation, including UI, logic, and a connection to a real server is roughly 250 lines of code in total. Almost all of this is UI code with Jetpack Compose, the integration with Stream Chat’s ViewModels and Views is just a small fraction of it.
Follow us on Twitter @getstream_io, and the author @zsmb13 for more content like this. If you liked this tutorial, tweet at us and let us know!
As a reminder, you can check out the full project and play with it on GitHub. We recommend expanding this project to learn more about Compose — a good first goal could be to add a login screen, so that you can have different users on different devices.
To jump into that, sign up for a free trial of Stream Chat. If you’re doing this for a side project or you’re a small business, you can use our SDK for with a free Maker account, even beyond the trial period!
Here are some more useful links to continue exploring:
- The Stream Chat Android SDK on GitHub, including the UI Components Sample app that showcases many features, and includes a login implementation you can take ideas from
- Our regular, non-Compose Android Tutorial
- The Stream Chat Android documentation
- For more about Compose, some first impressions and recommended learning resources
Originally published on getstream.io/blog.