FirebaseUI Android Example using Firebase Database – Getting Started With Firebase Android

Vamsi Tallapudi Android, Software 21 Comments

FirebaseUI android was introduced very recently by Google. According to Google, FirebaseUI is a library that allows developers to build native Mobile Apps quickly with Firebase by binding common UI views to Firebase references or queries. Currently FirebaseUI android supports ListViews, GridViews, and RecyclerViews.

In this example, we will Integrate Realtime Firebase Database to our Recyclerview using Firebase UI so that the data can be changed dynamically in real time and the Recyclerview gets updated automatically. The following video clearly demonstrates what we are going to achieve in this tutorial:

 

While its really exciting to see how the data changes dynamically, let us get started and implement it 🙂

 

 

 

FirebaseUI Android using Firebase Database:

The complete source code for this Tutorial can be cloned/downloaded from the github repo link below:

Click here to download

Note: For the above project sourcecode to work, you need to replace google-services.json file with your configured file. The steps for configuration are explained below:

To explain about FirebaseUI android, I am going to create an Interesting app called Movie Board in which I am going to save my Favourite movies by adding and rating them. So Let us get started.

1. Adding Firebase to Your Android App:

To get started, you need to create a project in Firebase Console. Go to the following link and create a New Firebase Project. Here I’ve named it as Firebase Database Example. Now if we click on the project we will be taken to the application Overview similar to the image below:firebaseui android project overview

Now click on Add Firebase to your Android app and it will display a pop up asking for package name and SHA1 key of your debug key certificate.firebaseui android integrating sha1 key

To get SHA1 key, you need to type the following command in your Command Prompt:

Now If you click on ADD APP, the browser automatically downloads google-services.json file which you need to save in your Project’s app module root directory as shown in image below:firebaseui android integrating json file image

 

 

Now add the following line to Project’s build.gradle file’s dependencies to include Google Services:

Now my Project’s build.gradle file look like:

Now modify your app’s build.gradle file so that it references the required library dependencies. Here is the file with libraries I’ve included in this project:

Now you’ve successfully added Firebase to your Android app.

2. Authenicating Firebase Database:

Next we need Authentication to our Firebase Database so that we can access the data. We will be discussing about Firebase Authentication in our Next Tutorial. For now, we will set up Authentication rules to Public where any user can read and write the Firebase data.

However note that you should configure more secure rules to Firebase Database to restrict your database from unauthorized access.

To change the database rules, click on your project in Firebase console and click on Database Pane on Left as shown in image.firebaseui android firebase rules screenshot

Now click on Rules as shown above. Now replace your default code with the following:

FirebaseUI android in brief:

Now let us discuss in brief about FirebaseUI android element which we will be using in this tutorial, i.e., FirebaseRecyclerAdapter. FirebaseRecyclerAdapter has been written to ease the Developer’s burden to dynamically sync the data, repopulate views and deleting unwanted views.

There is also a FirebaseUI android Element for Listviews called as FirebaseListAdapter but since Recyclerview is the recent and preferred one compared to ListView, our tutorial will be focusing on using FirebaseRecyclerAdapter.

To more about RecyclerView, you can refer to our previous article where we’ve discussed in detail about RecyclerView and CardView Implementation.

FirebaseRecyclerAdapter is an abstract class which handles all of the child events at the given Firebase location. It marshals received data into the given class type.

In order to use FirebaseRecyclerAdapter, we create the reference to the object as follows:

 

where the parameter are as explained below:

modelClass – instance of the model class you’ve created

listItemLayout –  represents the layout file of the list item of RecyclerView

viewHolderClass – represents the view Holder class which hold references to all sub-views in a listItemLayout’s instance

ref –  reference to the Firebase database location where we will put/modify our data.

3. Adding Additional Files required

Before going any further let us configure our common files such as colors.xml, strings.xml and styles.xml.

Here is my colors.xml file:

Now my strings.xml file consists of following:

Our modified styles.xml file will consist of the following code:

5. Creating files required by FirebaseUI android:

From the parameters of FirebaseUI android, we can see that we need a model, a layout for list item and a viewholder class. Let us begin by creating a model class.

Here, I’ve created a package called models and created a model class named Movie.java for my project Movie Board and have written the following code to get and set movie’s name, rating and movie’s logo:

Next we need a list item layout for which I’ve created a Layout file called movie_board_item.xml and wrote the following code:

In the above code we used cardviews about which we’ve explained in our previous article.

Next, as discussed previously, we need a ViewHolder class which we’ll be declaring in our MainActivity.java class itself as an inner class.

Now we’ll modify our activity_main.xml as follows:

Now open MainActivity.java and write the following code:

 

 

The code is commented wherever it is felt necessary.  Next we’ll declare a Fragment so that when we click on Floating action bar, we will get the fragment from which we can add movie name, rating and Movie Poster. Here I’ve declared my fragment as AddMovieFragment.java and wrote the following code:

Next we declare a layout for this fragment. Here I’ve named it as movie_fragment.xml. and placed the following code inside it:

Now if we run the project, if there are any movies previously entered in our Firebase Database, they will get loaded. If we click on Floating actionbar and add a movie with rating and url to the poster, and if we click on submit button, they will get stored in Firebase Database which will reflect across all the devices on which the app is running. In next article, we will discuss about Firebase Authentication.

 

Related Posts