Exploring Firebase Firestore in Android with Jetpack Compose UI

4 min readAug 26, 2023

In the modern landscape of Android app development, creating efficient and dynamic databases is essential to provide users with seamless experiences. Firebase Firestore, a cloud-hosted NoSQL database, has gained immense popularity due to its real-time capabilities, scalability, and ease of integration. When combined with Jetpack Compose UI — a modern Android UI toolkit — it opens up new possibilities for building responsive and visually appealing database-driven applications. In this article, we will delve into how to implement full CRUD (Create, Read, Update, Delete) operations using Firebase Firestore in an Android app with Kotlin and Jetpack Compose UI.

Firebase Firestore?

Firebase Firestore is a cloud-based NoSQL database that enables real-time synchronization of data across multiple devices and platforms. It organizes data in collections and documents, making it easy to manage and retrieve information. Firestore’s real-time capabilities allow applications to instantly reflect changes made to the database, making it ideal for collaborative and data-intensive applications.

Setting Up Firebase Firestore

Before integrating Firebase Firestore into your Android app, you need to set up a Firebase project and add the necessary dependencies to your app’s build.gradle file. Here’s a step-by-step guide:

Create a Firebase Project:

Go to the Firebase Console (console.firebase.google.com).
Click “Add Project” and follow the setup instructions.
Once your project is created, click “Continue” to proceed to the project dashboard.

2. Add Firebase to your Android App:

Click the “Android” icon to add your app to the project.
Follow the instructions to provide your app’s package name and other details.
Download the google-services.json file and place it in the app module's root directory.

3. Open Firebase Assistant:

In Android Studio, go to “View” > “Tool Windows” > “Firebase” to open the Firebase Assistant tool window.

4. Connect Project to Firebase:

If you’ve already connected your project to Firebase, you can skip this step. Otherwise, click on the “Connect to Firebase” button in the Firebase Assistant window and follow the prompts to connect your project.

5. Add Firestore Dependencies:

In the Firebase Assistant window, navigate to “Develop” > “Firestore” and click on “Learn more.”
Click on the “Add Firestore to your app” button.
This will open a dialog showing the necessary Gradle dependencies to add to your project.

// Firebase Firestore
implementation 'com.google.firebase:firebase-firestore-ktx:24.4.0'

// Jetpack Compose
implementation 'androidx.compose.ui:ui:1.5.0'
implementation 'androidx.compose.material:material:1.5.0'
implementation 'androidx.compose.ui:ui-tooling:1.5.0'

// Kotlin Coroutines
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.4'

6. Sync Gradle Files:

After adding the dependency, click on the “Sync Now” button that appears in the Android Studio toolbar.

7. Initialize Firestore:

In your app’s Application class or any suitable entry point, initialize Firestore using the FirebaseFirestore instance:

FirebaseApp.initializeApp(this)
val firestore = FirebaseFirestore.getInstance()

Creating a Firestore Database with Jetpack Compose UI

Now that you have Firebase Firestore set up, let’s integrate it with Jetpack Compose UI to create a basic database-driven UI.

Implementing Full CRUD Operations

Define Data Model:

Create a data class to represent the data you want to store in the Firestore database.

data class Note(
    val id: String = "",
    val title: String = "",
    val content: String = ""
)

2. Create Operation

To add a new note to Firestore:

fun addNoteToFirestore(note: Note) {
    val notesCollection = firestore.collection("notes")
    notesCollection.add(note)
        .addOnSuccessListener {
            // Successfully added
        }
        .addOnFailureListener { exception ->
            // Handle failure
        }
}

3. Read Operation

To retrieve and display a list of notes from Firestore:

Use Firestore’s collection() and get() methods to fetch data from the database.
Convert the retrieved data to your data model.

@Composable
fun FetchNotesFromFirestore() {
    val notes = remember { mutableStateListOf<Note>() }
    val notesCollection = firestore.collection("notes")
    
    LaunchedEffect(Unit) {
        notesCollection.get()
            .addOnSuccessListener { result ->
                for (document in result) {
                    val note = document.toObject(Note::class.java)
                    notes.add(note)
                }
            }
            .addOnFailureListener { exception ->
                // Handle error
            }
    }

    NoteList(notes = notes)
}

@Composable
fun NoteList(notes: List<Note>) {
    LazyColumn {
        items(notes) { note ->
            Text(text = note.title)
            Text(text = note.content)
        }
    }
}

4. Update Operation

To update an existing note:

fun updateNoteInFirestore(noteId: String, newNote: Note) {
    val noteRef = firestore.collection("notes").document(noteId)
    noteRef.set(newNote)
        .addOnSuccessListener {
            // Successfully updated
        }
        .addOnFailureListener { exception ->
            // Handle error
        }
}

This function takes the noteId to locate the document and updates it with the new Note object.

5. Delete Operation

To delete a note from Firestore:

fun deleteNoteFromFirestore(noteId: String) {
    val noteRef = firestore.collection("notes").document(noteId)
    noteRef.delete()
        .addOnSuccessListener {
            // Successfully deleted
        }
        .addOnFailureListener { exception ->
            // Handle error
        }
}

Combine Firestore and Jetpack Compose:

Integrate the Firestore data retrieval with the Composable function

@Composable
fun NoteApp() {
    var title by remember { mutableStateOf("") }
    var content by remember { mutableStateOf("") }
    
    Column {
        TextField(
            value = title,
            onValueChange = { title = it },
            label = { Text("Title") }
        )
        TextField(
            value = content,
            onValueChange = { content = it },
            label = { Text("Content") }
        )
        Button(onClick = {
            val note = Note(
                title = title,
                content = content
            )
            addNoteToFirestore(note)
        }) {
            Text("Add Note")
        }
        FetchNotesFromFirestore() // Displays the list of notes
    }
}

Conclusion

Combining Firebase Firestore and Jetpack Compose UI offers a powerful solution for creating dynamic and engaging Android applications. By seamlessly integrating Firebase’s real-time database capabilities with Jetpack Compose’s declarative UI approach, developers can build responsive and data-driven apps that provide exceptional user experiences. Whether you’re building collaborative note-taking apps, messaging platforms, or any other real-time application, the combination of Firebase Firestore and Jetpack Compose UI opens up a world of possibilities for your Android development journey.