DataBinding is the process to establish a connection between UI elements and the Activity class. This will synchronize your user interface with your application model and logic. DataBinding will also minimize your code and utilize your layout file for maximum view updates. DataBinding minimizes your code by implementing <layout> tag as a root and merge model class with <variable> tag. The further Binding class is generated and a Binding suffix is added to it for code minimize.
![](http://findnerd.s3.amazonaws.com/imagedata/8408/8408.jpg)
So, In this tutorial, we will learn the usage of data binding and how to create a recycler view list using data binding in an Android application. Let's see the steps to implement:
Step 1: Before implementing any feature the very initial step is to add related support Gradle files, in this tutorial we need to add recycler view support inside Build Gradle.
compile "com.android.support:recyclerview-v7:25.3.1"
and
dataBinding {
enabled = true
}
Step 2: A recycler view for managing the list items using <android.support.v7.widget.RecyclerView> tag. The <data> tag is to let us add the reference of model class we use in our XML file(activity_data_binding_list). <variable> tag having two parameters name and type, the name is for the reference of model class and type is the location of the model class.
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable
name="usersViewModel"
type="com.databindingdemo.android.viewmodel.UsersViewModel"/>
</data>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:scrollbars="vertical"
tools:listitem="@layout/item_people"/>
</layout>
Step 3: Now we create an activity, DataBinding generates a binding which was similar to the name of the layout we created before. As per the layout name, the binding class is ActivityDataBindingListBinding, Binding suffix is added to it. This class holds all the bindings from the layout properties. Just inflate the layout and connect your model via this class or the DataBindingUtil class.
/**
* Init data binding.
*/
activityDataBindingListBinding = DataBindingUtil.setContentView(this, R.layout.activity_data_binding_list);
/**
* Add data on list.
* create a list and add repeated 15 elements on it.
*/
peopleListModel = new ArrayList<>();
for (int i = 0; i < 15; i++) {
peopleListModel.add(new UsersViewModel(i+"", "12345678", "abc@abc.com"));
}
/**
* Sets list people view.
* Initializing adapter class object for listOfUsers(RecyclerView)
* @param listOfUsers the list people
*/
private void setupListPeopleView(RecyclerView listOfUsers) {
DataBindingListAdapter adapter = new DataBindingListAdapter(peopleListModel);
listOfUsers.setAdapter(adapter);
listOfUsers.setLayoutManager(new LinearLayoutManager(this));
}
Step 4: Layout for adapter class showing list of fields serial number, label name and label details, all of them are TextView.
<layout
xmlns:android="http://schemas.android.com/apk/res/android">
<data>
<variable
name="usersViewModel"
type="com.databindingdemo.android.viewmodel.UsersViewModel"/>
</data>
<RelativeLayout
android:id="@+id/item_people"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:padding="@dimen/spacing_large">
<TextView
android:id="@+id/tv_serial_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_large"
android:layout_marginTop="@dimen/spacing_large"
android:text="@{usersViewModel.fullName}"
android:textColor="@android:color/primary_text_light"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="@+id/tv_label_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/tv_serial_number"
android:layout_below="@+id/tv_serial_number"
android:text="@{usersViewModel.cell}"
android:textColor="@android:color/secondary_text_light"
android:textSize="14sp" />
<TextView
android:id="@+id/tv_label_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/tv_label_name"
android:layout_below="@+id/tv_label_name"
android:text="@{usersViewModel.mail}"
android:textColor="@android:color/secondary_text_light"
android:textSize="14sp" />
</RelativeLayout>
</layout>
Step 5: Adapter class to set data to the views at runtime using model class.
/**
* The type Data binding list adapter.
*/
public class DataBindingListAdapter extends RecyclerView.Adapter<DataBindingListAdapter.PeopleAdapterViewHolder> {
private List<UsersViewModel> peopleList;
/**
* Instantiates a new Data binding list adapter.
*
* @param peopleList the people list
*/
public DataBindingListAdapter(List<UsersViewModel> peopleList) {
this.peopleList = peopleList;
}
@Override
public PeopleAdapterViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
ItemPeopleBinding itemPeopleBinding = DataBindingUtil.inflate(LayoutInflater.from(parent.getContext()), R.layout.item_people, parent, false);
return new PeopleAdapterViewHolder(itemPeopleBinding);
}
@Override
public void onBindViewHolder(PeopleAdapterViewHolder holder, int position) {
holder.bindPeople(peopleList.get(position));
}
@Override
public int getItemCount() {
return peopleList.size();
}
/**
* The type People adapter view holder.
*/
public static class PeopleAdapterViewHolder extends RecyclerView.ViewHolder {
/**
* The M item people binding.
*/
ItemPeopleBinding mItemPeopleBinding;
/**
* Instantiates a new People adapter view holder.
*
* @param itemPeopleBinding the item people binding
*/
private PeopleAdapterViewHolder(ItemPeopleBinding itemPeopleBinding) {
super(itemPeopleBinding.itemPeople);
this.mItemPeopleBinding = itemPeopleBinding;
}
/**
* Bind people.
*
* @param people the people
*/
void bindPeople(UsersViewModel people) {
mItemPeopleBinding.setUsersViewModel(people);
}
}
}
Step 6: A Model class called UsersViewModel with three parameters: full_name, cell and mail.
public class UsersViewModel {
private String fullName;
private String cell;
public String getFullName() {
return fullName;
}
public String getCell() {
return cell;
}
public String getMail() {
return mail;
}
private String mail;
public UsersViewModel(String full_name, String cell, String mail){
this.fullName = full_name;
this.cell = cell;
this.mail = mail;
}
}
That's all! For any questions please feel free to write in comment section.
0 Comment(s)