Data Binding Part-III: Recycler view

In erlier chapter, we understood how to make a custom setter and bind ImageView with a image url directly. Now we will learn data binding with recycler view. We are going to make an adapter which will have a viewholder.

So lets start with make a layout having your recyclerview as i did, lets call it activity_main.xml .

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">
   
   <android.support.v7.widget.RecyclerView
       android:id="@+id/list_grid_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>
</LinearLayout>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<android.support.v7.widget.RecyclerView

android:id="@+id/list_grid_view"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

</LinearLayout>

Now we will create a layout for list/ grid item. Here we will have a text and an image. But firstly we have to make a java entity/ class for the structure we want to bind.

public class MyItem {
    String text;
    String imageUrl;

    public MyItem(String text, String imageUrl) {
        this.text = text;
        this.imageUrl = imageUrl;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public void setImageUrl(String imageUrl) {
        this.imageUrl = imageUrl;
    }
}

public class MyItem {

String text;

String imageUrl;

public MyItem(String text, String imageUrl) {

this.text = text;

this.imageUrl = imageUrl;

}

public String getText() {

return text;

}

public void setText(String text) {

this.text = text;

}

public String getImageUrl() {

return imageUrl;

}

public void setImageUrl(String imageUrl) {

this.imageUrl = imageUrl;

}

item.xml:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
   <data>
   <variable name="myitem" type="com.example.Item"/>
   </data>

   <LinearLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                app:imageUrl="@{myitem.imageUrl}"/>

             <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:text="@{myitem.text)}"/>

       </LinearLayout>
  </LinearLayout>
</layout>

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

<data>

</data>

<LinearLayout

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<LinearLayout android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal">

<ImageView

android:layout_width="50dp"

android:layout_height="50dp"

app:imageUrl="@{myitem.imageUrl}"/>

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center_vertical"

android:text="@{myitem.text)}"/>

</LinearLayout>

</layout>

As we are using app:imageUrl our custom setter so we have to define it. Here I am going to use picasso library if you want to use volley you can check it out from here.

public class BindingAdapter1 {

    @BindingAdapter("imageUrl")
    public static void loadImage(ImageView view, String url) {
        Picasso.with(view.getContext().getApplicationContext()).load(url)
                .into(view);
    }
}

public class BindingAdapter1 {

@BindingAdapter("imageUrl")

public static void loadImage(ImageView view, String url) {

Picasso.with(view.getContext().getApplicationContext()).load(url)

.into(view);

}

Now we will create a recyclerview adapter. We will do it in MainActivity.java as

public class MainActivity extends AppCompatActivity {
    private MyAdapter mAdapter;
    private List<Item> mData = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.list_grid_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        addData(); //add your data to list
        mAdapter = new MyAdapter(mData);
        recyclerView.setAdapter(mAdapter);
    }
 public void addData(){

}

}

public class MainActivity extends AppCompatActivity {

private MyAdapter mAdapter;

private List<Item> mData = new ArrayList<>();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.list_grid_view);

recyclerView.setLayoutManager(new LinearLayoutManager(this));

addData(); //add your data to list

mAdapter = new MyAdapter(mData);

recyclerView.setAdapter(mAdapter);

}

public void addData(){

}

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.BindingViewHolder> {
    private final List<Item> mData;

    public MyAdapter(List<tem> data) {
        mData = data;
    }

    @Override
    public MyAdapter.BindingViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        ItemBinding binding = ItemBinding.inflate(LayoutInflater.from(parent.getContext()), parent, false);
        return new BindingViewHolder(binding);
    }

    @Override
    public void onBindViewHolder(MyAdapter.BindingViewHolder holder, int position) {
        holder.mBinding.setMyitem(mData.get(position));
    }

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

    @Override
    public int getItemViewType(int position) {
        return 0;
    }

    static class BindingViewHolder extends RecyclerView.ViewHolder {
        private final ItemBinding mBinding;

        public BindingViewHolder(ItemBinding binding) {
            super(pBinding.getRoot());
            mBinding = binding;
        }
    }
}

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.BindingViewHolder> {

private final List<Item> mData;

public MyAdapter(List<tem> data) {

mData = data;

}

@Override

public MyAdapter.BindingViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

ItemBinding binding = ItemBinding.inflate(LayoutInflater.from(parent.getContext()), parent, false);

return new BindingViewHolder(binding);

}

@Override

public void onBindViewHolder(MyAdapter.BindingViewHolder holder, int position) {

holder.mBinding.setMyitem(mData.get(position));

}

@Override

public int getItemCount() {

return mData.size();

}

@Override

public int getItemViewType(int position) {

return 0;

}

static class BindingViewHolder extends RecyclerView.ViewHolder {

private final ItemBinding mBinding;

public BindingViewHolder(ItemBinding binding) {

super(pBinding.getRoot());

mBinding = binding;

}

And thats all for binding a recycler view data. You can also make a view swicher to switch between different layouts in the recyclerview as you have seen in many apps that switch between grid and list view. But we will coontinue that in the next part.

Next>