Chat Application in Android Jetpack Compose

Chat Application are common application across Android world leading tech companies are directly or indirectly involved in such kind of Application. In this article, we will Create a Chat Application Using Android Jetpack Compose and integrate it with Firebase to enable real-time Message exchange.

Prerequisites

Before proceeding with this tutorial, make sure you have:

• Basic knowledge of Kotlin and Jetpack Compose.
• Android Studio (Arctic Fox or later) Installed.
• Firebase project setup with Firestore or Realtime Database / Email and password based Authentication.

Project Setup

Step 1: Create a New Android Project

1. Open Android Studio.
2. Click on New Project > Select Empty Compose Activity.
3. Set the Application Name (e.g., FirebaseChatApp).
4. Select Kotlin as the programming language.
5. Click Finish to create the project.

Step 2: Add Firebase Dependencies

To connect your application with Firebase, you need to add Firebase SDK dependencies.

Open your app-level build.gradle and add the following dependencies:

Step 3: Configure Firebase

1. Go to the Firebase Console.
2. Create a new Firebase project.
3. Add an Android app to your project, and follow the steps to register the app.
4. Download the google-services.json file and place it in your Android project’s app/ directory.
5. In your build.gradle (project-level), add the following:

// Top-level build file where you can add configuration
// options common to all sub-projects/modules.
plugins {
 alias(libs.plugins.android.application) apply false
 alias(libs.plugins.jetbrains.kotlin.android) apply false
 id("com.google.gms.google-services") version "4.4.2" apply false
}

In your app-level build.gradle, add the following at the bottom:

id("com.google.gms.google-services")

Step 4.1: Firebase Firestore Setup

In Firebase, set up Firestore as your database:

1. Go to Cloud Firestore in the Firebase console.
2. Click Create database.
3. Select Start in test mode to allow read and write access.

Now, you're ready to use Firebase Firestore in your app.

Step 4.2: Firebase Authentication Setup

In Firebase, set up Email and password based authentication:

• Go to Authentication in the Firebase console.
• Click Email and Password based authentication.

Now, you're ready to use Firebase Authentication in your app.

Directory Structure of the Chat Application

Implementing the Chat Application

Step 5: Modify Code to Use Firebase

Now, we will update the chat app to store and retrieve messages from Firestore in real time and add Email and password based authentication.

Here’s the updated code for SignupActivity.kt:

LoginActivity File:

Login Page is created using LoginActivity.kt file. Here’s the updated code for LoginActivity.kt:

MainActivity File:

MainActivity is the file which acts the main page where everyone can send their messages. Here’s the updated code for MainActivity.kt:

Explanation of the above Application:

1. Firestore: We connect to Firestore using FirebaseFirestore.getInstance() and use the collection named "messages" with senderId and timestamp.
2. addSnapshotListener: This listens for real-time updates from Firestore. Whenever new messages are added, the UI updates automatically.
3. messageText: When the user types a message and presses send, the message gets stored in Firestore using the add method.
4. Authentication: Helps in recognizing the messages of each user.

Running the Application

1. Connect an Android device or emulator.
2. Click Run in Android Studio.
3. Type a message, and it will be stored in Firebase Firestore.
4. All users will see the new messages in real-time.

Data Flow Diagram (DFD)

Here's a simple Data Flow Diagram (DFD) for the chat application:

Level 0 DFD (Context Diagram)

Level 1 DFD (Detailed Diagram)

Output Video

Click Here to Check the whole Application Code

Conclusion

In this tutorial, we built a chat application using Jetpack Compose and Firebase Firestore. With Firebase’s real-time capabilities, messages are instantly synced across all devices, making the chat app dynamic and real-time. This basic application can be extended further by adding user authentication, timestamps, and read receipts.