Building the main screen

Now that we have the main structure of our app ready, it is time to start building the main screen.

Let’s analyze what components our main screen will have:

Figure 1.9: The ConversationsList screen

As you can see, we are going to include the following:

• A top bar
• A tab bar to navigate to the main sections (note that this book will only cover the development of the chat section; we will not cover the status and calls sections)
• A list containing the current conversations (which we will complete later in this chapter)
• A floating button to create a new chat

Let’s start with the main screen.

Adding a scaffold to the main screen

Previously, we created an empty version of the first screen (ConversationsListScreen), as follows:

package com.packt.feature.conversations.ui
import androidx.compose.runtime.Composable
@Composable
fun ConversationsListScreen(
    onNewConversationClick...