In a previous post, we discussed how to create an Android app with two of the most important building blocks of Android Architecture Components: LiveData and ViewModel. This is a follow up on that tutorial, once we have an app with clean architecture, we will be configuring Firebase Firestore for Android Architecture Components to update data in real-time and make the most out of LiveData and ViewModel in Android. Here is the previous part if you are curious:

Starting up

We will start this tutorial with the app we build for the previous tutorial, “My Shopping List”. You can get the source code here:

Open the app in Android Studio, and let the Gradle sync finish. Run the app and you should see, as the name says an app with a shopping list:

Creating a Project in Firebase Console

The first step is to create a Firebase Console Project. Go to the Firebase Console main page in https://console.firebase.google.com/. In this screen you will get either of two layouts:

1. If you have never used the Firebase Console before, you will be prompted with a welcome message and an invitation to “create a project”, like in image 2 below:

2. If you have other projects, you will see a list of them and a white card to “add project”, like in the image below.

Click in the button to create a project depending on the option you have and you will start the flow for creating a project. The first screen will prompt you for the name of the project, in this case, you will use the same name of your Android app, which is “MyShoppingList”.

Continue and the next step will ask you whether you want to enable Google Analytics, this is not necessary for Firestore, but you may want to enable it for other reasons.

Click “Create project” and you will get a loading screen (Image 6), it will take a small amount of time, so don’t worry.

Once the process is finalized, the loader will turn into 3 orange dots, with a confirmation text and a “Continue button will appear”.

Click on the “Continue” button and you will be taken to the main screen of the “MyShoppingList” project.

It is important to understand that this project will work for many platforms, not only Android. If you were going to integrate Firestore to an iOS app or a web project, you will use the same project and this will also enable you to share the database across platforms.

Adding Firebase to the Android App

From this part on, the configuration is specific to Android. In the home screen of your project click on the little white Android icon to start the integration flow.

As a first step Firebase will request your app’s data, add the following:

1. Package name: com.evanamargain.android.myshoppinglist. This has to be the same package name that you have in your app. If you are not sure and you are not using the demo project, go to app > manifests > AndroidManifest.xml, the package will be in the first few lines of the file.
2. Nickname: “My Shopping List”. This can be whatever nickname that will help you remind the app name. Maybe you will want to add the suffix “Android” if you want to distinguish it somehow from another app.
3. SHA-1 certificate: This can be empty as you won’t be using it for this tutorial.

After inputting the data you will get a JSON file, named “google-services.json”. The screen has instructions to integrate it to the app, but I will explain below in case it is not clear.

Go to Android Studio where you have the project open and switch the view in the left panel, most likely your project will be in “Android” mode and you will get a dropdown with the view options like in Image 12 below.

Once you are in the “Project” view, you will see the file tree displayed like the image below (Image 13). Download the file from the Firebase Console to any location of your computer, and then ‘drag and drop’ to MyShoppingList > app.

Then switch back to the Android view in the left panel. Most of the time you will be using Android Projects in this view as it is the easiest to navigate while coding.

Once you got to the Android view, open Gradle Scripts > “build.gradle (Project: MyShoppingList)”. Add this code:

classpath 'com.google.gms:google-services:4.3.3'

In the same folder, open “Build.gradle (Module: app)” and add the following code.

apply plugin: 'com.google.gms.google-services'

...

dependencies {
  ...
  // In case you activated Google Analytics
  // Add the Firebase SDK for Google Analytics
  implementation 'com.google.firebase:firebase-analytics:17.2.2'
  
  // Add Firestore dependency
  implementation 'com.google.firebase:firebase-firestore:21.4.1'
}

After adding these dependencies Android Studio will request a Gradle Sync (Image 15). Click on sync now and wait, build should be successful.

If you have any doubts whether the sync was successful, take a look at the bottom panel and it should look like in image 16 below.

Finish Firebase Console Configuration

Then go back to Firebase Console and click next to confirm you have added the JSON file and dependencies to the project. There will be a note at the bottom of the screen indicating Firebase is verifying the connectivity between your app and the console. Build and run the app, it should run and look the same as it did at the beginning of the tutorial. After doing this Firebase should confirm connectivity and give you a “Continue to console” button.

If the above step fails, go back to the instructions and ensure you did everything correctly. Otherwise in the main screen of the project you will see a purple icon with the Android logo in purple, which means your project is connected to the app.

Configuring FireStore in Firebase Console

Once you have a project in Firebase Console and have connected your app to the project, it’s time to configure your Firestore database in the console. Locate a big orange tile below the main project screen that looks like image 19 below.

You will access the Firestore page of the project and get a prompt to create a Database in a big banner (Image 20).

Click on the “Create database” button, and a modal screen will appear. It will first ask you about database security. For development and this tutorial, you will set it to test mode but take into account that for a production app it is important to enable “production mode” because you want your users’ data to be safe.

Click next and you will be asked for the location of the server. Usually, it is recommended to choose the location closest to you or your users, as this will reduce the loading times. I think the Firebase Console automatically suggests the one closest to you.

Once you click on done it will show you a “Provisioning Cloud Firestore” spinner (Image 23). I was once told in a Google Cloud Conference that this provisioning may take up to three minutes if the service is too saturated, but it usually takes less.

Configure the Database

Once the provisioning process is completed you will see your database like in the image below. The database is empty and waiting for you to start working on it.

Click on the “+ start collection” text to create your first collection. The database have a multicolumn structure base on collections > documents > fields. According to the demo app, we want our collection to be called “MyGroceries” as this will contain all our groceries.

Then for the document, you will also be prompted for a name, it can be “TodaysGroceries” or the date “March26-2020” in case you want to have several lists in your app.

Add the fields with sample data:

1. Item1 = string – banana
2. Item2 = string – peanut butter
3. Item3 = string – bread
4. …

Add as many as you want or just copy the sample data we have in the app.

Once you have added all the fields your database should look like Image 27 below:

That’s it! We now have Firebase Console and the Android app configured to use Firestore with a database in it. In the next part, we will be integrating this database to Android Architecture Components. If you want to see how the project should work at the end you can download the finished project here:

If you liked the content on this post, please subscribe at the bottom of the page. If you have any doubts don’t hesitate to leave a comment and I will reply as soon as possible. You can also donate a coffee to support me so I can keep on creating things like this!

See you next time!

Evana Margain Puig