<p class="p2">In the previous article, we have learned about the <strong><span style="color: #008000;"><a style="color: #008000;" href="https://c1ctech.com/android-jetpack-data-binding/">Basics of dataBinding</a>.</span></strong>Now In this android data binding RecyclerView tutorial, I’m going to show how to implement data binding in Android <span style="color: #008000;"><strong>RecyclerView</strong></span>. Data binding binds the UI with data sources and reduces lines of code.</p>
<p>Using DataBinding in an adapter class keeps the code to very minimal as lot of things will be taken care in the layout itself.</p>
<p><span style="color: #008000;"><strong>Get GITHUB code from <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://github.com/arunk7839/AndroidDataBindingInRecyclerView">here</a></span>.</strong></span></p>
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="5NN_mM6ff3Q" title="Android DataBinding In RecyclerView"><a placeholder href="https://youtu.be/5NN_mM6ff3Q"><img src="https://i.ytimg.com/vi/5NN_mM6ff3Q/hqdefault.jpg" layout="fill" object-fit="cover" alt="Android DataBinding In RecyclerView"></a></amp-youtube></p>
<h3></h3>
<h3><span style="color: #000080;"><strong>Creating New Project</strong></span></h3>
<p class="p1"><strong>1</strong>. Create a new project in Android Studio from <span style="color: #008000;"><b>File </b><span class="s1"><b>⇒</b></span><b> New Project</b></span> and fill the project details.</p>
<p class="p1"><b>2</b>. Enable DataBinding in <span style="color: #008000;"><b>app/build.gradle</b></span>. Also add the <strong><span class="s2" style="color: #0000ff;">RecyclerView</span></strong>, <strong><span style="color: #0000ff;">CardView</span></strong> and <strong><span style="color: #0000ff;">CircleImageView</span></strong> dependencies and <span style="color: #008000;"><b>Sync</b></span> the project.</p>
<pre>android {

 <strong><span style="color: #008000;">dataBinding { </span></strong>
<strong><span style="color: #008000;"> enabled = true</span></strong>
<strong><span style="color: #008000;"> }</span></strong>
}

dependencies {
 implementation fileTree(dir: 'libs', include: ['*.jar'])
 implementation 'androidx.appcompat:appcompat:1.1.0'
 implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
 testImplementation 'junit:junit:4.12'

 <strong><span style="color: #008000;">//recyclerView</span></strong>
 implementation 'androidx.recyclerview:recyclerview:1.0.0'

 <span style="color: #008000;"><strong>//cardView</strong></span>
 implementation 'androidx.cardview:cardview:1.0.0'

 <strong><span style="color: #008000;">//circleImageView</span></strong>
 implementation 'de.hdodenhof:circleimageview:3.1.0'

 androidTestImplementation 'androidx.test:runner:1.2.0'
 androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}</pre>
<p><strong>3</strong>. Add the below <span style="color: #0000ff;"><strong>string-array</strong></span> for name and email in your <strong><span style="color: #008000;">strings.xml</span>.</strong></p>
<p><span style="color: #0000ff;"><strong>strings.xml</strong></span></p>
<pre><;string-array name="names">;
 <;item>;Arun Chandravanshi<;/item>;
 <;item>;Pravesh Kumar<;/item>;
 <;item>;Ranu Deshmuk<;/item>;
 <;item>;Neelam Roy<;/item>;
 <;item>;Nikita Desai<;/item>;
 <;item>;Mohan Bhatiya<;/item>;
 <;item>;Anikesh Danial<;/item>;
 <;item>;Chris Danial <;/item>;
 <;item>;Koshiki Chandravanshi<;/item>;
 <;item>;Neha pandey<;/item>;


<;/string-array>;

<;string-array name="emails">;

 <;item>;arun11@gmail.com<;/item>;
 <;item>;pravesh12@gmail.com<;/item>;
 <;item>;ranu13@gmail.com<;/item>;
 <;item>;neelam14@gmail.com<;/item>;
 <;item>;nikita15@gmail.com<;/item>;
 <;item>;mohan16@gmail.com<;/item>;
 <;item>;anikesh17@gmail.com<;/item>;
 <;item>;chris18@gmail.com<;/item>;
 <;item>;koshiki19@gmail.com<;/item>;
 <;item>;neha20@gmail.com<;/item>;


<;/string-array>;</pre>
<p><strong>4</strong>. Open the layout file of main activity i.e <strong><span style="color: #008000;">activity_main.xml</span>.</strong> Enable data-binding by adding <span style="color: #008000;"><strong><;layout>;</strong></span> tag and inside root view, add <strong><span style="color: #008000;">RecyclerView</span></strong>.</p>
<p><span style="color: #0000ff;"><strong>activity_main.xml</strong></span></p>
<pre><;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">;

 <;androidx.constraintlayout.widget.ConstraintLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">;

 <;androidx.recyclerview.widget.RecyclerView
 android:id="@+id/recyclerView"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scrollbars="vertical"
 android:layout_marginBottom="8dp"
 android:layout_marginEnd="8dp"
 android:layout_marginLeft="8dp"
 android:layout_marginRight="8dp"
 android:layout_marginStart="8dp"
 android:layout_marginTop="8dp"
 android:padding="4dp"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent"/>;

 <;/androidx.constraintlayout.widget.ConstraintLayout>;

<;/layout>;</pre>
<p><strong>5</strong>. Create a model class named <span style="color: #008000;"><strong>Employee.java</strong></span>. This class provides data to <span style="color: #008000;"><strong>RecyclerView</strong></span>.</p>
<p><span style="color: #0000ff;"><strong>Employee.java</strong></span></p>
<pre>package com.example.databindingdemo;

import android.view.View;

import androidx.core.content.ContextCompat;
import androidx.databinding.BindingAdapter;
import de.hdodenhof.circleimageview.CircleImageView;

public class Employee {

 public String name, email;
 public int imageId;

 public Employee(String name, String email, int imageId) {
 this.name = name;
 this.email = email;
 this.imageId = imageId;
 }

 <strong><span style="color: #008000;">//code for loading image</span></strong>
 @BindingAdapter("android:imageUrl")
 public static void loadImage(View view, int imageId) {

 CircleImageView imageView = (CircleImageView) view;

 imageView.setImageDrawable(ContextCompat.getDrawable(imageView.getContext(), imageId));
 }
}</pre>
<p>In the above class, we are adding one method name <span style="color: #0000ff;"><strong>loadImage()</strong></span> which annotated with <span style="color: #0000ff;"><strong>@BindingAdapter(“android:imageUrl”).</strong></span></p>
<p>Using <span style="color: #008000;"><strong>BindingAdapters</strong></span> you can create custom attributes for your views.</p>
<pre><;de.hdodenhof.circleimageview.CircleImageView
 android:id="@+id/emp_image"
 android:layout_width="80dp"
 android:layout_height="80dp"
 app:civ_border_width="2dp"
 <span style="color: #008000;"><strong>android:imageUrl="@{employee.imageId}"</strong></span>
 android:scaleType="centerCrop"
 app:civ_border_color="#FF000000"/>;</pre>
<p>Now the above custom attribute <strong><span style="color: #008000;">imageUrl</span></strong> defined in CircleImageView gets linked with the <span style="color: #008000;"><strong>loadImage()</strong></span>. That means whenever this attribute will read for any employee object then loadImage() will be called and it will set the drawable Image to ImageView.</p>
<h3><span style="color: #000080;"><strong>DataBinding In RecyclerView</strong></span></h3>
<p class="p2">Binding a RecyclerView layout is similar to normal binding except few changes in onCreateViewHolder and onBindViewHolder methods.</p>
<p class="p2"><strong>6</strong>. Create layout named <span style="color: #008000;"><strong>employee_list_item</strong><b>.xml</b></span>. This layout contains one <span style="color: #008000;"><b>ImageView</b></span> and two <strong><span style="color: #008000;">TextViews</span></strong> (for name and email ) to render employee data in RecyclerView.</p>
<ul class="ul1">
<li class="li2">In this layout, data binding is enabled by keeping the root element as <span style="color: #008000;"><strong><;layout>;</strong></span>. The <span style="color: #008000;"><b>Employee</b></span> model is bound to this layout using <span style="color: #008000;"><b><;variable>;</b></span> tag.</li>
</ul>
<p><strong><span style="color: #0000ff;">employee_list_item.xml</span></strong></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<pre><;?xml version="1.0" encoding="utf-8"?>;

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

 <;data>;

 <;variable
 name="employee"
 type="com.example.databindingdemo.Employee" />;

 <;/data>;

 <;LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:adjustViewBounds="true">;

 <;androidx.cardview.widget.CardView
 android:id="@+id/cvEmployee"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_gravity="center"
 android:layout_margin="5dp"
 android:elevation="3dp"
 card_view:cardCornerRadius="1dp">;

 <;androidx.constraintlayout.widget.ConstraintLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content">;

 <;de.hdodenhof.circleimageview.CircleImageView
 android:id="@+id/emp_image"
 android:layout_width="80dp"
 android:layout_height="80dp"
 app:civ_border_width="2dp"
 android:layout_marginStart="8dp"
 android:layout_marginLeft="8dp"
 android:layout_marginTop="8dp"
 android:layout_marginBottom="8dp"
 android:background="?attr/selectableItemBackgroundBorderless"
 <span style="color: #008000;"><strong>android:imageUrl="@{employee.imageId}"</strong></span>
 android:scaleType="centerCrop"
 bind:layout_constraintBottom_toBottomOf="parent"
 bind:layout_constraintStart_toStartOf="parent"
 bind:layout_constraintTop_toTopOf="parent"
 app:civ_border_color="#FF000000"/>;


 <;TextView
 android:id="@+id/tvFullName"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_below="@+id/emp_image"
 android:layout_marginStart="8dp"
 android:layout_marginTop="8dp"
 android:layout_marginEnd="8dp"
 android:padding="4dp"
 <span style="color: #008000;"><strong>android:text="@{employee.name}"</strong></span>
 android:textColor="@color/colorPrimary"
 android:textSize="18sp"
 bind:layout_constraintEnd_toEndOf="parent"
 bind:layout_constraintStart_toEndOf="@+id/emp_image"
 bind:layout_constraintTop_toTopOf="parent" />;

 <;TextView
 android:id="@+id/tvEmail"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_below="@+id/tvFullName"
 android:layout_marginStart="8dp"
 android:layout_marginTop="4dp"
 android:layout_marginEnd="8dp"
 android:padding="4dp"
 <strong><span style="color: #008000;">android:text="@{employee.email}"</span></strong>
 android:textColor="@color/colorAccent"
 android:textSize="16sp"
 bind:layout_constraintEnd_toEndOf="parent"
 bind:layout_constraintStart_toEndOf="@+id/emp_image"
 bind:layout_constraintTop_toBottomOf="@+id/tvFullName" />;

 <;/androidx.constraintlayout.widget.ConstraintLayout>;
 <;/androidx.cardview.widget.CardView>;
 <;/LinearLayout>;


<;/layout>;</pre>
<p class="p1"><strong>7</strong>. Create a class named <span style="color: #008000;"><strong>EmployeeData</strong><b>Adapter.java</b> </span>under the <b>root</b> folder.</p>
<ul class="ul1">
<li class="li1">As the layout name is <span style="color: #008000;"><strong>employee</strong><b>_list_item.xml</b></span>, the generated binding class will be <span style="color: #0000ff;"><strong>EmployeeListItemBinding</strong></span>.</li>
<li class="li1">In <span style="color: #0000ff;"><b>onCreateViewHolder()</b></span> method, <span style="color: #008000;"><strong>employee</strong><b>_list_item</b></span> layout is inflated with the help of <span style="color: #008000;"><strong>EmployeeListItemBinding</strong></span> class.</li>
<li class="li1"><span style="color: #008000;"><b>holder.binding.setEmployee()</b></span> binds the <span style="color: #008000;"><b>Employee</b></span> model to each row.</li>
</ul>
<p><strong><span style="color: #0000ff;">EmployeeDataAdapter.java</span></strong></p>
<pre>package com.example.databindingdemo;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.ViewGroup;

import com.example.databindingdemo.databinding.EmployeeListItemBinding;

import java.util.List;

import androidx.annotation.NonNull;
import androidx.databinding.DataBindingUtil;
import androidx.recyclerview.widget.RecyclerView;

public class EmployeeDataAdapter extends RecyclerView.Adapter<;EmployeeDataAdapter.EmployeeViewHolder>; {

 Context context;
 List<;Employee>; employeeList;

 public EmployeeDataAdapter(Context context, List<;Employee>; employeeList) {
 this.context = context;
 this.employeeList = employeeList;
 }

 @NonNull
 @Override
 public EmployeeViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

 EmployeeListItemBinding binding = DataBindingUtil.inflate(LayoutInflater.from(parent.getContext()), R.layout.employee_list_item, parent, false);

 return new EmployeeViewHolder(binding);

 }

 @Override
 public void onBindViewHolder(@NonNull EmployeeViewHolder holder, int position) {

 Employee employee = employeeList.get(position);

 holder.binding.setEmployee(employee);
 }

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

 class EmployeeViewHolder extends RecyclerView.ViewHolder {

 private EmployeeListItemBinding binding;

 public EmployeeViewHolder(@NonNull EmployeeListItemBinding binding) {
 super(binding.getRoot());

 this.binding = binding;
 }
 }
}</pre>
<p class="p2"><strong>8</strong>. Finally open <span style="color: #008000;"><b>MainActivity.java</b></span> and do the below modifications.</p>
<ul class="ul1">
<li class="li2">As the main activity layout name is <span style="color: #008000;"><b>activity_main</b></span>, the generated binding class will be <span style="color: #008000;"><b>ActivityMainBinding</b></span>.</li>
<li class="li2"><span style="color: #008000;"><b>prepareData()</b></span> will prepare list of employees which we will pass to <span style="color: #0000ff;"><strong>EmployeeDataAdapter</strong></span>.</li>
</ul>
<p><strong><span style="color: #0000ff;">MainActivity.java</span></strong></p>
<pre>package com.example.databindingdemo;

import android.os.Bundle;

import com.example.databindingdemo.databinding.ActivityMainBinding;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;
import androidx.recyclerview.widget.LinearLayoutManager;

public class MainActivity extends AppCompatActivity {

 ActivityMainBinding binding;


 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);


 binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
 binding.recyclerView.setLayoutManager(new LinearLayoutManager(this));


 binding.recyclerView.setAdapter(new EmployeeDataAdapter(this, prepareData()));
 }


 public List<;Employee>; prepareData() {

 List<;String>; names = Arrays.asList(getResources().getStringArray(R.array.names));
 List<;String>; emails = Arrays.asList(getResources().getStringArray(R.array.emails));

 int[] imageIds = {R.drawable.boy_img2, R.drawable.boy_img1, R.drawable.girl_img1, R.drawable.girl_img2, R.drawable.girl_img3, R.drawable.boy_img3, R.drawable.boy_img5, R.drawable.boy_img4, R.drawable.girl_img5, R.drawable.girl_img4};

 List<;Employee>; employeeList = new ArrayList<;>;();

 int count = 0;

 for (String name : names) {
 employeeList.add(new Employee(name, emails.get(count), imageIds[count]));
 count++;
 }

 return employeeList;
 }
}

</pre>
<p>When you run your application it will look like this:</p>
<p><img class="alignnone wp-image-1580" src="https://c1ctech.com/wp-content/uploads/2020/02/Screenshot_1582208918.png" alt="Screenshot_1582208918" width="459" height="816" /></p>
<p>In the next article, we will talk about how to work with Observable data objects using dataBinding.