How Data Binding Helps You When Working with EditText Inside RecyclerView

I was working with EditText inside RecyclerView in my latest project. The EditText itself is used for user to input a score for a specific component, and there are many of them. Actually, the solution is pretty straightforward, you just need to set a callback in your adapter, implement the callback in your activity, call the callback once the score is inputted, and save it in a list. It means that you need more code and callback to achieve your goal. But, can we achieve the same result with less code and callback? Yes, we can, by using Data Binding.

Introduction to Data Binding

The Data Binding Library is a support library that allows you to bind UI components in your layouts to data sources in your app using a declarative format rather than programmatically. — Android Developer Docs

Source : https://developer.android.com/topic/libraries/data-binding

In summary, Data Binding let you binding your UI to your model. It has 2 types of binding, one-way and two-way binding.

• One-way binding : When the property in model changes, the UI also changes. But, when the UI is changes, the property in the model don’t because it binds in one way.

• Two-way binding : When the property in model changes, the UI also changes, and vice versa.

Usually, we apply the two-way binding in our EditText. When the EditText is changes by the user input, the attribute in model that binds to this EditText also changes. We’ll use this type of binding to helps us solve this problem with less code and callbacks.

The Idea

So, this is our application flow

We create a list of item in our activity and pass it to adapter. Then, when onBindViewHolder() in adapter is called, we pass the the item list to the layout. In the layout, we perform the two-way binding by adding a <variable> and @={} for specific property in the android:text attribute.

When the user input in that EditText, it will notify and changes the item list in the adapter. Because the list in adapter holds the reference to the list in activity, the item list in activity also changes. And, that’s how it works.

The Application

So today we will build an application to input a list of student scores with EditText inside the RecyclerView.

We have add item button to add a new scoring field to the list, and we have submit button to show the student’s name and the score in our Logcat.

Preparation

The example code here is written in Kotlin. The style itself might be a little bit different from Java style, but i believe that it won’t really confused you.

I assumed that we already have Android Studio installed in our PC and already create a project with Empty Activity. This is the steps that we will do afterward :

1. Add Dependency
2. Making a Model
3. Creating View Holder Layout & Binding
4. Creating Main Layout
5. Creating an Adapter
6. Code Activity
7. Run Application

Add Dependency

First, we will add RecyclerView dependency and enabled Data Binding in our project. Open your build.gradle (Module: app) and go to dependencies scope. Add RecyclerView dependencies inside it.

After that, go to android scope, below the buildTypes, enabled the Data Binding by adding this line

And your build.gradle should be looked like this

Click Sync Now at the top-right corner.

Making a Model

We will create a Student model with 2 property : name and score. Both of them are string.

1. Create a Kotlin File/Class

2. Named it Student and press Enter

3. Copy and paste the code below

And our model is ready.

Creating a View Holder & Binding

1. Let’s create a XML layout

2. Named it list_student_item and click OK

Your initial layout should be looked like this

Before we code the layout, let’s convert it to Data Binding

1. Places your cursor in the root of your layout (ConstraintLayout tag)
2. Press alt + enter (windows)

3. Select Convert to data binding layout and your layout should be looked like this

As you can see, Data Binding will add a wrapper named <layout> and we have 2 tags inside, <data> and <ConstraintLayout>.

We will add our model in <data> tag by adding this line of code inside :

We create a variable named “student” and set Student.kt as the type. And last, let’s create the layout

Notice that we used attribute android:text=”@={student.name}”. This is where the binding comes in. By using @{property}, we bind the model with the UI in one-way. To apply two-way binding, just add ‘=’ after ‘@’ symbol, and it becomes @={property}. Do the same thing in EditText for student’s score.

Creating Main Layout

Open your activity_main.xml and copy paste this code

This layout consists of 4 View, TextView for title, TextView for add student field, RecyclerView, and Button for submit.

Creating an Adapter

Let’s create a Kotlin File/Class and named it StudentAdapter. Then, in the primary constructor, add 1 parameter named studentList with ArrayList<Student> as the type and extends the class with RecyclerView.Adapter<>().

Leave the generic type empty for now, we will add it later after we create a ViewHolder Class.

Then, let’s create a inner class StudentViewHolder that act as ViewHolder

Instead of using View class, we use the generated binding class as our View. We also have 1 method named bind() to bind the model to UI. Notice that we use binding.student here, the student itself is a variable in list_student_item.xml if you remember.

After that, we can fill the generic type in our extends class with StudentViewHolder.

And, override this 3 methods for RecyclerView

Then, complete this 3 functions with the code below

Finally, our StudentAdapter code should be look like this

Code Activity

In the MainActivity.kt, we have 3 private properties

1. studentList : save the students list
2. studentAdapter : adapter for students list. it will be attached to RecyclerView later.
3. binding : it’s the instance of our activity_main layout binding.

onCreate()

In this method, we will setting the content view using Data Binding, setting the adapter, and setting the listener.

Don’t worry about the error in setAdapter() and setListener(), we’ll add the function as we go through.

setAdapter()

Then, let’s create a private method named setAdapter() below onCreate() method. In this method, we’ll initialize the adapter and attach it to RecyclerView

setListener()

In this method, we’ll register our View to onClick listener.

onClick()

Oh, setOnClickListener() gives an error because we haven’t implement View.OnClickListener in our activity. Let’s add it and implement onClick() method. After that, copy and paste the code below

In this method, we handle 2 listeners for :

1. tvAddItem
   When user click this TextView, we’ll insert a new Student class to the list and notify the adapter that one item is inserted at the end of the list.
2. btnSubmit
   When user click this Button, we’ll do a loop for each Student in studentList, print out their name and score in Logcat.

And here it the complete code for MainActivity.kt

Run Application

Let’s run our application in real device/emulator. Demo :

And the result in my Logcat :

It works as expected without any callback and getter setter!

And, that’s it!

So, we’ve done our application! our code seems to be more concise than ever, thanks to Data Binding. I’ll leave the source code below. The source code consists of the code with and without Data Binding, so you can compare it. I hope this article can really help you in your project!

jonathandarwin/edittext-inside-recyclerview