Recycler View With Android DataBinding

In this blog, you will learn how to implement RecyclerView with Android Data Binding.

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.

apply plugin: 'com.android.application'
android {
    compileSdkVersion 24
    buildToolsVersion "23.0.3"
    defaultConfig {
        applicationId "com.androidgig.recyclerviewbinding"
        minSdkVersion 15
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
        dataBinding {
            enabled true
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:recyclerview-v7:23.4.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
}

Step 2

Create POJO/Model class called User with 3 parameters i.e. name, profile_image & age.

public class User {
    private String name, profile_image;
    private int age;
    public User(String name, String profile_image, int age) {
        this.name = name;
        this.profile_image = profile_image;
        this.age = age;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getProfile_image() {
        return profile_image;
    }
    public void setProfile_image(String profile_image) {
        this.profile_image = profile_image;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
}

Step 3

Create a layout for Recycler list items

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="user"
            type="com.androidgig.recyclerviewbinding.User" />

    </data>

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

        <LinearLayout android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:layout_margin="5dp"
                      android:background="@drawable/round_corner_view"
                      android:orientation="horizontal"
                      android:padding="10dp">

            <ImageView android:layout_width="50dp"
                       android:layout_height="50dp"
                       tools:src="@mipmap/ic_launcher"
                       app:url="@{user.profile_image}" />

            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="wrap_content"
                          android:layout_gravity="center_vertical"
                          android:layout_marginLeft="10dp"
                          android:orientation="vertical">

                <TextView android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:text="@{user.name}"
                          android:textAppearance="?android:attr/textAppearanceMedium"
                          android:textColor="@android:color/black"
                          tools:text="Name" />

                <TextView android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:text="@{`` + user.age}"
                          android:textColor="@android:color/black"
                          tools:text="Age" />

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</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.

public class UserAdapter extends RecyclerView.Adapter<UserAdapter.ViewHolder> {
    private ArrayList<User> list;
    public UserAdapter(ArrayList<User> list) {
        this.list = list;
    }
    @Override
    public UserAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View statusContainer = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item, parent, false);
        return new UserAdapter.ViewHolder(statusContainer);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        User status = list.get(position);
        holder.bindUser(status);
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {

        private RecyclerItemBinding binding;
        public ViewHolder(View itemView) {
            super(itemView);
            binding = DataBindingUtil.bind(itemView);
        }

        public void bindUser(User user) {
            binding.setUser(user);
        }
    }
}

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.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <RelativeLayout android:layout_width="match_parent"
                    android:layout_height="match_parent">
        <android.support.v7.widget.RecyclerView android:id="@+id/recycler"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     app:layoutManager="android.support.v7.widget.LinearLayoutManager" />
    </RelativeLayout>
</layout>

Step 6

Write your code in the activity/fragment to attach adapter to RecyclerView.

public class MainActivity extends AppCompatActivity {
    private ActivityMainBinding binding;
    private ArrayList<User> userList = new ArrayList<>();
    private UserAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        fillData();
        adapter = new UserAdapter(userList);
        binding.recycler.setAdapter(adapter);
    }
    private void fillData() {
        userList.add(new User("Ravi", "https://pbs.twimg.com/profile_images/446522135721164800/pdVA44as.jpeg", 26));
        userList.add(new User("Ritesh", "", 30));
        userList.add(new User("Naman", "", 20));
    }
    @BindingAdapter({
        "bind:url"
    })
    public static void setImage(ImageView imageView, String url) {
        if (url != null & amp; & amp; url.trim().length() & gt; 0) {
            Picasso.with(imageView.getContext()).load(url).error(R.mipmap.ic_launcher).into(imageView);
        } else
            imageView.setImageResource(R.mipmap.ic_launcher);
    }
}

Output



This article was originally posted on AndroidGig.com.