Android Studio is the official standard integrated development environment (IDE) for developing Android apps. Although you can use other IDEs, editors, and Android tools if you prefer, all the examples in this book will be based on this IDE.

For that reason, we recommend that you set up your computer with the latest stable version of Android Studio installed. If you haven’t already, you can download it here: https://developer.android.com/studio. By following the installation steps, you will be able to install the IDE and set up at least one emulator with one Android SDK installed.

Once installed, we can start creating the project. Android Studio will offer us a set of templates to start with. We will choose the Empty Activity option, as shown in the following screenshot:

Figure 1.1: Android Studio new project template selection with the Empty Activity option selected

You will then be asked to select a project and package...

Before designing the app structure, we must have a basic idea of the features it should include. In our case, we want to have the following:

• A main screen to create new or access already existing conversations
• A list containing all the conversations
• A screen for a single conversation

As this is going to be a production-ready app, we must design its code base while considering that it should be easy to scale and maintain. In that regard, we should use modularization.

Modularization

Modularization is the practice of dividing the code of an application into loosely coupled and self-contained parts, each of which can be compiled and tested in isolation. This technique allows developers to break down large and complex applications into more manageable parts that are easier to maintain.

By modularizing Android applications, modules can be built in parallel, which can significantly improve build time. Additionally,...

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

In this section, we are going to create all the pieces we need to show the conversations list. We will start with the UI data model, which will represent the information that the app is going to show in the list, the Conversation composable, which will draw every item of the list, and finally the list composable itself.

Modeling the conversation

First, we are going to model what is going to be the entity we will be using through our conversations list components: the Conversation model.

As part of the conversation model, we want to show the avatar of the other participant (we are just doing one-to-one conversations), their name, the first line of the last message, the time the message was received, and a number indicating how many unread messages there are.

Taking that information into account, we will start creating a data class to hold the data we’ll need:

data class Conversation(
    val id: String,
 ...

In this section, we are going to create the UI models that are needed to create the chat screen and the messages two users could have exchanged. Then, we will create the Message composable, and finally, the rest of the screen, including the list of messages.

Modeling the Chat and Message models

Taking into account the information we have to show on the chat screen, we are going to need two data models: one for the static data related to the conversation (for example, the name of the user we are talking to, their avatar, and so on) and one data model per message. This will be the model for the Chat model:

data class Chat(
    val id: String,
    val name: String,
    val avatar: String
)

In this case, we will need the ID of the chat, the name of the person we are talking to, and their avatar address.

Regarding the Message model, we will create the following classes:

data class Message...

In this first chapter, we started our first project, WhatsPackt, a messaging app.

We accomplished several initial tasks to build this app, such as organizing modules, preparing dependency injection and navigation, constructing the main screen, creating the conversations list, and building the messages list.

Throughout this process, we’ve learned about modularization and the various approaches to organizing it. We’ve also learned about popular libraries for managing dependency injection, how to initialize them, and how to set up Compose navigation. Additionally, we became familiar with using Jetpack Compose to create our user interface.

As we move forward, it’s time to give some love and life to our chats. In the next chapter, we will explore how to retrieve and send messages and integrate them into our recently created user interfaces.