Getting Started

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

tip

Already using Jetpack Compose? Check out our Compose UI Components.

This library builds on top of the offline library, and provides ViewModels for most Views to easily populate them with data and handle input events.

The sample app showcases the UI components in action.

See the individual pages of the components to learn more about them.

Channel components:

• Channel List Screen
• Channel List
• Channel List Header

Message components:

• Message List Screen
• Message List
• Message List Header
• Message Composer

Utility components:

• Mention List
• Pinned Message List
• Search Views
• Attachment Gallery

Checklist

For a successful integration of our UI Components, follow these steps:

1. Dependency. Add the dependency to your app, as described on the Dependencies page.
2. Set up the ChatClient. Learn how to initialize the ChatClient here.
3. Handle user connection. Read how to connect a user here and info about User Tokens here.
4. State and Offline. Using the StatePlugin is mandatory if you want to use our UI Components. Read the State Overview page for more information. Also, it's a good idea to add offline support for better UX.
5. Theme. Since this library uses Material elements, make sure that you use a Material theme in your application before adding the components. This means that your app's theme should extend a theme from Theme.MaterialComponents, and not Theme.AppCompat. Find a correct example below. If you want to keep using an AppCompat theme for styling, you can inherit from a Bridge Theme to support using Material based components.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

note

Check out our sample app for a quick start in using our UI Components.

ViewModels

Most UI components come with their own ViewModels. These are used to easily connect them to the client to fetch data and perform actions.

These are Jetpack ViewModels, so they allow the components to retain data across configuration changes. It's your responsibility to create these in the correct scope, usually in a Fragment or Activity.

For example, if you've added a MessageListView to your layout, you can create a corresponding ViewModel like this:

Kotlin

// 1
val factory = MessageListViewModelFactory(cid = "messaging:123")
// 2
val viewModel: MessageListViewModel by viewModels { factory }
// 3
viewModel.bindView(messageListView, viewLifecycleOwner)

Java

// 1
ViewModelProvider.Factory factory = new MessageListViewModelFactory
        .Builder()
        .cid("messaging:123")
        .build();
ViewModelProvider provider = new ViewModelProvider(this, factory);
// 2
MessageListViewModel viewModel = provider.get(MessageListViewModel.class);
// 3
MessageListViewModelBinding.bind(viewModel, messageListView, getViewLifecycleOwner());

1. Create the ViewModel factory, providing any necessary parameters.
2. Fetch a ViewModel with Android ViewModel APIs, passing in the factory to be used.
3. Call the bindView method of the SDK to connect the View and ViewModel, passing in the appropriate LifecycleOwner.

bindView performs two-way binding: it sets up observers that push data from the ViewModel to the View, and sets up listeners that forward input events from the View to the ViewModel.

note

If you're setting your own listeners on the Views, make sure to do it after calling bindView.

You can learn more about setting up each UI component on their individual documentation pages.

Sample App

The UI Components sample app is an open source, fully functional messaging application. It features threads, reactions, typing indicators, optimistic UI updates and offline storage. All built on top of our UI components.

Customization

The UI components offer customization options via XML attributes as well as instance methods. You can check the individual pages of the components for more details about this. Components can also be customized globally via themes and style transformations. The Theming page describes all the available styling options for the SDK in detail.

You can also use the ChatUI object to customize the behavior of the UI Components. For example, it allows you to override fonts, add your own URL signing logic, or add custom avatar loading logic.