📘
This guide assumes that you want to use Nabla's built-in UI components to build your messaging experience. If you're only interested in getting the data and building your own UI, check out the Core module.

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.activity.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.

Conversations list in the `InboxFragment`

While ConversationListView provides a higher flexibility and customization, if all you want is an already-wired standalone fragment containing conversations list, a toolbar and a Start a conversation button, then use InboxFragment.

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
            }
    }

}

Conversations list

Conversations list in the InboxFragment

Conversation screen

Create a new conversation

Conversations list in the `InboxFragment`