Kotlin Firestore example – CRUD Operations with FirebaseUI FirestoreRecyclerAdapter | Android

Cloud Firestore helps us store data in the cloud. It supports offline mode so our app will work fine (write, read, listen to, and query data) whether device has internet connection or not, it automatically fetches changes from our database to Firebase Server. We can structure data in our ways to improve querying and fetching capabilities. This tutorial show you an Android app that can do Firestore CRUD Operations with Android RecyclerView and FirebaseUI FirestoreRecyclerAdapter.

Related Post: Kotlin Firestore example – CRUD Operations with RecyclerView | Android

I. Technologies

– Android Studio 3
– Kotlin 1.2.0
– Firebase Firestore 11.8.0
– FirebaseUI Firestore 3.1.0

II. Overview

1. Goal

We will build an Android App that supports showing, inserting, editing, deleting Notes from/to Cloud Firestore Database with with Android RecyclerView and FirebaseUI FirestoreRecyclerAdapter:

cloud-firestore-crud-demo-show-notes

Firebase Console for Firestore will be like:

cloud-firestore-crud-demo-console-show-notes

2. Cloud Firestore
2.1 Add Firestore to Android App

Follow these steps to add Firestore to the Project.

2.2 Initialize & Reference

2.3 Add/Update/Get/Delete Data & Get Realtime Updates

Visit this part from previous Post for details.

3. FirebaseUI Firestore

To use the FirebaseUI Firestore to display list of data, we need:
– Java class for data object (Model)
– Java class for holding UI elements that match with Model’s fields (ViewHolder and layout)
– Custom RecyclerView adapter to map from a collection from Firestore to Android (FirestoreRecyclerAdapter)
RecyclerView object to set the adapter to provide child views on demand.

cloud-firestore-ui-crud-demo-show-notes

3.1 Model and ViewHolder

Model class is a class that represents the data from Firestore:

ViewHolder layout (R.layout.item_note) with UI items that correspond to Model fields:

ViewHolder class contains Android UI fields that point to layout items:

3.2 FirestoreRecyclerAdapter subclass

We need a subclass of the FirestoreRecyclerAdapter and implement its onBindViewHolder() & onCreateViewHolder() method:

Now look at these lines of code:

– We tell FirestoreRecyclerAdapter object to use Note.class when reading from the Firestore database.
– Each Note will be displayed in a R.layout.item_note (that has 4 elements: tvTitle, tvContent, ivEdit, ivDelete).
– We indicate NoteViewHolder class for ViewHolder

FirebaseRecyclerAdapter will call onBindViewHolder() method for each Model it finds in database. It passes us the model and a ViewHolder.
So what we should do is map the fields from model to the correct View items:

3.3 RecyclerView

Now we set the adapter for RecyclerView object to provide child views on demand:

Remember to call adapter startListening() & stopListening() method to start/stop listening for changes in the Firestore database:

3.4 Dependency

build.gradle file (App-level)

4. Project Structure

kotlin-firestore-ui-crud-structure

II. Practice

1. Set up Project

– Create New Project with package name com.javasampleapproach.kotlin.firebase.cloudfirestore.
– Add images (found in source code) to drawable.
– Follow these steps to add Firestore to the Project.

2. Layout
2.1 Main Activity

Open res/layout/activity_main.xml file:

2.2 Item Layout

Add item_note.xml layout file to res/layout:

2.3 Activity Layout for Adding/Updating Note

Add activity_note.xml layout file to res/layout:

2.4 Menu

Under res folder, create menu folder and add menu_main.xml:

3. Data Model

Under model package:

4. ViewHolder

Under viewholder package, create RecyclerView.ViewHolder subclass:

5. Activity
5.1 Main Activity

5.2 Note Activity

6. Android Manifest

Define NoteActivity class as an Android Activity:

IV. Source Code

KotlinFireStore-FirebaseUI-FirestoreRecyclerAdapter

By grokonez | January 11, 2018.

Last updated on July 13, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*