Hello World, today we are going to see how we can make a todo app using a
firebase cloud firestore database. The Firestore database is a very flexible and scalable NoSQL database to make our development very
fast. Firestore is very easy to use in android. FireStore can work smoothly even if your device is offline it can fetch data from the
cache in the device so that your app can work offline and update the data
when it connects to the internet again. This functionally makes your app for
interactive for the users. Firestore database has one more feature is
to watch realtime changes in the database and you can show updates in the
Firestore database can execute queries so that you can filter your data
as per your requirement, this feature makes the firestore database more
likely to choose for your project.
Firestore database stores the data in the documents and these documents
are saved in the collection. Think it like the collection is a file folder that has multiple documents
and these documents have some data written on it.
Let’s check our app which will be going to build using Firebase Cloud
Let’s make our app.
Make a new project in Firebase Console
head to https://console.firebase.google.com/ and make a new project by clicking on the new project. Follow all the
After creating the project lets add our android project. Click on the
and then fill your package name then app name.
Download the google-services.json file and paste this file in the app folder
of your app.
After that follow the instructions of the firebase. Add required
dependencies and hit the sync button.
Your dependencies will look like below.
Now let’s move to make layout our app.
Make Layout of the Application
To make the layout we will add this code in our activity_main.xml file.
in the project.
Make a new layout file and add this code to it.
In the above code, we have a checkbox and an imageview to act as a delete
button and set their respective ids.
If you want to add a delete icon in your project you can easily add this by
right-clicking on drawable folded then select new and then click on the
vector assets and in the next window choose your icon and icon name then
save the icon and now you can use this icon in imageview.
After all this, we will add the functionality of our app.
Before making the functionality we need to create a database in the firebase
console. Go to your firebase project and click on develop and choose the
database and then click on create database.
Note that there will be 2 options. One for Cloud FireStore and in the below
on that second option is for the realtime database. But we need to create a
database for Cloud FireStore.
the firebase and in the recyclerview.
Make Model Class for Firebase and RecyclerView
We need to make a model class that will hold the data. The model class will
help to set the data and get the data using getter and setter functions. We
have to specify the data type and number of field that we want to use. See
the below code to make a model for the to-do app.
In the above model class if you noticed we are using an annotation
@DocumentId above the taskId. This annotation is telling that taskId field
will be using as document id of the firebase document and when we add data
to the firestore database this property will ignore to create in the
firestore database. If you are not understanding what I am saying then keep
reading you will understand.
Then we make a task string field for holding the task value as a string and
the lat field is for either task is done or not. After that, we made the
getters and setters method to set the values and get the values.
After making the model we will move to MainActivity.java and make adding
data to database functionality.
Add data to Firebase Firestore Using Model Class
To add the task data in the firestore we need to get task value from edit
text and on the click of the button, we will check the value if it is not
empty and then we will use firebase functions to add the data, let’s see
In the above code, first, we create a database instance of firestore, and
then we are getting our EditText and Button from the activity xml layout in
the onCreate method.
Then we implement click listener on the button and this will add data in the
firestore database. In the click method first, we are getting a string from
the edit text and then check if the string is not empty. If the string is
empty then we show a toast and then return from the method.
Then we create our task model object and set values using setter methods. We
set taskDone to false and set task string. Notice that we are not setting
the taskId as it will handle by the Firebase library.
Now, this the point where we will add the data to the database.
First, we get the reference of the collection by using the db.collection
method and then call the add method and pass our model which we just created
above and then we add the success listener.
In the success listener, we remove the string from the EditText.
Now if you run your app then enter a task in the EditText and click on the
add button. Check your database in the Firebase console there will be the
newly created document in your collection.
Note that collection is created automatically if it does not exist.
This is how we add the data in the Firestore Database.
Fetch Data from FireStore Database & show in RecyclerView
for the recyclerview as we do while implement recyclerview. So let’s make a
new java file and extend it to a recyclerview adapter.
Then we need to pass our viewholder class to do that we create an inner
class in our adapter class and pass this class as generic in the adapter and
implement the all required methods.
After creating all the classes we need to make a constructor with
parameters. These parameters are Context, List of a task model, and db
See the below code for better understanding.
Return the list size in the getItemCount method. Now come to the viewholder
class and write the below code.
If you remember we have created task_item.xml with a checkbox and an
imageview for the delete button. We will use these elements in the
viewholder and create their references to work with them.
And in the onBindViewHolder method in the adapter. We are setting the
checkbox text and its check state.
Now the main thing is to update the existing task value in the database. We
want to update the task done value in the database when user check or
uncheck the checkbox. We have to add a listener to this in the
Inflate our task_item.xml view in onCreateViewHolder.
Update Value in FiresStore Database
First, we get the current item position and then the item’s task id to
update the document in the database.
Again we get the reference to the collection then get the document reference
by passing the task id in the document method this id is the document id. If
you open you collection in the firebase console then the random string are
shown are the document ids.
We are using these ids as taskId.
After getting the reference to the document then we are calling the update
function and in the first parameter, we pass the field name which we are
going to update and the value to be set in the database.
If you run your app and click on the checkbox then the value in the
firestore database will update.
Now if the user wants to delete the task so let’s make the delete
Delete Document from FireStore Database
To delete the document from the database. As we did above to update the
value we call update method but for deleting the document, we will call the
delete method on document reference and add a success listener to remove the
task model from the list of task models and update the recyclerview.
After removing the task we need to notify the adapter to update the
recyclerview. So we called to notifyDataSetChanged method.
now at this point, we have completed the adapter code now attach the adapter
to the recyclerview. Go to your activity java file and make an adapter
construct with required parameters and set layout manager to the
recyclerview and set the adapter to the recyclerview.
Then we fetch all the tasks and convert them to the task model add them to
the list of the task model and notify the adapter for change in the list.
To convert the document to our model object we will call the
document.toObject method and pass the class. This will return object of task
and add this object to the list.
After the loop ends, we notify the adapter to change the data.
If you run your app at this point and add a new task then your recyclerview
will not show the new task as haven’t written that code in on add button
click we only added for the database. To add the new task in the
recyclerview we need to write the below code in the onClick method.
In the success listener of the firestore, we received the newly created
document id which we can use to add a new task in recyclerview. We use the
above task model object and add its task id and then pass to the list of
task models and finally notify the adapter to update the recyclerview.
Here is the full code of MainActivity.java
Now our app is ready to add a task, delete and update them.
If you learned something new then do share it with your friends and
batchmates and don’t forget to subscribe to our newsletter if you haven’t
Thanks for reading have a nice day.