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

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:

firebaseui android

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:

FirebaseRecyclerAdapter<ModelClass, ViewHolder> adapter = new FirebaseRecyclerAdapter<>( modelClass, listItemLayout,viewHolderClass, ref);

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.

Vamsi Tallapudi
Connect Via

Vamsi Tallapudi

Founder and Author at Code Refer
Android Dev, Tech Enthusiast and Blogger. Ever since my first basic android app has reached lakhs of users, I've found myself in love with Android Development :). While my primary passion is coding, during my free time, you can find me blogging, travelling or on Facebook 🙂
Vamsi Tallapudi
Connect Via

Related Posts

Vamsi Tallapudi

Android Dev, Tech Enthusiast and Blogger. Ever since my first basic android app has reached lakhs of users, I've found myself in love with Android Development :). While my primary passion is coding, during my free time, you can find me blogging, travelling or on Facebook :)

You may also like...

  • BROKEN_FILE_LINK

    Thank you for posing this tutorial.
    First of all FireBaseUI version 0.4.3 will not work with FirebaseDatabase version 9.0.2, only with 9.2.1.
    other than that you did a great job.
    I wonder how complicate is to add Edit and delete from the device, since we need to store the push Id some how.

  • Masud Parvez

    Why data save below in the json file. I want to save it in top position so that new data arrived first when i open my application.

  • To delete from device you can use the following code: adapter.getRef(position).removeValue();
    To edit from device you can use adapter.getItem(position).setMovieName() etc.
    So, in short, you don’t need to store the push id.
    Updated the code with latest FirebaseUI version of 0.4.4 and FirebaseDatabase Version of 9.4.0.
    Cheers 🙂

  • The data will always save below in json file. However, You can reverse the Recyclerview layout by using the following line:
    For StaggeredGridLayout: mLayoutManager.setReverseLayout(true);

  • ‫إليود نجوغونا‬‎

    Waooooh..Amaizing Tutorial…DOPE Coding

  • FREELANCE THINKING

    Hello, I been trying to get this code to function, the code as it is crashes when I use the

    Picasso.with(MainActivity.this).load(model.getMoviePoster()).into(viewHolder.ivMoviePoster)

    the code crashes when I use the “model.getMoviePoster()”. When I remove this portion of the code and actually add a link, “.load(“http://i.imgur.com/DvpvklR.png”)” The code runs, but I get the photo from the link I added. (ATTACHED)

    So, when I try to upload a new url I keep getting the added links picture even though the url for the new photo I’m attempting to add is logging to the database.

    I used the same code as listed above. Any suggestions on how to make it so every person can upload thier own individual photos?

  • Lokendra Narware

    11-11 05:54:46.696 13650-13650/? W/Zygote: mz_is_rooted false
    11-11 05:54:46.699 13650-13650/? I/art: Late-enabling -Xcheck:jni
    11-11 05:54:46.749 13650-13650/ln.uiimagefirebase I/InstantRun: Instant Run Runtime started. Android package is ln.uiimagefirebase, real application class is null.
    11-11 05:54:46.815 13650-13650/ln.uiimagefirebase W/linker: /system/lib64/libfilterUtils.so: unused DT entry: type 0x6ffffffe arg 0x808
    11-11 05:54:46.815 13650-13650/ln.uiimagefirebase W/linker: /system/lib64/libfilterUtils.so: unused DT entry: type 0x6fffffff arg 0x2
    11-11 05:54:47.032 13650-13676/ln.uiimagefirebase W/DynamiteModule: Local module descriptor class for com.google.firebase.auth not found.
    11-11 05:54:47.047 13650-13676/ln.uiimagefirebase W/DynamiteModule: Local module descriptor class for com.google.firebase.auth not found.
    11-11 05:54:47.053 13650-13676/ln.uiimagefirebase W/ResourcesManager: Asset path ‘/system/framework/com.android.media.remotedisplay.jar’ does not exist or contains no resources.
    11-11 05:54:47.053 13650-13676/ln.uiimagefirebase W/ResourcesManager: Asset path ‘/system/framework/com.android.location.provider.jar’ does not exist or contains no resources.
    11-11 05:54:47.135 13650-13650/ln.uiimagefirebase I/FA: App measurement is starting up, version: 9877
    11-11 05:54:47.135 13650-13650/ln.uiimagefirebase I/FA: To enable debug logging run: adb shell setprop log.tag.FA VERBOSE
    11-11 05:54:47.142 13650-13650/ln.uiimagefirebase I/FA: To enable faster debug mode event logging run:
    adb shell setprop firebase.analytics.debug-mode ln.uiimagefirebase
    11-11 05:54:47.223 13650-13650/ln.uiimagefirebase I/FirebaseInitProvider: FirebaseApp initialization successful
    11-11 05:54:47.453 13650-13650/ln.uiimagefirebase I/DynamiteModule: Considering local module com.google.android.gms.firebase_database:4 and remote module com.google.android.gms.firebase_database:4
    11-11 05:54:47.453 13650-13650/ln.uiimagefirebase I/DynamiteModule: Selected remote version of com.google.android.gms.firebase_database, version >= 4
    11-11 05:54:47.463 13650-13650/ln.uiimagefirebase E/System: stat file error, path is /data/data/com.google.android.gms/app_chimera/m/00000009/n/arm64-v8a, exception is android.system.ErrnoException: stat failed: ENOENT (No such file or directory)
    11-11 05:54:47.541 13650-13688/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: hostname=firenotification-3382b.firebaseio.com; servname=(null); cache_mode=(null), netid=0; mark=0
    11-11 05:54:47.541 13650-13688/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: ai_addrlen=0; ai_canonname=(null); ai_flags=4; ai_family=0
    11-11 05:54:47.541 13650-13688/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: hostname=firenotification-3382b.firebaseio.com; servname=(null); cache_mode=(null), netid=0; mark=0
    11-11 05:54:47.541 13650-13688/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: ai_addrlen=0; ai_canonname=(null); ai_flags=1024; ai_family=0
    11-11 05:54:47.544 13650-13688/ln.uiimagefirebase D/libc-netbsd: getaddrinfo: firenotification-3382b.firebaseio.com get result from proxy >>
    11-11 05:54:47.544 13650-13688/ln.uiimagefirebase I/System.out: propertyValue:true
    11-11 05:54:47.545 13650-13688/ln.uiimagefirebase I/System.out: [CDS]connect[firenotification-3382b.firebaseio.com/104.155.133.130:443] tm:90
    11-11 05:54:47.585 13650-13650/ln.uiimagefirebase W/art: Before Android 4.1, method android.graphics.PorterDuffColorFilter android.support.graphics.drawable.VectorDrawableCompat.updateTintFilter(android.graphics.PorterDuffColorFilter, android.content.res.ColorStateList, android.graphics.PorterDuff$Mode) would have incorrectly overridden the package-private method in android.graphics.drawable.Drawable
    11-11 05:54:48.142 13650-13695/ln.uiimagefirebase E/GED: Failed to get GED Log Buf, err(0)
    11-11 05:54:48.142 13650-13695/ln.uiimagefirebase I/OpenGLRenderer: Initialized EGL, version 1.4
    11-11 05:54:48.229 13650-13695/ln.uiimagefirebase W/MALI: glDrawArrays:714: [MALI] glDrawArrays takes more than 5ms here. Total elapse time(us): 7708
    11-11 05:54:48.240 13650-13688/ln.uiimagefirebase E/NativeCrypto: ssl=0x7f6fc7fd00 cert_verify_callback x509_store_ctx=0x7f609d8128 arg=0x0
    11-11 05:54:48.240 13650-13688/ln.uiimagefirebase E/NativeCrypto: ssl=0x7f6fc7fd00 cert_verify_callback calling verifyCertificateChain authMethod=DHE_RSA
    11-11 05:54:48.591 13650-13688/ln.uiimagefirebase I/System.out: gba_cipher_suite:TLS_DHE_RSA_WITH_AES_128_GCM_SHA256
    11-11 05:54:48.591 13650-13688/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: hostname=firenotification-3382b.firebaseio.com; servname=(null); cache_mode=(null), netid=0; mark=0
    11-11 05:54:48.591 13650-13688/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: ai_addrlen=0; ai_canonname=(null); ai_flags=4; ai_family=0
    11-11 05:54:49.221 13650-13688/ln.uiimagefirebase I/System.out: [CDS]close[41354]
    11-11 05:54:49.221 13650-13688/ln.uiimagefirebase I/NetworkManagementSocketTagger: untagSocket(24)
    11-11 05:54:49.232 13650-13720/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: hostname=s-usc1c-nss-105.firebaseio.com; servname=(null); cache_mode=(null), netid=0; mark=0
    11-11 05:54:49.232 13650-13720/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: ai_addrlen=0; ai_canonname=(null); ai_flags=4; ai_family=0
    11-11 05:54:49.232 13650-13720/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: hostname=s-usc1c-nss-105.firebaseio.com; servname=(null); cache_mode=(null), netid=0; mark=0
    11-11 05:54:49.232 13650-13720/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: ai_addrlen=0; ai_canonname=(null); ai_flags=1024; ai_family=0
    11-11 05:54:49.236 13650-13720/ln.uiimagefirebase D/libc-netbsd: getaddrinfo: s-usc1c-nss-105.firebaseio.com get result from proxy >>
    11-11 05:54:49.236 13650-13720/ln.uiimagefirebase I/System.out: propertyValue:true
    11-11 05:54:49.236 13650-13720/ln.uiimagefirebase I/System.out: [CDS]connect[s-usc1c-nss-105.firebaseio.com/104.197.24.164:443] tm:90
    11-11 05:54:50.479 13650-13650/ln.uiimagefirebase W/ResourceType: Too many attribute references, stopped at: 0x01010099
    11-11 05:54:50.479 13650-13650/ln.uiimagefirebase W/ResourceType: Too many attribute references, stopped at: 0x0101009b
    11-11 05:54:50.502 13650-13650/ln.uiimagefirebase W/ResourceType: Too many attribute references, stopped at: 0x01010099
    11-11 05:54:50.502 13650-13650/ln.uiimagefirebase W/ResourceType: Too many attribute references, stopped at: 0x0101009b
    11-11 05:54:50.833 13650-13720/ln.uiimagefirebase E/NativeCrypto: ssl=0x7f6fc7fd00 cert_verify_callback x509_store_ctx=0x7f609d81c8 arg=0x0
    11-11 05:54:50.834 13650-13720/ln.uiimagefirebase E/NativeCrypto: ssl=0x7f6fc7fd00 cert_verify_callback calling verifyCertificateChain authMethod=ECDHE_RSA
    11-11 05:54:51.430 13650-13720/ln.uiimagefirebase I/System.out: gba_cipher_suite:TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256
    11-11 05:54:51.430 13650-13720/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: hostname=s-usc1c-nss-105.firebaseio.com; servname=(null); cache_mode=(null), netid=0; mark=0
    11-11 05:54:51.430 13650-13720/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: ai_addrlen=0; ai_canonname=(null); ai_flags=4; ai_family=0
    11-11 05:54:52.844 13650-13650/ln.uiimagefirebase W/SettingsInterface: Setting airplane_mode_on has moved from android.provider.Settings.System to android.provider.Settings.Global, returning read-only value.
    11-11 05:54:52.875 13650-13650/ln.uiimagefirebase E/AndroidRuntime: FATAL EXCEPTION: main
    Process: ln.uiimagefirebase, PID: 13650
    java.lang.IllegalArgumentException: Path must not be empty.
    at com.squareup.picasso.Picasso.load(Picasso.java:297)
    at ln.uiimagefirebase.MainActivity$1.populateViewHolder(MainActivity.java:72)
    at ln.uiimagefirebase.MainActivity$1.populateViewHolder(MainActivity.java:64)
    at com.firebase.ui.database.FirebaseRecyclerAdapter.onBindViewHolder(FirebaseRecyclerAdapter.java:177)
    at android.support.v7.widget.RecyclerView$Adapter.onBindViewHolder(RecyclerView.java:6062)
    at android.support.v7.widget.RecyclerView$Adapter.bindViewHolder(RecyclerView.java:6095)
    at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5277)
    at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5153)
    at android.support.v7.widget.LayoutState.next(LayoutState.java:100)
    at android.support.v7.widget.StaggeredGridLayoutManager.fill(StaggeredGridLayoutManager.java:1568)
    at android.support.v7.widget.StaggeredGridLayoutManager.onLayoutChildren(StaggeredGridLayoutManager.java:678)
    at android.support.v7.widget.StaggeredGridLayoutManager.onLayoutChildren(StaggeredGridLayoutManager.java:600)
    at android.support.v7.widget.RecyclerView.dispatchLayoutStep2(RecyclerView.java:3374)
    at android.support.v7.widget.RecyclerView.dispatchLayout(RecyclerView.java:3183)
    at android.support.v7.widget.RecyclerView.consumePendingUpdateOperations(RecyclerView.java:1593)
    at android.support.v7.widget.RecyclerView$1.run(RecyclerView.java:323)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:800)
    at android.view.Choreographer.doCallbacks(Choreographer.java:603)
    at android.view.Choreographer.doFrame(Choreographer.java:571)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:786)
    at android.os.Handler.handleCallback(Handler.java:815)
    at android.os.Handler.dispatchMessage(Handler.java:104)
    at android.os.Looper.loop(Looper.java:194)
    at android.app.ActivityThread.main(ActivityThread.java:5847)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1010)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:805)
    11-11 05:54:52.881 13650-13763/ln.uiimagefirebase I/System.out: url:https://www.google.co.in/search?q=hello&hl=en-US&source=lnms&prmd=mivn&tbm=isch&sa=X&ved=0ahUKEwjg9ozpzpzQAhVKpY8KHbJ-D5sQ_AUICCgC&biw=360&bih=567#imgrc=iomKndCSemKr5M%3A
    11-11 05:54:52.881 13650-13763/ln.uiimagefirebase I/System.out: open:https://www.google.co.in/search?q=hello&hl=en-US&source=lnms&prmd=mivn&tbm=isch&sa=X&ved=0ahUKEwjg9ozpzpzQAhVKpY8KHbJ-D5sQ_AUICCgC&biw=360&bih=567#imgrc=iomKndCSemKr5M%3A
    11-11 05:54:52.884 13650-13763/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: hostname=www.google.co.in; servname=(null); cache_mode=(null), netid=0; mark=0
    11-11 05:54:52.884 13650-13763/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: ai_addrlen=0; ai_canonname=(null); ai_flags=4; ai_family=0
    11-11 05:54:52.884 13650-13763/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: hostname=www.google.co.in; servname=(null); cache_mode=(null), netid=0; mark=0
    11-11 05:54:52.884 13650-13763/ln.uiimagefirebase D/libc-netbsd: [getaddrinfo]: ai_addrlen=0; ai_canonname=(null); ai_flags=1024; ai_family=0
    11-11 05:54:52.908 13650-13650/ln.uiimagefirebase I/Process: Sending signal. PID: 13650 SIG: 9

  • Lokendra Narware

    plz solve my error

  • the url you are passing to picasso at line 297 is empty. Make sure that you pass a non-empty url.

  • ibrahim dao

    Hi,
    i tried your code and it works just perfectly.but now what is blocking is the onClickListener. I searched all over internet and tried all possible solutions but click on items(and then know the id of movie clicked for example) doesn’t work. So please can you help me to add this clickListener to the mRecyclerView?
    Thanks,
    and very good job 😉

  • dsrtradefx

    Hello. I implemented the full code over the last 2 days and I have never been able to actually see anything returned from the database json file. I rebuilt it several times on my own app and then had to delete everything and install exactly as is written here. I can add to the database, but there is nothing on the main page except the title, the text view stating there are no movies, and the add movie button. Is there something I am missing, or that is not included with the code here? I even downloaded from git and combed line by line to make sure everything matched. I need to be able to display the entered information in my application. The app doesn’t crash or anything. It just doesn’t show the cards in the recyclerview.

  • dsrtradefx

    I got it fixed.I think I was handling the child setting wrong. Works great now.