How to use Recylerview using Data Binding

Hey Guys In previous post we have covered How to use recyclerview and use api for fetching into list,

If you haven;t read you can read it here: RecyclerView and API parsing

So in this post we will cover concept of Data Binding and How to implement recyclerview into it !

Dependency

 implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
//I will use constraintlayout if u orefer Linear Layout Go ahead :)

 implementation 'androidx.recyclerview:recyclerview:1.0.0'
//In this post we will pass data direcly u can try using Glide etc..
//So dependancy u can add according to same

Enable Databinding

Build.gradle(:app)

android{
    ....

dataBinding {
        enabled = true//enable this
    }

}

Add Recylerview in activity

activity_main.xml

 <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/recyclerviewSaurabh"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textAppearance="@style/TextAppearance.Body.Regular" />

Before creating itemView we will create model class ,will tell you why soon!

Model.java

package com.saurabh.android.app.modelname;

import android.graphics.drawable.Drawable;

public class Model {

    private Drawable image; //drawable is used for accesing img from vector assets
    private String t1;
    private String t2;

    public Model(Drawable image, String t1, String t2) {
        this.image = image;
        this.t1 = t1;
        this.t2 = t2;
    }

    public Drawable getImage() {
        return image;
    }

    public void setImage(Drawable image) {
        this.image = image;
    }

    public String getT1() {
        return t1;
    }

    public void setT1(String t1) {
        this.t1 = t1;
    }

    public String getT2() {
        return t2;
    }

    public void setT2(String t2) {
        this.t2 = t2;
    }
}

Now We will create itemView.xml and do read the comments .

Notice:

     <TextView
            android:id="@+id/Text1"
            android:text="@{Modelvar.t1}" //Notice this line and Model class
               ....
           " />
//This below section is important
    <data>
        <variable
            name="Modelvar"
            type="com.saurabh.android.app.modelname" />
    </data>

ItemView.xml

<?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="Modelvar"
            type="com.saurabh.android.app.modelname" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout

        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/Image"
            android:layout_width="@dimen/dimen_50_dp"
            android:layout_height="@dimen/dimen_50_dp"
            android:layout_marginStart="@dimen/dimen_8_dp"
            android:layout_marginLeft="@dimen/dimen_8_dp"
            android:layout_marginTop="@dimen/dimen_36_dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:srcCompat="@tools:sample/avatars" />

        <TextView
            android:id="@+id/Text1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/dimen_36_dp"
            android:textStyle="bold"
            android:layout_marginLeft="@dimen/dimen_36_dp"
            android:layout_marginTop="@dimen/dimen_36_dp"
            android:text="@{Modelvar.t1}"
            android:textAppearance="@style/TextAppearance.Body.Header.Regular"
            app:layout_constraintStart_toEndOf="@+id/Image"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/Text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/dimen_36_dp"
            android:layout_marginLeft="@dimen/dimen_36_dp"
            android:layout_marginTop="@dimen/dimen_65_dp"
            android:layout_marginEnd="@dimen/dimen_8_dp"
            android:layout_marginRight="@dimen/dimen_8_dp"
            android:text="@{Modelvar.t2}"
            android:textAppearance="@style/TextAppearance.Body.Regular"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/Image"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Note:

So we can see the variables are directly use with reference of “Modelvar“ which is instance of ModelClass.

Also For image we have not passed anything as it is an Vector asset we have to pass srcCompat resource so we will pass it dynamically.

Now is Time to Create Adapter:

Adapter.java

public class Adapter extends RecyclerView.Adapter<Adapter.recyclerViewHolder> {
    private List<Model> ModelList;
    private Context mcontext;

    public Adapter(List<Model> ModelList, Context mcontext) {
        this.ModelList = ModelList;
        this.mcontext = mcontext;
    }
/*
In On createViewHolder we are using ItemViewBinding where this class is automatically generated  by system and we isntantiate variable binding to referr to itemView class
*/



    @NonNull
    @Override
    public recyclerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        ItemViewBinding binding = DataBindingUtil.inflate(LayoutInflater.from(mcontext), R.layout.itemView, parent, false);
        return new recyclerViewHolder(binding);
    }

    @Override
    public void onBindViewHolder(@NonNull recyclerViewHolder holder, int position) {
        Model model=ModelList.get(position);

        //Image is not set directly in xml so with this we are setting it explicitely
        //using drawable
        holder.binding.Image.setImageDrawable(Model.getImage());

        /* Now the most important Step
        see we are passing whole Model 
        and see the name of setModelvar where Modelvar is variable name we defined
        in itemview.xml file so the Set__() function is created by system again!
        */

        holder.binding.setModelvar(Model);
    }

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

    public static class  recyclerViewHolder extends RecyclerView.ViewHolder{
        public ItemViewBinding binding;

        public recyclerViewHolder(@NonNull ItemViewBinding binding) {
            super(binding.getRoot());
            this.binding = binding;
    /*Notice this View Holder class 
            we have not declare variables here also we havent used findViewBy ID
            SO we just use Binding while getRoot binds to parent layout  
            */
        }
    }

}

So we can Notice the number of lines reduced with Binding for adapter,

Now we will make changes to Mainactivity class. we are using kotlin here.

Mainactivity.kt

//Create Object of ModelClass  we have arrayList here
var Modelsobject:ArrayList<Model> = arrayListOf()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        //setting data-binding
         setUpToolBar(binding.appBarLayout)
      .....


        Modelsobject.add(Model(AppCompatResources.getDrawable(this,R.drawable.img1),"Life is beauty","Dance like a wind"))
        //adding data to arraylist
        //appcompatresources help to use drawables
         Modelsobject.add(Model(AppCompatResources.getDrawable(this,R.drawable.img2),"Life is beauty again","Dance like a wind again"))

        setupRecyclerView();
        //we will define this now

    }


/* Out of Oncreate we will define our recyclerview
*/
 private fun setupRecyclerView() {
        val layoutManager=LinearLayoutManager(this)
     //creating instance of Linearlayout

        binding.recyclerview.layoutManager=layoutManager
     //binding it to recyclerview
        //It is as simple as this !
        binding.recyclerview.adapter=Adapter(Modelsobject,this)
     //Done hurray!!!
    }

So yes guys we have successfully Implemented it !

Hope you enjoyed it !

In next tutorials we will see more about kotlin !

So stay tuned!

Thank you :)

How to use Recylerview using Data Binding

Comments

Android Development

Basics of Kotlin for Android Development

More from this blog

Persistent "Android Resource Linking Failed" (Ghost Files) : Solution

Jetpack Compose Bottom Navigation + Nested Navigation Solved

Compose MVVM RoomDB with Flow and DI

Ultimate Guide to Jetpack Compose Navigation

Installing LangChain: How to install LangChain and get started with it