DataBinding with RecyclerView

In this series of DataBinding, we have discussed the basics of this with an example.

If you do not have a basic understanding of DataBinding, then go to Introduction to DataBinding  and  Introduction to DataBinding-2 . These two should be enough for you to proceed in this discussion.

In this tutorial, we will take databinding to the next step i.e Implementing DataBindig with RecyclerView.

Okay, without wasting any time Let's get started.

Today, we are going to show a list of animals, their nature and their image in recyclerview by implementing databinding. 

As per MVVM pattern, we are going to create our model class.

	public class Animals {
	String name,type;
	int image;
	public Animals(String name, String type, int image) {
	this.name = name;
	this.type = type;
	this.image = image;
	}
	public String getName() {
	return name;
	}
	public void setName(String name) {
	this.name = name;
	}
	public String getType() {
	return type;
	}
	public void setType(String type) {
	this.type = type;
	}
	public int getImage() {
	return image;
	}
	public void setImage(int image) {
	this.image = image;
	}
	@BindingAdapter("android:loadImage")
	public static void loadImage(View view, int image){
	ImageView imageView = (ImageView) view;
	imageView.setImageDrawable(ContextCompat.getDrawable(view.getContext(),image));
	}
	}

view raw Animals.java hosted with ❤ by GitHub

Here the loadImage is our custom function to load the image into the ImageView.

Now create a layout which we will show in recycler view

	<?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="animal"
	type="com.example.databindingdemo.Animals"/>
	</data>
	<LinearLayout
	android:layout_margin="10dp"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="horizontal"
	android:padding="5dp">
	<ImageView
	android:id="@+id/pic"
	android:layout_width="60dp"
	android:layout_height="60dp"
	android:loadImage="@{animal.image}"/>
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical">
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:text="@{animal.name}"
	android:textColor="@android:color/black"
	android:textSize="14sp"/>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:text="@{animal.type}"
	android:textColor="@android:color/black"
	android:textSize="14sp"
	/>
	</LinearLayout>
	</LinearLayout>
	</layout>

view raw animal_layout.xml hosted with ❤ by GitHub

Here root tag is <layout> and inside root we have created a variable of Model Class, using this variable we have added the properties to widgets.

Now create a list of animals which we will be shown inside our recycler view.

	private List<Animals> usersList(){
	List<Animals> animalsList = new ArrayList<>();
	String[] animals = {"Tiger","Monkey","Dog","Lion","Zebra","Horse","Cat"};
	String[] types = {"Carnivore","Herbivore","Omnivore","Carnivore","Herbivore","Herbivore","Omnivore"};
	int[] image = {R.drawable.tiger,R.drawable.monkey,R.drawable.dog,R.drawable.lion, R.drawable.zebra, R.drawable.horse, R.drawable.cat};
	for (int i=0;i<animals.length;i++){
	Animals users = new Animals(
	animals[i],
	types[i],
	image[i]
	);
	animalsList.add(users);
	}
	return animalsList;
	}

view raw AnimlaList.java hosted with ❤ by GitHub

Here inside for loop, we are creating an animal object everytime and settings their respective data and finally added each animal object to Arraylist. 

Now to show this list in recyclerview we need some kind of bridge. Let's create that bridge(Adapter).

	public class AnimalAdapter extends RecyclerView.Adapter<AnimalAdapter.ViewHolder> {
	private Context context;
	private List<Animals> userList = new ArrayList<>();
	public AnimalAdapter(Context context, List<Animals> userList) {
	this.context = context;
	this.userList = userList;
	}
	@NonNull
	@Override
	public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
	RecyclerLayoutBinding mBinding = DataBindingUtil.inflate(LayoutInflater.from(context),R.layout.recycler_layout,viewGroup,false);
	ViewHolder holder = new ViewHolder(mBinding);
	return holder;
	}
	@Override
	public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
	Animals animals = userList.get(i);
	viewHolder.mBinding.setAnimal(animals);
	}
	@Override
	public int getItemCount() {
	return userList.size();
	}
	public class ViewHolder extends RecyclerView.ViewHolder {
	RecyclerLayoutBinding mBinding ;
	public ViewHolder(@NonNull RecyclerLayoutBinding itemView) {
	super(itemView.getRoot());
	mBinding = itemView;
	}
	}
	}

view raw AnimalAdapter.java hosted with ❤ by GitHub

If you see onBindViewHolder () function, this binding variable is in recycler_layout.xml. So here, we are using this variable  and setting the data from list to layout.

Finally, in the MainActivity class set the call the recycler view and set the adapter to it.

	public class MainActivity extends AppCompatActivity {
	ActivityMainBinding mBinding;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	// setContentView(R.layout.activity_main);
	mBinding = DataBindingUtil.setContentView(this,R.layout.activity_main);
	}
	@Override
	protected void onStart() {
	super.onStart();
	mBinding.recyclerView.setLayoutManager(new LinearLayoutManager(this));
	AnimalAdapter adapter = new AnimalAdapter(getApplicationContext(),usersList());
	mBinding.recyclerView.setAdapter(adapter);
	}
	private List<Animals> usersList(){
	List<Animals> animalsList = new ArrayList<>();
	String[] animals = {"Tiger","Monkey","Dog","Lion","Zebra","Horse","Cat"};
	String[] types = {"Carnivore","Herbivore","Omnivore","Carnivore","Herbivore","Herbivore","Omnivore"};
	int[] image = {R.drawable.tiger,R.drawable.monkey,R.drawable.dog,R.drawable.lion, R.drawable.zebra, R.drawable.horse, R.drawable.cat};
	for (int i=0;i<animals.length;i++){
	Animals users = new Animals(
	animals[i],
	types[i],
	image[i]
	);
	animalsList.add(users);
	}
	return animalsList;
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

That's it, We have implemented the DataBinding to RecyclerView