Tuesday , September 21 2021

Android Data Binding Library Tutorial with Firebase – Android Coding by DMTechnolab

Google suggests using Data Binding Library in our application. With the help of Data Binding Library, we can bind our UI component to data sources using declarative format. The default way of binding data to simple UI component (e.g. TextView, EditText) is findViewById() and setText(). But using Data Binding Library we do not need to do things manually, it results in separation of UI and business logic, and it also removes some of Boiler Plate Code.  This tutorial is about Android Data Binding Library, and today we will learn how to use Data Binding Library in our app.

In this post we will fetch some data from Firebase Realtime Database and we will bind the fetched data to our UI components using Android Data Binding Library. 

Basics of Data Binding

Before starting our actual project, let’s first understand some basics about Android Data Binding Library.

Enabling Data Binding

  • If you want to use Data Binding in your project, then you need to enable it first. And to do it open your app level build.gradle file. Here inside the android{} block you need to enable data binding. See the code below.

Enabling Data Binding Compiler

For data binding, many classes are generated automatically when you build your project. So initially error is shown, but now Android has the data binding compiler which compiles before the build, which speeds up the development process.

  • To enable data binding compiler open your gradle.properties file.

gradle propertiesgradle properties

  • Inside gradle.properties add the following line.

The Model

When we are using Data Binding we need models. And this concept is also used in design patterns like MVVM. So model separates our logic and data from the UI components, making it reusable.

For example consider the following model class.  (Sometimes it is also colled POJO class).

The above class is holding the data of the user, which we need to display in some UI Components. But now for binding the data with UI components we do not need to do it in the java code, instead we will use the declarative format let’s see how.

Data Binding Layout

Now remember one thing, whenever you need to bind data in your layout, the root element will always be <layout>. Inside this element we need to import our Model class using the <data> tag. Let’s see how we do this.

  • As you can see in the above xml code, first we have the <layout> tag.
  • Inside <layout> we have <data> tag. Inside the <data> tag we define all the binding variables needed. For this example we have only one.
  • For defining a binding variable inside <data> tag we use the <variable> tag.  The <variable> tag has two properties
    • name=”variable name”, it is the name of the variable.
    • type=”path of variable”, here we define the path of the model.
  • After <data> we can design whatever layout we want.  Here I have a Simple Vertical LinearLayout.
  • But for the data of the UI element, this time we will use @{variable.property}, as you can see in the above code. Here the variable is the name of the variable that we created inside the <data> tag. So in the above example it is @{user.name}. 

Observing the Changes

  • Usually we need to change the displayed data. But right now our Model do not have this capability. But with the android data binding library we can make our model capable of observing changes.

Using ObservableField

  • For this we can use ObservableField<Type>. For example the same model class that we created above can be written as.
  • Now while making the object of User class we can set the data using set() method.

Using BaseObservable

  • The same model class User can be written as.
  • BaseObservable: The above class is extending BaseObservable, and BaseObservable implements the mechanism of listener registration.
  • Notifying the Data Change: When the class extends BaseObservable, it is the responsibility of the class to notify the property changes. This can be easily done by using @Bindable annotation with getters and notifyPropertyChanged() method, as I did in the above code.
  • Here the BR class file is generated automatically while compilation.

Binding the Data

  • Finally we need to Bind the data. To do this we can use the following code.
  • Here the ActivityMainBinding class is generated automatically by the Android Data Binding Library.  If your activity file name is activity_main.xml (which it is by default), then it will create ActivityMainBinding.java. So whatever your layout file name is it will generate the binding class accordingly.

So we have got enough information to implement in our project. So now let’s create an Android Studio Project and implement the Data Binding. 

Things You Need to Do First

Before moving further here are the things that you need to do First.

  1. Create a new android studio project and enable android data binding library as I explained above.
  2. Create or use an existing firebase project, go to the console and create the following data in realtime database.
    firebase realtime databasefirebase realtime database
  3. Also change the Firebase Database Rules to public, as we are not going to add any authentication in this example.
  4. Now add Firebase Realtime Database in your project.
  5. Also add Glide Image Loading library to your project.

We have learned all these things already so I hope you can do it on your own. But if there is a problem you can follow the Firebase Realtime Database Tutorial First.

Implementing Android Data Binding

  • So I hope you have done the things I told you to. Now let’s first create our Model class.

Creating Model Class

  • We will create the same User class with a little change, as this time we have image as well in our database, so we will bind the image as well with data binding.
  • Everything in the above code is already explained except @BindingAdapter. @BindingAdapter is used when we need to define how the data will be binded to views. So here we have used @BindingAdapter({“android:image”}), now whenever we will use android:image property in an ImageView the method will be called, and it will load the Image using Glide, you can also use any other implementation here  if you do not want to use Glide.
  • The BR will give you error for now, but don’t worry it will be generated when we build our project.

Creating Layout

  • Now come to activity_main.xml file and create the layout.
  • As you can see we have used the declarative method for binding data here, also for the ImageView we have defined the android:image property created with @BindingAdapter.

After creating the layout, go to build->clean project and then build-> rebuild project.

Binding Data

  • Finally come to MainActivity.java and write the following code.
  • If your ActivityMainBinding class is not generated, then make sure you enabled data binding properly, also try restarting Android Studio and rebuilding the project. 
  • Now you can run your application to check if it is working or not.
Android Data Binding Library TutorialAndroid Data Binding Library Tutorial
Android Data Binding Library Tutorial
  • As you can see it is working fine, now if you will change anything on Firebase Realtime Database, changes will be automatically reflected here in your application.

Android Data Binding Library Tutorial Source Code

  • Still having some troubles? Don’t worry here is my source code for you. But you need to payme by subscribing to my youtube channel, so use the youtube button to unlock the link and then you can get the source code.

So that’s all for this tutorial friends. Tell me in comments if are having any query regarding Android Data Binding Library. And finally if you found this post useful then please share it with your friends. Thank You 🙂

 

belal khan profilebelal khan profile

Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.


Source link

About dmtechnolab

Check Also

Simplified Coding

Android Espresso Tutorial – Testing Fragment in Isolation – Android Coding by DMTechnolab

Welcome to another tutorial in the Android test series. And this post is called Android …

Leave a Reply

Your email address will not be published. Required fields are marked *