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 🙂

[widget id=”text-15″]

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:

[widget id=”text-3″]

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:

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.

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

keytool -list -v -keystore C:/Users/vamsi/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

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:

[widget id=”text-15″]

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

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

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

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.1.2'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
        // Add this line to include google services
        classpath 'com.google.gms:google-services:3.0.0'
    }
}

allprojects {
    repositories {
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

[widget id=”text-3″]

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:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 24
    buildToolsVersion '24'
    defaultConfig {
        applicationId "com.coderefer.firebasedatabaseexample"
        minSdkVersion 16
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:24.0.0'
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha1'
    testCompile 'junit:junit:4.12'
    androidTestCompile 'com.android.support.test.espresso:espresso-core:2.2.2'
    androidTestCompile 'com.android.support.test:runner:0.5'
    androidTestCompile 'com.android.support:support-annotations:24.0.0'

    //Libraries I've included
    compile 'com.google.firebase:firebase-database:9.4.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
    compile 'com.android.support:cardview-v7:24.0.0'
    compile 'com.android.support:design:24.0.0'
    compile 'com.android.support:recyclerview-v7:24.0.0'
    // Single target that includes all FirebaseUI libraries
    compile 'com.firebaseui:firebase-ui:0.4.4'
}
// Add to the bottom of the file
apply plugin: 'com.google.gms.google-services'

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.

[widget id=”text-15″]

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.

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

// These rules give anyone, even people who are not users of your app,
// read and write access to your database
//Remember to change these rules while publishing your app
{
  "rules": {
    ".read": true,
    ".write": true
  }
}

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.

[widget id=”text-15″]

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.

[widget id=”text-3″]

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:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#9C27B0</color>
    <color name="colorPrimaryDark">#7B1FA2</color>
    <color name="colorAccent">#FE3F80</color>
    <color name="textPrimary">#212121</color>
    <color name="textSecondary">#727272</color>
    <color name="white">#fff</color>
    <color name="background">#dae2e2e2</color>
</resources>

[widget id=”text-3″]

Now my strings.xml file consists of following:

<resources>
    <string name="app_name">Movie Board</string>
    <string name="movie_name_hint">Enter Movie Name</string>
</resources>

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

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!--Defining colors for TextInputLayout's EditText-->
    <style name="TextLabel" parent="TextAppearance.AppCompat">
        <!-- Hint color and label color in FALSE state -->
        <item name="android:textColorHint">#9575cd</item>
        <item name="android:textSize">20sp</item>
        <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorControlNormal">#9575cd</item>
        <item name="colorControlActivated">@color/colorAccent</item>
    </style>

</resources>

[widget id=”text-15″]

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:

package com.coderefer.firebasedatabaseexample.models;

/**
 * Created by vamsi on 18-Jul-16.
 */

public class Movie {

    public String movieName;
    public String moviePoster;
    public float movieRating;

    public Movie(){
        
    }
    public Movie(String movieName,String moviePoster,float movieRating){
        this.movieName = movieName;
        this.moviePoster = moviePoster;
        this.movieRating  = movieRating;
    }

    public String getMovieName() {
        return movieName;
    }

    public void setMovieName(String movieName) {
        this.movieName = movieName;
    }

    public String getMoviePoster() {
        return moviePoster;
    }

    public void setMoviePoster(String moviePoster) {
        this.moviePoster = moviePoster;
    }

    public float getMovieRating() {
        return movieRating;
    }

    public void setMovieRating(float movieRating) {
        this.movieRating = movieRating;
    }
}

[widget id=”text-3″]

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:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!-- A CardView that contains a TextView -->
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        card_view:cardElevation="5dp"
        card_view:cardCornerRadius="4dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.2">

                <ImageView
                    android:id="@+id/iv_movie_poster"
                    android:layout_width="match_parent"
                    android:src="@drawable/civil_war"
                    android:scaleType="centerCrop"
                    android:layout_height="match_parent"/>

                <RatingBar
                    android:layout_marginRight="15dp"
                    android:layout_marginBottom="15dp"
                    style="?android:attr/ratingBarStyleSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:rating="3.5"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true"
                    android:id="@+id/rating_bar" />


            </RelativeLayout>
            <TextView
                android:id="@+id/tv_name"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:textSize="18sp"
                android:textStyle="bold"
                android:text="Captain America Civil War"
                android:layout_weight=".8"/>
        </LinearLayout>


    </android.support.v7.widget.CardView>

</LinearLayout>

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

[widget id=”text-15″]

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:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#dcdbdb">

    <TextView
        android:id="@+id/tv_no_movies"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="No Movies Available Please Enter your fav movie by clicking + button"
        android:textAlignment="center"
        android:textSize="18sp"/>
    <FrameLayout
        android:id="@+id/frame_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/my_recycler_view"
            android:scrollbars="vertical"
            android:layout_height="match_parent"
            android:layout_width="match_parent"/>

    </FrameLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:src="@drawable/ic_add_white_24dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="23dp"
        android:layout_marginEnd="23dp"
        android:layout_marginBottom="22dp" />

</RelativeLayout>

Now open MainActivity.java and write the following code:

package com.coderefer.firebasedatabaseexample;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.util.Log;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;
import android.widget.RatingBar;
import android.widget.TextView;

import com.coderefer.firebasedatabaseexample.adapters.MovieBoardAdapter;
import com.coderefer.firebasedatabaseexample.fragments.AddMovieFragment;
import com.firebase.ui.database.FirebaseRecyclerAdapter;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;
import com.squareup.picasso.Picasso;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

    //created for firebaseui android tutorial by Vamsi Tallapudi

    private FloatingActionButton fab;

    ScaleAnimation shrinkAnim;
    private RecyclerView mRecyclerView;
    private StaggeredGridLayoutManager mLayoutManager;
    private TextView tvNoMovies;

    //Getting reference to Firebase Database
    FirebaseDatabase database = FirebaseDatabase.getInstance();
    DatabaseReference mDatabaseReference = database.getReference();

    private static final String userId = "53";


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Initializing our Recyclerview
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
        tvNoMovies = (TextView) findViewById(R.id.tv_no_movies);

        //scale animation to shrink floating actionbar
        shrinkAnim = new ScaleAnimation(1.15f, 0f, 1.15f, 0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

        if (mRecyclerView != null) {
            //to enable optimization of recyclerview
            mRecyclerView.setHasFixedSize(true);
        }
        //using staggered grid pattern in recyclerview
        mLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(mLayoutManager);

        //Say Hello to our new FirebaseUI android Element, i.e., FirebaseRecyclerAdapter
        FirebaseRecyclerAdapter<Movie,MovieViewHolder> adapter = new FirebaseRecyclerAdapter<Movie, MovieViewHolder>(
                Movie.class,
                R.layout.movie_board_item,
                MovieViewHolder.class,
                //referencing the node where we want the database to store the data from our Object
                mDatabaseReference.child("users").child(userId).child("movies").getRef()
        ) {
            @Override
            protected void populateViewHolder(MovieViewHolder viewHolder, Movie model, int position) {
                if(tvNoMovies.getVisibility()== View.VISIBLE){
                    tvNoMovies.setVisibility(View.GONE);
                }
                viewHolder.tvMovieName.setText(model.getMovieName());
                viewHolder.ratingBar.setRating(model.getMovieRating());
                Picasso.with(MainActivity.this).load(model.getMoviePoster()).into(viewHolder.ivMoviePoster);
            }
        };

        mRecyclerView.setAdapter(adapter);


        fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                getSupportFragmentManager().beginTransaction()
                        .replace(R.id.frame_container, new AddMovieFragment())
                        .addToBackStack(null)
                        .commit();
                //animation being used to make floating actionbar disappear
                shrinkAnim.setDuration(400);
                fab.setAnimation(shrinkAnim);
                shrinkAnim.start();
                shrinkAnim.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        //changing floating actionbar visibility to gone on animation end
                        fab.setVisibility(View.GONE);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {


                    }
                });

            }
        });


    }


    @Override
    public void onBackPressed() {
        super.onBackPressed();
        if (fab.getVisibility() == View.GONE)
            fab.setVisibility(View.VISIBLE);
    }

   //ViewHolder for our Firebase UI
    public static class MovieViewHolder extends RecyclerView.ViewHolder{

        TextView tvMovieName;
        RatingBar ratingBar;
        ImageView ivMoviePoster;

        public MovieViewHolder(View v) {
            super(v);
            tvMovieName = (TextView) v.findViewById(R.id.tv_name);
            ratingBar = (RatingBar) v.findViewById(R.id.rating_bar);
            ivMoviePoster = (ImageView) v.findViewById(R.id.iv_movie_poster);
        }
    }
}

[widget id=”text-15″]

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:

package com.coderefer.firebasedatabaseexample.fragments;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TextInputEditText;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.Toast;

import com.coderefer.firebasedatabaseexample.models.Movie;
import com.coderefer.firebasedatabaseexample.R;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;

/**
 * Created by vamsi on 08-Jul-16.
 */

public class AddMovieFragment extends Fragment implements View.OnClickListener {

    private DatabaseReference mDatabaseReference;
    private TextInputEditText movieName;
    private TextInputEditText movieLogo;
    private RatingBar mRatingBar;
    private Button bSubmit;

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.movie_fragment,container,false);

        movieName = (TextInputEditText) v.findViewById(R.id.tiet_movie_name);
        movieLogo = (TextInputEditText) v.findViewById(R.id.tiet_movie_logo);
        bSubmit = (Button) v.findViewById(R.id.b_submit);
        mRatingBar = (RatingBar) v.findViewById(R.id.rating_bar);

        //initializing database reference
        mDatabaseReference = FirebaseDatabase.getInstance().getReference();

        bSubmit.setOnClickListener(this);

        return v;
    }

    @Override
    public void onClick(View view) {
        switch(view.getId()){
            case R.id.b_submit:
                if(!isEmpty(movieName) && !isEmpty(movieName)){
                    myNewMovie("53", movieName.getText().toString().trim(),movieLogo.getText().toString(),mRatingBar.getRating());
                }else{
                    if(isEmpty(movieName)){
                        Toast.makeText(getContext(), "Please enter a movie name!", Toast.LENGTH_SHORT).show();
                    }else if(isEmpty(movieLogo)){
                        Toast.makeText(getContext(), "Please specify a url for the logo", Toast.LENGTH_SHORT).show();
                    }
                }
                //to remove current fragment
                getActivity().onBackPressed();
                break;
        }
    }

    private void myNewMovie(String userId, String movieName, String moviePoster, float rating) {
        //Creating a movie object with user defined variables
        Movie movie = new Movie(movieName,moviePoster,rating);
        //referring to movies node and setting the values from movie object to that location
        mDatabaseReference.child("users").child(userId).child("movies").push().setValue(movie);
    }

    //check if edittext is empty
    private boolean isEmpty(TextInputEditText textInputEditText) {
        if (textInputEditText.getText().toString().trim().length() > 0)
            return false;
        return true;
    }
}

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

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:attr/colorBackground"
    android:orientation="vertical"
    android:padding="5dp">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/TextLabel">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/tiet_movie_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter A Movie Name"
            />
    </android.support.design.widget.TextInputLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_rating_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/rating_bar"
            android:layout_marginTop="15dp"
            android:text="Your Rating: "
            android:textSize="16sp"
            android:textStyle="italic"/>

        <RatingBar
            android:id="@+id/rating_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/TextLabel">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Movie Logo URL "
            android:id="@+id/tiet_movie_logo"/>
    </android.support.design.widget.TextInputLayout>
    

    <Button
        android:id="@+id/b_submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Submit"/>

</LinearLayout>

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.

[widget id=”text-15″]