Jetpack Compose vs. XML-based UI Components for Stream Chat

Stream's new Jetpack Compose library vs. the XML-based UI components library

Stream now offers two separate Android UI implementations that you can use to integrate Stream’s Chat API with your app:

In almost all cases, you should use the library that’s native to the rest of your app’s UI. So, if you’re using Jetpack Compose, you should integrate the Compose UI Components. If you’re building XML layouts, integrate the Android UI Components library instead.

Keep reading for the more nuanced details 😉

Similarities Between Stream’s Android and Compose UI Kits

Both UI implementations have a few things in common:

  • They’re built on top of the same low-level client implementation.
  • They build on the offline support library that caches data and pending operations, and enables optimistic UI updates by observing its state.
  • The client gives you easy typed access to operations in Stream Chat and subscriptions to real-time chat events.
    They come with pre-built components so you can easily connect them to the Stream Chat API and populate them with data.
  • They’re open source (you can find them in the Stream Chat Android GitHub repository).

Bonus: if you're working at a small startup or you're an individual developer, you may qualify for a Maker Account to use Stream Chat for free indefinitely.

When to Use Stream’s Compose UI Components Library

If you’re interested in using Stream’s new Compose UI Components library, there’s a few things to consider:

Stream’s recently announced Compose Chat Messaging SDK is the newest client implementation for Stream Chat. The SDK is currently in a beta version, as Jetpack Compose itself only became stable a couple weeks ago.

This means that Stream is actively taking feedback from the community, iterating on its Compose APIs, and polishing the new components to bring you the best experience possible.

Another consideration is features. Stream Chat is packed with messaging features such as attachments, editing, reactions, typing indicators, threads, replies, notifications, mentions, commands... The list goes on and on.

All core messaging features are available in the Compose UI Components, but some of the less important features are still a work in progress. Stream is working hard on getting the Compose implementation to feature parity, but it may take some time until all the details are covered.

When to use:

  • If you're already using Jetpack Compose for your app’s UI. Stream’s Compose components will fit right in!
  • If you're looking for UI customization and flexibility beyond Android’s View system. Jetpack Compose enables Stream to offer even better theming and customization for its Compose UI Components.
  • If you're looking to migrate your app (or parts of it) to Jetpack Compose in the future. You might want to plan ahead and use Stream’s Compose UI Components for your chat features already. You can do this by adding a ComposeView to your XML-based layout and then populating it with Stream’s Compose UI Components. See the ComposeView documentation section of the interop documentation for more details.

To get started with the Compose UI Components, check out the Compose UI Components Sample App and the Compose Chat Messaging Tutorial.

Again, Stream is actively looking for feedback on this new UI implementation. Reach out on GitHub or on Twitter @getstream_io to help us get things just right!

When to Use Stream’s Android UI Components Library

The UI Components library contains pre-built Views to easily load and display data from the Stream Chat API.

You can add these Views to your XML layouts, look them up, and update their state just like you would with the Android framework's built-in Views. These components offer theming by way of View attributes, themes, and style transformations, as well as various configuration options to customize their behavior.

Data access through the Stream Chat API and action handling is made easy by ViewModels that the library also provides for you.

These components are mature, stable, used heavily in production, and support all available features of Stream Chat. Stream continuously improves these components by shipping new features, customization options, and performance improvements for them.

When to use:

  • If you're developing your application using XML layouts and Android Views, and not considering Jetpack Compose yet. Stream’s UI Components will feel native in this environment.
  • If you need the advanced features of the SDK that aren't implemented for Compose yet, you might want to use these UI Components. You can do this by embedding an AndroidView in your Compose layout. Learn more about this in the interop documentation.

To get started with the UI Components library, check out the UI Components Sample App and the Android In-App Messaging Tutorial.

Wrapping Up

In general, you should go with the library that fits the existing UI development approach in the rest of your application. However, in some special cases, you might find it beneficial to use the other SDK via Jetpack Compose's interop features.

Finally, if you're starting a brand new app instead of integrating into an existing one, consider giving both Jetpack Compose and Stream’s Compose UI Components a try!