In I/O 2015, Google announced a data binding library for Android. With Data Binding, you create an ongoing link between an element in the user interface and a value. Data Binding is the process that establishes a connection between the Application UI and business logic.

In this post, we will learn how to integrate RecyclerView with Android Data Binding.

Step 1

Enable Data Binding in your module level gradle. Here is how your build.gradle should look.
  1. apply plugin: 'com.android.application'
  2. android {
  3. compileSdkVersion 24
  4. buildToolsVersion "23.0.3"
  5. defaultConfig {
  6. applicationId "com.androidgig.recyclerviewbinding"
  7. minSdkVersion 15
  8. targetSdkVersion 24
  9. versionCode 1
  10. versionName "1.0"
  11. dataBinding {
  12. enabled true
  13. }
  14. }
  15. buildTypes {
  16. release {
  17. minifyEnabled false
  18. proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  19. }
  20. }
  21. }
  22. dependencies {
  23. compile fileTree(dir: 'libs', include: ['*.jar'])
  24. compile 'com.android.support:appcompat-v7:23.4.0'
  25. compile 'com.android.support:recyclerview-v7:23.4.0'
  26. compile 'com.squareup.picasso:picasso:2.5.2'
  27. }
Step 2

Create POJO/Model class called User with 3 parameters i.e. name, profile_image & age.
  1. public class User {
  2. private String name, profile_image;
  3. private int age;
  4. public User(String name, String profile_image, int age) {
  5. this.name = name;
  6. this.profile_image = profile_image;
  7. this.age = age;
  8. }
  9. public String getName() {
  10. return name;
  11. }
  12. public void setName(String name) {
  13. this.name = name;
  14. }
  15. public String getProfile_image() {
  16. return profile_image;
  17. }
  18. public void setProfile_image(String profile_image) {
  19. this.profile_image = profile_image;
  20. }
  21. public int getAge() {
  22. return age;
  23. }
  24. public void setAge(int age) {
  25. this.age = age;
  26. }
  27. }
Step 3

Create a layout for Recycler list items
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools">
  6. <data>
  8. <variable
  9. name="user"
  10. type="com.androidgig.recyclerviewbinding.User" />
  12. </data>
  14. <LinearLayout android:layout_width="match_parent"
  15. android:layout_height="wrap_content"
  16. android:orientation="horizontal">
  18. <LinearLayout android:layout_width="match_parent"
  19. android:layout_height="wrap_content"
  20. android:layout_margin="5dp"
  21. android:background="@drawable/round_corner_view"
  22. android:orientation="horizontal"
  23. android:padding="10dp">
  25. <ImageView android:layout_width="50dp"
  26. android:layout_height="50dp"
  27. tools:src="@mipmap/ic_launcher"
  28. app:url="@{user.profile_image}" />
  30. <LinearLayout android:layout_width="match_parent"
  31. android:layout_height="wrap_content"
  32. android:layout_gravity="center_vertical"
  33. android:layout_marginLeft="10dp"
  34. android:orientation="vertical">
  36. <TextView android:layout_width="wrap_content"
  37. android:layout_height="wrap_content"
  38. android:text="@{user.name}"
  39. android:textAppearance="?android:attr/textAppearanceMedium"
  40. android:textColor="@android:color/black"
  41. tools:text="Name" />
  43. <TextView android:layout_width="wrap_content"
  44. android:layout_height="wrap_content"
  45. android:text="@{`` + user.age}"
  46. android:textColor="@android:color/black"
  47. tools:text="Age" />
  49. </LinearLayout>
  50. </LinearLayout>
  51. </LinearLayout>
  52. </layout>
Here, the user will be model class reference variable. You can have any number of variables, as you need. <layout> will contain your model class information, using which you will notify your controls about the value that they are going to show.

Step 4

Create an adapter for RecyclerView called UserAdapter.
  1. public class UserAdapter extends RecyclerView.Adapter<UserAdapter.ViewHolder> {
  2. private ArrayList<User> list;
  3. public UserAdapter(ArrayList<User> list) {
  4. this.list = list;
  5. }
  6. @Override
  7. public UserAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  8. View statusContainer = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item, parent, false);
  9. return new UserAdapter.ViewHolder(statusContainer);
  10. }
  12. @Override
  13. public void onBindViewHolder(ViewHolder holder, int position) {
  14. User status = list.get(position);
  15. holder.bindUser(status);
  16. }
  18. @Override
  19. public int getItemCount() {
  20. return list.size();
  21. }
  23. class ViewHolder extends RecyclerView.ViewHolder {
  25. private RecyclerItemBinding binding;
  26. public ViewHolder(View itemView) {
  27. super(itemView);
  28. binding = DataBindingUtil.bind(itemView);
  29. }
  31. public void bindUser(User user) {
  32. binding.setUser(user);
  33. }
  34. }
  35. }
Here

binding = DataBindingUtil.bind(itemView); will create binding for your recycler_item layout and return view.

binding.setUser(user); will set the user data to recycler items.

Step 5

Write XML code for your activity/fragment layout.
  1. <layout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:app="http://schemas.android.com/apk/res-auto">
  4. <RelativeLayout android:layout_width="match_parent"
  5. android:layout_height="match_parent">
  6. <android.support.v7.widget.RecyclerView android:id="@+id/recycler"
  7. android:layout_width="match_parent"
  8. android:layout_height="wrap_content"
  9. app:layoutManager="android.support.v7.widget.LinearLayoutManager" />
  10. </RelativeLayout>
  11. </layout>
Step 6

Write your code in the activity/fragment to attach adapter to RecyclerView.
  1. public class MainActivity extends AppCompatActivity {
  2. private ActivityMainBinding binding;
  3. private ArrayList<User> userList = new ArrayList<>();
  4. private UserAdapter adapter;
  5. @Override
  6. protected void onCreate(Bundle savedInstanceState) {
  7. super.onCreate(savedInstanceState);
  8. binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
  9. fillData();
  10. adapter = new UserAdapter(userList);
  11. binding.recycler.setAdapter(adapter);
  12. }
  13. private void fillData() {
  14. userList.add(new User("Ravi", "https://pbs.twimg.com/profile_images/446522135721164800/pdVA44as.jpeg", 26));
  15. userList.add(new User("Ritesh", "", 30));
  16. userList.add(new User("Naman", "", 20));
  17. }
  18. @BindingAdapter({
  19. "bind:url"
  20. })
  21. public static void setImage(ImageView imageView, String url) {
  22. if (url != null & amp; & amp; url.trim().length() & gt; 0) {
  23. Picasso.with(imageView.getContext()).load(url).error(R.mipmap.ic_launcher).into(imageView);
  24. } else
  25. imageView.setImageResource(R.mipmap.ic_launcher);
  26. }
  27. }
Output

Output

This article was originally posted on AndroidGig.com.