📘

This guide assumes that you want to use Nabla's built-in UI components to build your messaging experience. If you're interesting in getting only the data and build your own UI, follow Core SDK guide.

Conversations list

Once the user is authenticated in your app, you can access their conversations and display them.

To display the list of conversations your user is a part of, the Nabla SDK provides a View called ConversationListView.

ConversationListView encompasses a scrollable list of all conversations, along with UI for loading and error states. The scrolling in the list is wired with a paginated loading of conversations.

Simply include it in your layout:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Rest of your layout -->

    <com.nabla.sdk.messaging.ui.scene.conversations.ConversationListView
        android:id="@+id/conversationListView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

🚧

Treat ConversationListView as you would with a RecyclerView: don’t give it a height of wrap_content as content is scrollable.

Next, open up your Activity or Fragment containing the view to wire the ConversationListViewModel to the view:

import androidx.fragment.app.viewModels // available in androidx.activity:activity-ktx

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Step 1 - Inflate your layout
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // Step 2 - Create the ViewModel
        val viewModel: ConversationListViewModel by viewModels {
            ConversationListViewModelFactory(owner = this)
        }

        // Step 3 - Connect the View to the ViewModel
        binding.conversationListView.bindViewModel(
            viewModel,
            onConversationClicked = { id: ConversationId ->
                // TODO handle click on a conversation, see next part of the doc
            },
        )
    }
}

Build and run your application, you should see the list of conversations.

Conversation screen

Now the next step is to wire a click on a conversation in the list to launching the conversation screen. This screen is the ConversationFragment.

The ConversationFragment contains:

• The toolbar with a back button and the conversation’s title and subtitle.
• The timeline of conversation’s content, i.e. messages, with a pagination mechanism.
• The composer where to type a new message or send media attachments.

To display it, complete the code added before by adding the missing part that creates the Fragment:

binding.conversationListView.bindViewModel(
    viewModel,
    onConversationClicked = { id: ConversationId ->
        val fragment = ConversationFragment.newInstance(conversationId)
        // Display that fragment in an Activity or by pushing it to your navigation stack
    },
)

Create a new conversation

If you want your user to be able to start a new conversation, you can allow to create it with a button in your app directly:

binding.newConversationButton.setOnClickListener {

    coroutineScope.launch {
        NablaMessagingClient.getInstance().createConversation()
            .onFailure { error -> /* TODO: Handle error */ }
            .onSuccess { conversation ->
                // Conversation is created, watchConversations will be called with that new conversation
            }
    }

}