RecyclerView Android

"RecyclerView" 

   In previous two blogs we have studied about how to create ListView with array adapter and Custom Adapter using BaseAdapter class. In this blog we are going to study about what is RecyclerView

and how to implement it in android. Before studying about it lets understand what is main difference between ListView and RecyclerView.

1. RecyclerView is flexible version of ListView , If you want to show large data set in list or data that frequently change you should use RecyclerView.
2. The views in RecyclerView are represented by View Holder objects. Each view holder represents a single view.
3. RecyclerView creates view holder as are needed to display the on screen portion of the dynamic content. 
4. In RecyclerView the creating view and binding values with UI components are separating in thwo methods called : onCreateViewholder() and onBindViewHolder(). In other hand the ListView does not separating it, rather it create view and bind values with UI components in getView() method only.
5. The LayoutManager can define layout of row views. In RecyclerView the LayoutManager class gives the option to define how to scroll the list, for eg. Vertically or horizontally then we can set LinearLayoutManager. For Grid we can set GridLayoutManager. In ListView does not having this kind of feature. ListView only able to vertically scrolling.

   I hope you get the difference between ListView and RecyclerView. Now lets go for understanding to how to implement RecyclerView in Android.

   To access the RecyclerView widget then you need to add V7 support libraries.

• Open app level gradle file and add following dependencies file.

dependencies { implementation 'com.android.support:recyclerview-v7:28.0.0' }

• Now Sync your project
• Now you can add RecyclerView in your project.

    Open your activity layout file and copy the following code and paste it in your layout file.

<?xml version="1.0" encoding="utf-8"?> <relativelayout 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" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>

     Now add the following code in your activity class of above xml file:

package com.recycler.recyclerviewdemo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.widget.ListView; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private RecyclerView recyclerView; private ArrayList<string> listItem; private ArrayList<integer> imageList; RecyclerView.LayoutManager layoutManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); recyclerView = findViewById(R.id.recyclerview); //TODO : use this to improve performance. If you know that changes in content do not change the layout size. recyclerView.setHasFixedSize(true); //TODO : set layout for row views layoutManager = new LinearLayoutManager(this); //here defining linear layout for row views recyclerView.setLayoutManager(layoutManager); //set layout manager for recycler view //Add list items in array list listItem = new ArrayList<>(); listItem.add("KitKat"); listItem.add("Lollipop"); listItem.add("Marshmallow"); listItem.add("Nougat"); listItem.add("Oreo"); //Add images in array list imageList = new ArrayList<>(); imageList.add(R.drawable.kitkat); imageList.add(R.drawable.lollipop); imageList.add(R.drawable.marshmallow); imageList.add(R.drawable.nougat); imageList.add(R.drawable.oreo); //TODO : Create and set adapter to RecyclerView RecyclerAdapter recyclerAdapter = new RecyclerAdapter(this,listItem,imageList); recyclerView.setAdapter(recyclerAdapter); } }

     To feed all your data, you need to create adapter class, you must extend RecyclerView.Adapter class. The following code snippet shows an example of adapter class that consist of an two dataset :  image arrays  and string array displayed in ImageView and TextView respectively.

package com.recycler.recyclerviewdemo; import android.content.Context; import android.support.annotation.NonNull; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView; import java.util.ArrayList; public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.RecyclerClass> { private Context context; private ArrayList<string> listItems; private ArrayList<integer> imageArray; public RecyclerAdapter(Context context, ArrayList<string> listItems, ArrayList<integer> imageArray) { this.context = context; this.listItems = listItems; this.imageArray = imageArray; } @NonNull @Override public RecyclerClass onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) { //TODO : Create a new view for recycler list item and return view object to RecyclerClass // TODO : extend by "RecyclerView.ViewHolder" View view = LayoutInflater.from(context).inflate(R.layout.recycler_view_layout,null,false); //TODO : Return view object to class constructor return new RecyclerClass(view); } @Override public void onBindViewHolder(@NonNull RecyclerClass holder, int i) { //TODO : Bind values with UI Components //TODO : Access UI widgets using RecyclerClass object holder holder.item_tv.setText(listItems.get(i)); holder.list_img.setImageResource(imageArray.get(i)); } @Override public int getItemCount() { //TODO : Return total count of items displaying in recycler view return listItems.size(); } public class RecyclerClass extends RecyclerView.ViewHolder { public TextView item_tv; public ImageView list_img; public RecyclerClass(@NonNull View view) { super(view); //TODO : Initialize views item_tv = view.findViewById(R.id.itemname_tv); list_img = view.findViewById(R.id.list_img); } } }

   Now create one more layout file (here : "recycler_view_layout.xml") to design row view. See the following code:

<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/list_row" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="2dp" android:orientation="horizontal"> <ImageView android:id="@+id/list_img" android:layout_width="100dp" android:layout_height="100dp" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/itemname_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="10dp" android:text="List Item Name" android:textSize="27dp" /> </LinearLayout>

   Final step, Run your program and see the output. If any doubts and queries please comment in comment section.
Enjoy coding!😊

Click Here To Download Full Code

Get full code